及川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 Ξ