bloggerにも標準で各種SNSへの共有ボタンは着いているのですが、わかりにくい。こんなやつ↓
しかも、Facebookボタンは「いいね」ではなく共有です。「いいね」はやったぱり青いボタンがいいです。
というわけで、Bloggerの各記事のページに「いいね」ボタンを着ける方法を調べてみました。
1. こちらのページでHTMLに貼付けるコードを生成します。
「Get Code」ボタンを押すと貼付けるコードが表示されます。Facebook SDKを読み込むコードとボタンを設置するコードの２つがあります。
2. bloggerの「テンプレート」から「HTMLの編集」を選ぶ。
3. bodyタグのすぐ下に先ほど取得したコードを貼付けます。
bodyのすぐ下じゃなくてもいい気がするけど、公式ページにはbodyの下と書いてあるので従います。<body expr:class='"loading" + data:blog.mobileClass'> <!-- Facebook SDK ここから --> <b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> </b:if> <!-- ここまで -->
各記事にだけ「いいね」ボタンを表示できればよいので、<b:if > で括っておきます。上記の緑色の部分。
4. 次に「いいね」ボタンを置きたい場所にコードを埋め込みます。
今回は各記事のタイトルの下に入れてみます。私の場合は1500行目付近の <div class='post-header-line-1'/>の下に下記を追加しました。<!-- faceboo button --> <b:if cond='data:blog.pageType == "item"'> <div class='fb-like goog-inline-block' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' data-width='100' expr:data-href='data:post.canonicalUrl'/> </b:if>ここで expr:data-href は記事ごとに変えないといけないので、
expr:data-href='data:post.canonicalUrl'とします。さらに各記事ごとのページだけで表示すればよいので<b:if>で囲ってあります。
これで「いいね」ボタンが表示されるようになりました！
0 件のコメント :
コメントを投稿