Top  スポンサー広告  ブログに色々なボタンを設置してみた。「Facebookいいね!ボタン」編 Top  義経の備忘録  ブログに色々なボタンを設置してみた。「Facebookいいね!ボタン」編
--------(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

↓役に立った・面白かったなど思っていただけましたら是非クリックをお願いします。
このエントリーをはてなブックマークに追加
関連記事

Category : 義経の備忘録

2012-01-27(Fri)
ども…皆さんこんにちは。義経です。

FC2ブログに各ボタンを設置する解説を行っております。
Twitter:ツイートボタン →Twitterツイートボタン編
Google:Google+1ボタン →Google+1ボタン編
mixi:イイネ!ボタン →mixi:イイネ!ボタン編
Facebook:いいね!ボタン →今回
はてなブックマーク:はてなブックマークボタン →はてなブックマークボタン編

さて、今回はFacebookのいいね!ボタンです。
これも基本的にはFC2のサービスで提供されていますが、FC2のサービスを使用しない場合に自分で作ります。

余談ですが、自分はFacebookは使っていません。
というか使おうと思ったんですが怖すぎで止めましたw
何が怖かったかというと…とりあえず興味本位でFacebookに登録してみました。(実名じゃ無いです。)しかし何もせずに放置。その後会社でFacebookがはやり始め、そういえば、昔Facebook登録したなぁなんてのぞき込んで見ました。知り合いじゃ無いですか?に会社の人が出てくる出てくるwww
プライベート用に使おうと思っていたのにもかかわらず、会社の人が出てきていると言う事は向こうからも見えているはず…これはまずいと思いとりあえずそっと放置プレイにしました。
流石にプライベート用が会社の人にばれるのは嫌なので絶賛放置プレイ中です。ログインもしてませんw

とまぁかなり余談を語ったところで…
今回はFacebookのいいね!ボタン編です。基本的にFC2ブログ用に書いていきます。
Facebookのいいね!ボタンの設置方法

Facebookに関しても公式のボタンが公開されていますのでそこから作成していきます。 →facebook Developers
英語ですが気にせずにw

facebookいいねボタン
URL to Like:ボタンの設置URLを入力します。記事毎のURLを取得したい場合は<%topentry_link>を入力しますが…ここで入力するとソースコードを取得出来なくなるのでとりあえず適当なアドレスでも入力しておきます。
Send Button(XFBML Only):下記の様にいいね!ボタンの隣に送るボタンがつきますがチェック外していいです。使いません。と言うかXFBMLを使用しません。
いいねボタン
Layout Style:standardはボタンの右側に~人が「いいね!」と言っています。がつきます。
button_countは数の吹き出しが右に出ます。
box_countは数の吹き出しが上に出ます。
width:Layout Styleがstandardの場合のみ関係あると思いますが、右側の文字部分の幅です。
Show Faces:チェックを入れているとボタンを押した人のアイコンがしたに出るようです。
Verb to display:likeだとボタンの名称が「いいね!」となり、recommendだと「おすすめ」となります。
Color Scheme:lightだとボタンと吹き出しが明るい系、darkだと暗い系になります。
font:必要ありません。
GetCode:ソースを取得します。
いいねソース
ソースにはHTML5とXFBMLとIFRAMEがありますが…IFRAMEを選びましょう。
何故かというとIEで表示出来ませんwと言う事でIFRAMEで解説します。

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftekito-.com&send=false&layout=box_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>
上記のようなソースコードになりますが、赤文字のところがてきとーに入れたURLになります。そこを変更します。
<%topentry_link>を?href=~&sendの間に入れます。

そうすると下記の様になります。
<iframe src="//www.facebook.com/plugins/like.php?href=<%topentry_link>&send=false&layout=box_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>

これを任意の場所に貼り付けて完了です。
見た目的に変わるのはLayout Styleの部分だけですね。




うえからstandard、button_count、box_countと並びます。

いいね!ボタンだけが欲しい場合は、ブログの管理画面で、環境設定 > ブログの設定 > 記事の設定にいいね!ボタンの設定がありますのでそれを有効にして上げればすみます。
ツイッター設定


↓役に立った・面白かったなど思っていただけましたら是非クリックをお願いします。
このエントリーをはてなブックマークに追加
コメント
コメントを書く

管理者にだけ表示を許可する

トラックバック

http://areda.blog9.fc2.com/tb.php/1262-6ecb7c9b

この記事にトラックバックする(FC2ブログユーザーのみ)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。