Bloggerの各記事にFacebookいいね！ボタンを設置

Bloggerで各記事にリンクするようにFacebookいいね！(Like)ボタンを設置するには、HTMLの編集が必要です。この作業を始める前に、Bloggerの管理画面の「テーマ」→「バックアップ/復元」→「テーマをダウンロード」でテンプレートをバックアップしておくことをお薦めします。

Facebookいいね！(Like)ボタンのページにアクセスします。「いいね！」するURLに、いいね！ボタンをつけたいブログのURLを入れます。シェアボタンが要らなければ、「シェアボタンを追加」の✔（チェック）を外します。その他の項目は必要に応じて設定し、「コードを取得」をクリックします。

アプリIDを設定していれば、適切なアプリIDに切り替えます。Step2のコードをコピーします。（Step3が終わるまで画面を開いたままに！）

ブラウザの新しいタブ（または新しいウィンドウ）でBloggerの管理画面にアクセスして、「レイアウト」を開きます。できるだけ上側にある「＋ガジェットを追加」をクリックします。

HTML/JavaScriptの「＋」ボタンをクリックします。

タイトルは空欄のまま、コンテンツに先ほどのStep2のタグを貼り付けて、「保存」します。

「配置を保存」をクリックします。

再びFacebookいいね！(Like)ボタンのページにアクセスします。Step3のコードをコピーします。

メモ帳などのテキストエディタを開いて、コードを貼り付けて、Blogger用に修正します。

1. すべてのダブルクォーテーションマークをシングルクォーテーションマークに置換
2. data-href="https://ブログのURL/"を expr:data-href='data:post.url.canonical'に修正

修正したコードをコピーします。上記の修正が難しければ、以下のコードをお使いください。

<div class='fb-like' data-action='like' data-layout='standard' data-share='false' data-size='small' expr:data-href='data:post.url.canonical'/>
ただし、2020年時点のコードのため、以後のFacebookの仕様変更で使えなくなる可能性があることはご了承ください。

Bloggerの管理画面に戻ります。「テーマ」→「HTMLの編集」をクリックします。

HTML欄をクリックして、CTRL+FキーでSearchを出し、post-footerを検索します。<div class='post-footer'>の直後で改行して、Step3の修正コードを貼り付けます。

<div class='post-footer'>がもう1箇所あります。再びpost-footerを検索して、もう1つの<div class='post-footer'>の直後で改行して、Step3の修正コードを貼り付けます。

最後に「テーマを保存」→「戻る」をクリックします。ブログを表示して、いいね！ボタンがついていることを確認しましょう。（モバイル画面では、いいね！ボタンが現れません。）

参考

• Bloggerのアクセス対策(SEO)