2018年7月21日土曜日

Bloggerの各記事にFacebookいいね(Like)ボタンを設置

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-show-faces='true' data-size='small' expr:data-href='data:post.url.canonical'/>
ただし、2018年時点のコードのため、以後の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の修正コードを貼り付けます。
最後に「テーマを保存」→「戻る」をクリックします。ブログを表示して、いいね!ボタンがついていることを確認しましょう。(モバイル画面では、いいね!ボタンが現れません。)

参考

0 件のコメント:

コメントを投稿