2014-10-10

Bloggerでフェイスブックいいね・シェアボタンを設置する方法


先日このESS GLOG(エスブロ)の投稿記事の下にフェイスブックの「いいねボタン」「シェアボタン」「コメント欄」を追加しました。

その際、html初心者なこともあってかなり苦戦したので、同じように悩む人のために方法を記録しておきます。使用するブログはBloggerです。

※わたしの場合の方法であり、必ずしも誰でもこの方法で上手くいくとは限りません。
※2014年10月現在であり、仕様が変更になる場合があります。



まずはFacebookで登録とコード取得。

1.Facebook Developersのページを開く。
https://developers.facebook.com/










2.上部「Apps」→「Add a New App」→「ウェブサイト」

3.右上「Skip and Create App ID」

4.ブログのタイトルを入力→カテゴリを選択→「Create App ID」















5.上部「Docs」→左「Sharing」→「ソーシャルプラグイン」

6.「いいね」設置なら「Like Button(Web)」

7.ブログURLを入力→「Layout」でレイアウト選択














8.シェアボタンも同時に設置するなら「Incude Share Button」にチェック

9.「Get Code」クリック


ここからBlogger使います。

10.Bloggerに入って「テンプレート」→「HTMLの編集」

11.Facebookの画面中央、一番長いコードをコピー





















12.11をBloggerのhtmlコードの中、<body …>の下にペースト
(上の方。見つからなかったらhtml画面で「command+F」で検索)
 この時、「&」という表記はエラーではじかれる可能性があるので、「&amp;」に変更。



13.次にFacebookの画面下のコードをコピー





















14.Bloggerのコード画面で「data:post.body」を検索。いくつか見つかるので、上から2番目の「data:post.body」の下に13をペースト
(ペースト場所は表示したい位置やブログによって変わります)

15.「テンプレートを保存」で完了。


0 件のコメント:

コメントを投稿