及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > Facebook > ウェブサイトの複数のページに[いいね！]ボタンを設置する

ウェブサイトの複数のページに[いいね！]ボタンを設置する

[いいね！]ボタン（Like Button）を、ウェブサイトに設置する時、URLを指定する必要がある。
複数のページに[いいね！]ボタンを設置する時、それぞれのページのURLを記述する必要があるが、それは面倒。
Javascript でURLを取得して、それを[いいね！]ボタンのソースコードに設定すれば、いちいちURLを入力する手間が省ける。

サンプルサイト：及川治建築設計室
このサイトは全ページに[いいね！]ボタンを設置しています。
各ページのURLを「いいね！」出来るようになっています。

※「いいね！」ボタンのカスタマイズ方法はこちら
Facebook[いいね！]ボタン設置・カスタマイズ

設置方法

1.準備。「JavaScript SDK」コードを設置

Facebook の[いいね!]ボタンプラグインのページで「Like Buttonのプラグインコード」を取得する。
ニュースフィードの左側のメニューの[アプリ] > ページ最下部の[開発者] > [ウェブ] > [Social Plugin] > [Like Button]
Like Button
「HTML5」版の Like Button のプラグインコードを取得する方法
  1. 「URL to Like (?)」の箇所はダミーのURL（「http://」から始まる絶対URL）を入れておく。
  2. [Get Code]で「JavaScript SDK」と「プラグインのコード」を取得できる。
    その際、一番上にある[HTML5][XFBML][IFRAME][URL]の4つのボタンから、[HTML5]ボタンを選択しておく。
  3. 「JavaScript SDK」を、[いいね！]ボタンを表示するすべてのページの <body> タグの後に入れる。
    （コードをインクルードさせたり、Dreamweaverならテンプレート機能を使ったりして全ページに入れておくなどしておくと楽かと思います。）

2.「プラグインのコード」をJavascriptに組み込む

[いいね！]ボタンを設置したい個所に下記のソースを入力する。 
<script type="text/javascript" language="javascript">
document.write('');
</script>
2行目の「document.write('');」のカッコのカンマ内に[Get Code]で取得した「プラグインのコード」を入力する。
そして、ダミーで入れたURLを「' + location.href + '」に入れ替える。
（「data-href="http://***"」の箇所を「（data-href="' + location.href + '"）」にする。）

【例】 
<script type="text/javascript" language="javascript">
document.write('<div class="fb-like" data-href="' + location.href + '" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div>');
</script>

3.「プラグインのコード」を組み込んだJacascriptを各ページに設置

上記2．で作ったコードを、[いいね！]ボタンを表示したいページ全ページ、
[いいね！]ボタンを表示したい箇所に入力する。
以上で、設置完了。

試しに[いいね！]ボタンを設置したページを表示して、[いいね！]ボタンをクリックしていいね！してみてください。
ご自分のウォールにいいね！したページがリンクされます。

MENU Ξ