TopFacebook > 2010年10月
2010年10月25日

Facebookの「いいね」ボタンをブログに設定する

October 25,2010 2:55 AM
Tag:[]
Permalink

Facebookの「いいね」ボタンをブログに設定する方法を紹介します。

Facebookの「いいね」ボタン

Facebookの「Like Button」のページにアクセスします。

Like Buttonのページ1

そして、ページにある次のフォームを使ってカスタマイズします。

Like Buttonのページ2

以下、それぞれの設定項目について説明します。なお、このページでのカスタマイズだけでは、冒頭の画像のように「いいね」という日本語は表示されないので、生成したコードに対して変更を加えます。変更方法は最後に書いておきます。

URL to Like

「いいね」ボタンを表示したい記事のURLを設定します。省略した場合、このコードを設置したページが対象になります。

Movable TypeやWordPressのメインページやアーカイブページの各記事に設定する場合は、ここに「<mt:EntryPermalink>」や「<?php the_permalink() ?>」を設定すればよいのですが、前後のブラケットが実体参照されてしまうので、「mt:EntryPermalink」や「the_permalink()」のみ設定して、取得したコードに後に修正します。

ちなみに、XFBML形式の場合、次のようにhref属性に設定します。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<$mt:EntryPermalink$>" width="450" font="verdana"></fb:like>

WordPressの場合も同様に修正します。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php the_permalink() ?>" width="450" font="verdana"></fb:like>

iframe形式の場合

<iframe src="http://www.facebook.com/plugins/like.php?href=<$mt:EntryPermalink$>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Layout Style

表示形式を選択します。

standardを選択した場合の表示
standardを選択した場合の表示

button_countを選択した場合の表示
button_countを選択した場合の表示

box_countを選択した場合の表示
box_countを選択した場合の表示

Show Faces

チェックすればユーザーのアイコンが下部に表示されます。

Show Faces

Width

「いいね」ボタンの表示領域の横幅を設定します。

Verb to display

表示するボタンの種類を選択します。Likeは「いいね」、Recommendは「おすすめ」になります。

Recommendを選択した場合の表示
Recommendを選択した場合の表示

Font

ボタンおよび表示される文章のフォントを選択します。arial、lucida grande、segoe ui、tahoma、trebuchet ms、verdanaがあります。

Color Scheme

ボタンの明るさを変更します。

lightを選択
lightを選択

darkを選択
darkを選択

設定が終わって「Get Code」をクリックすればコードが表示されます。コードはiframe要素のものと、XFBMLの2通りです。

コード

ボタンを日本語で表示する

ボタンを日本語で「いいね」と表示するには、コードに含まれる「en_US」の部分を「ja_JP」に変更します。XFBML形式の場合は次のように変更します。

変更前

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like width="450" font="verdana"></fb:like>

変更後

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:like width="450" font="verdana"></fb:like>

iframe形式の場合も同様です。

Comments [12] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3