概要：ソーシャルブックマークボタンをブログに設置－Facebook編－
前回（Twitter編）に引き続き今回はFacebookボタン（いいね！）をブログ（Blogger）に設置する方法と手順についてご紹介します。Twitterに比べて作業量が多いのですが、今回の記事通りに進めて頂ければ問題なくできますのでご安心下さい(^-^)
手順：Facebookのいいね！ボタンを設置
今回もBloggerを使って設置手順をご紹介します。１．ボタンの作成
下記のページにてボタンの作成を行います。⇒ Facebook開発者のページ
ここは英語のページになっているので若干分かりにくいです。
ただ、これをとても詳しく紹介しているブログがあるのでご参考にして下さい。
⇒ Facebookのいいねボタン（Like Button）を設置する方法。【MT＆WordPress対応】
ボタン作成ページにて各項目を選択・入力していきますが、下記の画像のようなボタンを作ることを目指します（私が作成したボタンです）。
【入力項目】
URL to Like：いいねボタンを作りたいURL（自分のWebサイトのURLを入力）
Send Button：チェックを外す
Layout Style：box_countを選択
以上です。その他の項目についてはデフォルトのままにしました。
最後に「Get Code」をクリック。
画面が遷移してHTMLソースが表示されます。
「１（上）」と「２（下）」の２つのソースが表示されますが、ともにコピーしておきましょう。
２．Bloggerにボタンを設置
①「１」のソースを設定
まずは「１」を設定します。Bloggerにログイン後、[テンプレート] → [HTMLの編集] → [続行] → [ウィジェットのテンプレートを展開]にチェックし、HTMLの編集画面に進みます。
※ソースを変更する場合何らかのミスでテンプレートが崩れる場合があります。作業前にHTMLソースをTerapadやメモ帳にコピーしてバックアップしておきましょう。
ソースの中からbody部である
<body expr:class='"loading" + data:blog.mobileClass'>
を見つけます。
そしてこの直下に「１」のソースを貼り付けて保存します。
②「２」のソースを設定
Bloggerにログイン後、[レイアウト] → [HTML/JavaScript]でソース入力画面に進みます。そのまま「２」のソースをコピーして保存します。
以上で終了です。次回ははてなブックマーク編です。
スポンサードリンク
0 件のコメント:
コメントを投稿