いいねボタンを効率的に掲載

Webデザイン ガイド

すくーれ

Facebook(フェイスブック)の[いいね]ボタンを、同じソースコードのJavaScriptを使って複数のWebページに掲載する方法を紹介します。

更新:2014.2.8

同じソースコードで済ませるには

「IFRAME」タイプの場合は個別のURLが記載されているため、掲載したいページごとにソースコードを変える必要があります。

しかし、下のソースコードのようにJavaScriptを使うと、複数のページに同じソースコードを載せられるので、テキストの置換を使って効率的に[いいね]ボタンを掲載できます。

いいねボタンを簡単に載せる方法

下のソースコードをHTMLにペーストすると、[いいね]ボタンを掲載できます。

♥♥♥のところに自分のアプリケーションIDを入れます。

アプリケーションIDとは

いいねボタンを作るページ

アプリケーションIDとはサイトごとの設定される16桁の値です。

JavaScriptを使ったソースコード

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

参考

OGP設定

いいねボタンをクリックされて、Facebookのフィードに掲載される内容をコントロールしたければ、 OGP(Open Graph Protocol)を設定します。

設定しなければ、HTMLのtitle要素や大きいimg要素を引っ張ってきます。

恵比寿のWebデザイン学校 受講生募集