>Webブログやページに、Facebookのいいね!ボタンを設置する方法ブログやページに、Facebookのいいね!ボタンを設置する方法2013-05-16Webデザインブログ4記事目にして、ようやくWebデザイン系の話です(追記あります)。2回に渡って書いたSNSミュートの記事ですが、これまた一部ですが、割と評判良くて。いいねやツイートしてくれたり、コメントをくれたり、TwitterでリプやDMをくれた方もいました!嬉しい限りです。今回、Webデザイン系の話といっても、制作・開発者向けではなく、割と初心者向けの記事なので、技術者にとっては、つまらない内容かもしれません。今は、導入部分の記事を書きたいので。今回は、こんな人向けです。ウチが使ってるブログにはいいね!ボタンがついていない!ウチのホームページは静的なHTMLなので、いいね!ボタンがついていない!僕が制作補助をやらせてもらっているブログがあるんですが、そのサイトはココログを使っています。ココログの仕様で、ツイートボタンは付いているんですが、いいね!ボタンはついていません。ここでどうしても付けたくなってしまった僕。いいね!ボタンを付けるの?実際、自分のブログ含め、いくつかのブログを管理してきましたが、ツイートより、いいね!の方が数が、確実に数が伸びます。皆さんも、ブログを読んでいて、「っお、これいいなぁ。」と思った時、ツイートとかシェアより、いいね!の方が、低ハードルで、気軽に押せますよね?これが理由です。今あるページを、更に拡散させたいなら、最も手軽にできる方法だと思います。ButtonFacebookの仕様が変わりすぎて大変なので、調べるより、上記のページでコードを生成した方が早いです!——–追記はここまで——–やり方は簡単。ブログなら記事の最後ですとか、設置したい場所に、以下のタグをコピーして、貼り付けます。allowTransparency="true"></iframe>この●●の部分を、その設置したいページのURLに書き換えるだけです!すると、本当にこれだけで設置されちゃいます。ブログの場合、毎回1記事ごとに設置しなきゃいけないという手間はありますが、むしろ、重要な記事にだけ付けちゃったりして活用してください。普通の方は、ここまで読んでいただければ良いです。WordPressで使う場合(ほぼ確実に無駄な応用編)さて、プラグインを使えば一発なのですが、「俺はプラグインを意地でも使いたくないんだ!」という方のために、一応。記事毎に毎回URLを合わせて書き換えて入れなきゃいけないと書きましたが、WPでは、その手間を省けます。allowTransparency="true"></iframe>と入れましょう。これで自動でURLを吐き出してくれます。相当な拘りを持った人でない限り、使わないでしょう。追記(2013-7-6)この記事のコメントで気づいたのですが、最近Facebook公式の仕様が変わったらしく、面倒になってます。上記のコード方法だと、いいねを押すだけで、拡散はされません。次の方法で、いいねを押した後にコメントと共にタイムラインに「いいね!と言っています」と表示させることができます。htmlが自由にいじれるサイトでないとできません。自身のサイトで、静的なhtmlで構成されているサイトなら可能です。無料ブログよのうに、自由にタグがいじれないサイトは、この方法ではできません。'facebook-jssdk'));</script>上記のJavascriptを貼り付けます。show_faces="false"></fb:like>のコードを書きます。●●の部分を自身のURLに変更してください。frameborder="0"style="border:none;width:450px;height:80px"></iframe>こちらのコードだと、コメントができますので、ダメもとで試してみてください。古い仕様のコードなので、いいねの数が合わなかったり、不具合が起きたりもします。保証はできませんので、ご了承を。Cardsもやっといた方が良いっぽい期間限定のブログデザイン君って、デザインセンスがないよね。11:42「普通の方」なので、ご教示のタグをココログの過去の記事のいくつかに設置して無事ボタンができました。ありがとうございます。ところで、多くの記事では、<○人が「いいね!」と言っています。ボタンを設置する前から、なぜ「いいね!」が押されたような結果になっているのか疑問に思いました。その記事のURLをFacebookで言及された方があったということなのでしょうか?もしお時間がありましたら、お教え下さい。16:55かわうそ亭さんコメントありがとうございます。Facebookの仕様で、表記がおかしくなってしまう場合があるみたいです。記事内のコードをちょっと変えたので、お手数ですが、そのコードでもう一度試してみてください。こちらのサイトもご参考に。18:40どうもありがとうございました。コードを変えると、きちんとゼロの表示になりました。ボタンを押すと「1」になりますね。ついでの質問ですが、Facebookのアカウントをもっていない方でもこのボタンの利用はできるようですが(ですよね?)、もしアカウントを持っている方がボタンを押すと、その方のタイムラインに「いいね!しました」のように表示されるのでしょうか?いや、まったくとんちんかんな質問してたらごめんなさい。19:18かわうそ亭さんできてよかったです^^お手数おかけしました。いいねボタンを押したときに、Facebookでのログインを求められる筈なので、アカウントを持っていないと利用できないと思いますよ(たぶん)。先程のコードはあくまで無理やり設置なので、タイムラインに書き込まれるようにするには、OGPの設定をしたり、少しタグをいじる必要があります。https://developers.facebook.com/docs/reference/plugins/like/英語ですが、こちらが公式のプラグインになります。20:20いや、どうもありがとうございました。OGPの設定は、とても手に負えませんので、いまのかたちでわたしには十分です。参考になるエントリーでした。21:37今回の件で、Facebook公式の仕様が変わったことに気付くことができました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。頼人(ライト)と申します。FANTASYロゴ風フリーフォントにグッと来た!(商用利用可)slackでチャンネルを削除。XDで「インタラクションが含まれていません」の警告が出て「開発者に共有」ができない邦ロックマニアが秋に聴きたくなる曲はこれだ気持ち悪い。POSTS社会人、恐いよー、なりたくないよー。