ブログにFaceBook「いいね!」ボタンを配置する
2014/03/16 Sun 11:56
ネット上で、いろんなニュースを流し読みしていて、最近の記事には、さまざまなSNSのコメント欄だったり、「いいね!」ボタンだったりが配置されていることに気がつきました[ガーン]。
それで、個人のブログにも配置できるのかと、調べたところ、ソースをいじれる人であれば簡単に設置できたので、書き留めておきます。
ただし、「いいね!」ボタンの設置には、Javascriptのコードを使用します。使用しているBlog、またはBlogサービスでJavaScriptが利用可能でないと、この方法は使えません…[悲しい]。
それで、個人のブログにも配置できるのかと、調べたところ、ソースをいじれる人であれば簡単に設置できたので、書き留めておきます。
ただし、「いいね!」ボタンの設置には、Javascriptのコードを使用します。使用しているBlog、またはBlogサービスでJavaScriptが利用可能でないと、この方法は使えません…[悲しい]。
まず、ブログの<body>タグの直下に、以下のJavascriptのコードを書きます。
そして、「いいね!」ボタンを表示したい場所に以下のプラグインコードを書きます。
共に、コピペOKなはずです。これを書いてもうまく動作しない場合は、JavaScriptが使用できない可能性があります[ごめんなさい]。
記事毎に張り付けたい場合は、「href=<%topentry_enc_link>」のように記事のURLを示すタグを指定してください。このタグはBlogサービスやシステムによって異なります。
また、data-layouの値を変更することで、デザインを変更できます。
data-show-facesは、「いいね!」したのが友達であれば、顔アイコンを見せてくれるオプションで、data-shareは、「シェア」ボタンを同時に表示するオプションです。ともに、『true/false』でOn/Off出来ます。
ここのサイト(英語)で、デモを表示できるので、参考にしてみてください[うれしい]。
<div id="fb-root"></div> |
そして、「いいね!」ボタンを表示したい場所に以下のプラグインコードを書きます。
<div class="fb-like" data-href=”「いいね!」ボタンを配置する場所のURL” data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div> |
共に、コピペOKなはずです。これを書いてもうまく動作しない場合は、JavaScriptが使用できない可能性があります[ごめんなさい]。
記事毎に張り付けたい場合は、「href=<%topentry_enc_link>」のように記事のURLを示すタグを指定してください。このタグはBlogサービスやシステムによって異なります。
また、data-layouの値を変更することで、デザインを変更できます。
data-show-facesは、「いいね!」したのが友達であれば、顔アイコンを見せてくれるオプションで、data-shareは、「シェア」ボタンを同時に表示するオプションです。ともに、『true/false』でOn/Off出来ます。
ここのサイト(英語)で、デモを表示できるので、参考にしてみてください[うれしい]。
Comment
Comment Form