スポンサーサイト

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

Facebook『いいね!』ボタンの作成と設置(FC2ブログ)

Facebookの「いいね!ボタンの作成方法と設置方法(FC2ブログ)、及び注意点について記しておきます。
最近は、殆どのブログで標準機能として「いいね!」ボタンが設置出来る様になっていますが、設置場所とアイコンのタイプは決められています。
設置場所やアイコンのタイプを選ぶなら、御自身で一からアイコンを作り設置してみましょう。


「いいね!」ボタンの作成


type.gif 「いいね!」ボタンには幾つかの種類がありますが、各種SNSボタンを横並びに設置する事を前提とし、よく使われているタイプ2のbutton_count で説明します。




Facebookの《 Like Button 》ページへ行きます。

Like Button - Facebook開発者

ボタン作成画面は英語表記となっていますが、作り方は非常に簡単で、詳しい解説は《 Facebook Guide 》をご覧下さい。
ここでは、ボタン作成時の注意点を記しておきます。

  • URL to Like :ここにURLを入れるのですが、トップページのURLを入れるとトップページから「いいね!」ボタンを押した場合、個別記事のURLやタイトルが抽出されないので、後で書き換える必要があります。更に、ここでブログ等の個別記事用の変数を入力しても、エンコードされてしまいますので注意が必要です。ブログに設置する場合、どっちにしても書き換えが必要ですので、取り敢えずトップページのURLを入力しておきましょう。
  • Send Button :Facebook上の特定の友人に情報提供する為のボタンです。設置はお好みですが、私はサイズ調整の為省きました。
  • Layout Style :上記の様に、タイプ2のbutton_countを選択。
  • Width :Send Buttonを省き、タイプ2のボタンを選択した場合、概ね100~130くらいで良いと思います。(お恥ずかしながら、私の様にそれほど「いいね!」されない場合は97まで縮められると思います)。
  • Show Face :これはタイプ1のみの使用ですので、それ以外を選択すれば有効とはなりません(念のため、外しておきましょう)。
  • Verb to display :ボタンの表示を「いいね!」か「おすすめ」か選択出来ます。
  • Color Scheme :色の選択です。
  • Font :フォントの種類ですが、日本語のフォントはありません。

「Get Code」をクリックすると張り付けコードが取得できます。
今回は、設置が楽な「iflame」形式とします。
赤字の部分にトップページのURLを入力しましたが、URLがエンコードされています(コピペしないで下さい)。

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fresistance6.blog7.fc2.com%2F&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:21px;" allowTransparency="true"></iframe>


このままでは、トップページからの「いいね!」では個別記事が反映されないので、赤字の部分のみ書き換えます。
下記は、FC2ブログをお使いの方はコピペで使えます。

<iframe src="//www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>


<%topentry_enc_link>
は、FC2ブログ専用の個別記事のエンコードURLを抽出する変数です。
今回は、ボタンの横幅を120pxで作成しました。
いいね!ボタンは、通常は右側に何も無いのですが、「いいね!」されるとボタンの横に吹き出しが出現し、回数が表示されます。
その為、ボタンの大きさは若干余裕を持たせる必要があるのですが、レイアウト的になるべく間隔を空けたくないので、御自身の「いいね!」の回数に応じてサイズ調整して下さい。
2個所のwidthの横の数字で調整出来ます(私の様に、回数が一桁くらいの方は97でも良いでしょう)。


「いいね!」ボタンの設置


既にいいね!ボタンが自動挿入されている方は、機能をオフにします。
機能オフは、FC2ブログの管理画面の【環境設定】の【環境設定の変更】から行います。
画面上部の【ブログの設定】にカーソルを合わせ、記事の設定をクリックし、【Facebook】のところの「有効にする」のチェックを外して下さい。
続いてFC2ブログ管理画面の【環境設定】から、【テンプレートの設定】のHTMLソース内の<!--topentry--> ~ <!--/topentry--> 間の、任意の場所に貼付ければ完了です。
記事ごとに自動でツイートボタンが挿入され、各記事ごとの情報も反映されます。
<div class="sns_button"> ~ </div>など、適当な名前を付けておけば、cssにて位置調整が可能です。

これで「ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置する方法」「ツイートボタン(Twitter公式)をブログに設置する方法」と、3種類のボタンについて書きましたが、次はそれらを横並びに設置する方法を記事にします。

記事下にある様な設置方法です。



>>続きを読む

スポンサーサイト

PR Link



☆動画MYページはこちら

バイオハザード オペレーション・ラクーンシティ バナー(120×60)









Link

このブログをリンクに追加する



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