RUIN OF THE WEB DESIGNER

Webデザイナーの成れの果て

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

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

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

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

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

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

 

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

 

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

good

何故いいね!ボタンを付けるの?

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

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

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

追記(2013-7-31)

全てこれで解決!

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>

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

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

感想などあれば、是非!

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

非SNSでのコメント (6)

“ブログやページに、Facebookのいいね!ボタンを設置する方法” への6件のフィードバック

  1. かわうそ亭 より:

    「普通の方」なので、ご教示のタグをココログの過去の記事のいくつかに設置して無事ボタンができました。ありがとうございます。
    ところで、多くの記事では、<○人が「いいね!」と言っています。>と表示されます。ボタンを設置する前から、なぜ「いいね!」が押されたような結果になっているのか疑問に思いました。その記事のURLをFacebookで言及された方があったということなのでしょうか?もしお時間がありましたら、お教え下さい。

    • right69 より:

      かわうそ亭さん
      コメントありがとうございます。
      Facebookの仕様で、表記がおかしくなってしまう場合があるみたいです。
      記事内のコードをちょっと変えたので、お手数ですが、そのコードでもう一度試してみてください。
      こちらのサイトもご参考に。
      http://ushigyu.net/2012/05/11/fix_facebook_number_of_like/

  2. かわうそ亭 より:

    どうもありがとうございました。コードを変えると、きちんとゼロの表示になりました。ボタンを押すと「1」になりますね。
    ついでの質問ですが、Facebookのアカウントをもっていない方でもこのボタンの利用はできるようですが(ですよね?)、もしアカウントを持っている方がボタンを押すと、その方のタイムラインに「いいね!しました」のように表示されるのでしょうか?いや、まったくとんちんかんな質問してたらごめんなさい。

    • right69 より:

      かわうそ亭さん
      できてよかったです^^お手数おかけしました。
      いいねボタンを押したときに、Facebookでのログインを求められる筈なので、
      アカウントを持っていないと利用できないと思いますよ(たぶん)。
      先程のコードはあくまで無理やり設置なので、タイムラインに書き込まれるようにするには、OGPの設定をしたり、少しタグをいじる必要があります。
      https://developers.facebook.com/docs/reference/plugins/like/
      英語ですが、こちらが公式のプラグインになります。
      仕様が変わってから、少しやっかいになってしまってます><

      • かわうそ亭 より:

        いや、どうもありがとうございました。OGPの設定は、とても手に負えませんので、いまのかたちでわたしには十分です。たいへん参考になるエントリーでした。

      • right69 より:

        今回の件で、Facebook公式の仕様が変わったことに気付くことができました。
        こちらこそ、ありがとうございました^^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This blog is kept spam free by WP-SpamFree.