Facebookいいね！ボタンを各ページごと分ける方法

• 公開日 : 2011年12月13日
• カテゴリ : Web制作

前回の記事で説明したFacebookのいいね！ボタンの設置の仕方は登録したURLが一つだけなので、いろいろなページに設置して訪問者に押されたとしても、Facebookに送られて紹介されるページは登録URLだけになります。
しかし、コード取得ページで全ページ分のURLを毎回入力するのは非常に面倒くさいので普通はやってられません。
というわけで、各ページのURLを自動で取得して、ページに貼り付けるコードを共通化してしまおうという企画です。

まずJavaScriptで以下のようなコードを作成します。

var url = encodeURIComponent(location.href);
document.write('');

そしてdocument.write('');のシングルクォーテーションで囲まれた部分に、前回の記事で取得したIFRAMEのコードをそのまま入れます。

次にこのIFRAMEのコード内の?href=から&までの間の記述がボタンを押した際にFacebookに送られるURLになりますので、その部分を' + url + 'に差し替えます。(前後のシングルクォーテーションごと貼り付けてください)

以上でコードは完成です。
あとはこのコードをJavaScriptファイルとして保存し、ボタンを設置するページからリンクさせてください。

うまくできていればどのページにもこのコードを貼れば、いいね！ボタンを押した際にそれぞれのページのURLが送信されるようになります。

2012年9月10日追記：この記事では少し問題点とわかりにくい点があることが判明したので、もう少しわかりやすく書き直しました。以下のページも参考にしてください。
https://www.firstsync.net/archives/2165