サイトにFacebookのいいねボタンを設置したい
自分のサイトにFacebookのいいねボタンを設置してSNSでのシェアを増やし、検索流入以外の流入源を増やしたいという方も多いと思います。
ではFacebookのいいねボタンを設置するにはどうしたらいいのかという課題ですが、実は簡単に設置することができます。
Facebookのいいねボタンを設置する方法
Facebookのいいねボタンは簡単に作成できるようにテンプレートが用意されており、HTMLにそのテンプレートを貼り付けるだけでいいねボタンを設置できます。
一番カンタンなテンプレートはこちらのコードです。
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-layout="box_count" ></div>
とりあえずFacebookのいいねボタンを設置したいのであればこちらのコードを表示したい場所にそのまま貼り付けましょう。
複数箇所貼り付ける場合は一箇所目のみ先程のコードを貼り付けて、2箇所目以降は以下のコードを貼り付けましょう。
<div class="fb-like" data-layout="box_count" ></div>
これで無駄なコードと処理を省くことができ、Facebookのいいねボタンが原因でWebページが重くなってしまうのを防げます。
シェアボタンも同時に設置する
カスタマイズ内容は、「<div class="fb-like"...」のタグに「data-share="true"」を追加するだけです。
<div class="fb-like" data-share="true" data-layout="box_count" ></div>
これだけでいいねボタンの下にシェアボタンを設置することができます。
オリジナルデザインにはできない
シェアボタンと違っていいねボタンはiframeのクロスドメインに依存するため、デザインを変更することはできません。
シェアボタンならただのaタグですのでオリジナルデザインにカスタマイズすることができますが、いいねボタンは仕様上できないので覚えておきましょう。
どうしてもオリジナルデザインのFacebookボタンを設置したい場合はいいねボタンではなくシェアボタンを設置することをお勧めします。
シェアボタンならただのaタグですのでオリジナルデザインにカスタマイズすることができますが、いいねボタンは仕様上できないので覚えておきましょう。
どうしてもオリジナルデザインのFacebookボタンを設置したい場合はいいねボタンではなくシェアボタンを設置することをお勧めします。
