Facebookいいね!ボタンを各ページごと分ける方法を詳細に説明

ずいぶん前の記事で「Facebookいいね!ボタンを各ページごと分ける方法」というのを書いたことがあった。

しかしこの記事を見ても設置ができない。という人がYahoo!知恵袋で質問しているのを先ほど偶然発見し、そんなはずはないと思って調べてみると、問題のある点やわかりにくい点が確かにあった。
設置に挫折した人には大変申し訳なかった。
聞いてくれればいいのに。

記事を見た人が設置できないようでは記事を書いた意味がない。
私自身も今後また調べ直すのは面倒なので、もう一度わかりやすくここに記しておこうと思う。

作業の手順解説

まずは以下のページを参考にしてFacebookのいいね!のボタンを設置する。
https://www.firstsync.net/archives/597

コードが生成された時の画面表示は以下の画像のような感じになる。
赤く記した個所は後で書き換える部分である。
Facebookのいいね!のボタンのコード生成画面

上の画像の通り、今回も汎用的に使用できるiFrameのコードを選ぶこと。
そして次にテキストエディタで以下のコードを入力する。

<script type="text/javascript">
    var url = encodeURIComponent(location.href);
    document.write('');
</script>

次にdocument.write('');のシングルクォーテーションの中に先ほど生成されたコード(上記画像)をすべてコピーして貼り付けます。
具体的には以下のような感じになる。(幅520px、Send ButtonはOFF、Show FacesはOFFの場合)
最初のコード生成の際の選択肢によってコード内容に少し違いが出るが、全体像として参考程度に見てほしい。

<script type="text/javascript">
    var url = encodeURIComponent(location.href);
    document.write('<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.firstsync.net%2Fhomepage%2F597%2F&amp;send=false&amp;layout=standard&amp;width=520&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35&amp;appId=260674153997248" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:520px; height:35px;" allowTransparency="true"></iframe>');
</script>

次に先ほどの画像で赤く塗った箇所を削除し、その部分に以下のコードを挿入します。(具体的に言えばhref=の後から最初の&amp;の前までを以下のコードに差し替え)

' + url + '

前回の記事ではどうもこの部分が問題があったようで、ブラウザで表示上は半角のシングルクォーテーションなのに、それをコピーしてテキストエディタに貼り付けるとなぜか全角になってしまっていたようだ。(現在は修正済み)

JavaScriptをはじめとしたプログラム内では基本的に全角文字は使用できないので、当然だがエラーになってしまう。

今回はコピーしても大丈夫だと思うが、一応念のために言っておくと上記のようなコードはすべて半角で記述するのが原則だ。
そして、先ほどのコードを実際に書き換えると以下のようになる。

<script type="text/javascript">
    var url = encodeURIComponent(location.href);
    document.write('<iframe src="//www.facebook.com/plugins/like.php?href=' + url + '&amp;send=false&amp;layout=standard&amp;width=520&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35&amp;appId=260674153997248" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:520px; height:35px;" allowTransparency="true"></iframe>');
</script>

ここまで読み進めてきた人ならわかるよね。
あとはコードを各ページ内のFacebookいいね!ボタンを設置したい箇所にそのまま貼り付ければOKだ。

このコード1つだけで各ページのいいね!ボタンが押された際にそれぞれのページのURLが送信されることになる。
もしわからんトコあったら聞いてちょうだい。

追記など

追記:このブログ内に設置してあるFacebookいいね!ボタンは「Facebook Comments for WordPress」というプラグインによって表示しているので、このページでの説明とはコードに若干の違いがあります。なのでこのブログのソースは参考にしないほうが良いでしょう。
私の本業のホームページのほうではこのページで説明したとおりのコードを使用しておりますので、もしかしたら参考になるかもしれません。(外部ファイル化していますが)

2013年1月5日追記:コメント欄の見た目は変わっていませんが、「Facebook Comments for WordPress」というプラグインの使用をやめました。しかし「いいね!」ボタンの表示はこのページでの説明のようなJavaScriptでの表示ではなくPHPによって実現しているため、このブログのソースを見ても参考にはなりません。

2013年1月26日追記:Facebookいいね!ボタンを誰でも簡単に設置できるスクリプトを作ってみました。このページの説明で挫折した方はぜひ試してみてください。

2013年8月18日追記:Facebookのいいね!ボタンだけでなく、はてなブックマークやGoogle+、Twitterのボタンを超簡単にまとめて設置できるスクリプトを公開しました。使い方の解説とダウンロードはこちらのページをご覧ください。