ブログやページに、Facebookのいいね！ボタンを設置する方法

2013-05-16
- Web
- デザイン

ブログ4記事目にして、ようやくWebデザイン系の話です(追記あります)。

2回に渡って書いたSNSミュートの記事ですが、これまた一部ですが、割と評判良くて。

いいねやツイートしてくれたり、コメントをくれたり、TwitterでリプやDMをくれた方もいました！嬉しい限りです。

まぁ、今回、Webデザイン系の話といっても、制作・開発者向けではなく、割と初心者向けの記事なので、技術者にとっては、つまらない内容かもしれません。今は、導入部分の記事を書きたいので。

今回は、こんな人向けです。

ウチが使ってるブログにはいいね！ボタンがついていない！
ウチのホームページは静的なHTMLなので、いいね！ボタンがついていない！

僕が制作補助をやらせてもらっているブログがあるんですが、そのサイトはココログを使っています。ココログの仕様で、ツイートボタンは付いているんですが、いいね！ボタンはついていません。しかし、ここでどうしても付けたくなってしまった僕。

good

何故いいね！ボタンを付けるの？

実際、自分のブログ含め、いくつかのブログを管理してきましたが、ツイートより、いいね！の方が数が、確実に数が伸びます。
皆さんも、ブログを読んでいて、「っお、これいいなぁ。」と思った時、ツイートとかシェアより、いいね！の方が、低ハードルで、気軽に押せますよね？

これが理由です。今あるページを、更に拡散させたいなら、最も手軽にできる方法だと思います。

いいね！ボタンの設置の仕方

追記(2013-7-31)

全てこれで解決！

Like Button

Facebookの仕様が変わりすぎて大変なので、調べるより、上記のページでコードを生成した方が早いです！

——–追記はここまで——–

やり方は簡単。ブログなら記事の最後ですとか、設置したい場所に、以下のタグをコピーして、貼り付けます。

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F●●%2F&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>

この●●の部分を、その設置したいページのURLに書き換えるだけです！

すると、本当にこれだけで設置されちゃいます。

ブログの場合、毎回1記事ごとに設置しなきゃいけないという手間はありますが、むしろ、重要な記事にだけ付けちゃったりして活用してください。

普通の方は、ここまで読んでいただければ良いです。

WordPressで使う場合(ほぼ確実に無駄な応用編)

さて、プラグインを使えば一発なのですが、「俺はプラグインを意地でも使いたくないんだ！」という方のために、一応。

記事毎に毎回URLを合わせて書き換えて入れなきゃいけないと書きましたが、WPでは、その手間を省けます。

single.phpの

<?php the_content(); ?>

の下あたりに、

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F<?php the_permalink() ?>%2F&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>

と入れましょう。これで自動でURLを吐き出してくれます。まぁ、相当な拘りを持った人でない限り、使わないでしょう。

では。

追記(2013-7-6)

この記事のコメントで気づいたのですが、最近Facebook公式の仕様が変わったらしく、面倒になってます。

上記のコード方法だと、いいねを押すだけで、拡散はされません。次の方法で、いいねを押した後にコメントと共にタイムラインに「いいね！と言っています」と表示させることができます。ただし、htmlが自由にいじれるサイトでないとできません。自身のサイトで、静的なhtmlで構成されているサイトなら可能です。

無料ブログよのうに、自由にタグがいじれないサイトは、この方法ではできません。

まず、<body>タグの直下に、

<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/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

上記のJavascriptを貼り付けます。

そして、いいねボタンを設置したい個所に、

<fb:like href="http://●●" send="true" layout="button_count" width="200" show_faces="false"></fb:like>

のコードを書きます。●●の部分を自身のURLに変更してください。

最後に、

<iframe src="http://www.facebook.com/plugins/like.php?href=●●"
scrolling="no" frameborder="0"style="border:none;width:450px;
height:80px"></iframe>

こちらのコードだと、コメントができますので、ダメもとで試してみてください。

ただ、古い仕様のコードなので、いいねの数が合わなかったり、不具合が起きたりもします。保証はできませんので、ご了承を。

2013-05-16
Facebook
SNS

ご一緒に、Related Potato はいかがですか？