Facebookの「埋め込み投稿」と関連記事を表示する「LinkWithin」の導入

個々の投稿へFacebookの「埋め込み投稿」と「LinkWithin」を（数日分遡って）設置しました。埋め込み投稿は、Facebookへの投稿をブログに貼付け、そこから「いいね！」やら「シェア」やらをできるようにします。またLinkWithinは、自動で関連投稿を紹介してくれるというブログパーツです。

上がFacebookの埋め込み投稿、下の「こちらの記事も読まれています」と書いてあるのがLinkWithinです。

▼ Facebookの「埋め込み投稿」

少し前にFacebookページを一応作ったみたのですが、ブログの投稿をそのまま載せるだけでほとんど活用できていたなかったので、埋め込み投稿を試しに付けてみました。というか、そもそもFacebookページがほぼ人の目に触れていないような状況だったので、少し露出してみました。

Facebookで投稿した右上のプルダウンメニューから、「外部に埋め込む」を選択し、表示されたコードをHTML編集で各投稿へ貼付けます。ブログに載せるにあたっては、投稿を公開→Facebookでシェア→コードを取得して貼付け、という手順で設置しているため、投稿後しばらく経ってから出現します。

▼ 「LinkWithin」

LinkWithinについては、時々手動で付けていた関連投稿を自動で、しかもサムネイル付きで生成してくれるのでとても便利です（本当に関連しているのかどうかよくわからない投稿もありますが）。

コードは「http://www.linkwithin.com/learn」から入手できます。どのブログサービスで使用するのかというプラットフォームの選択欄にBloggerがあるのですが、Bloggerを選択するとウィジェットとして追加され、先日から始めた「もっと読む »」を無視してトップページに表示されてしまうので、もしそれを避けて「もっと読む »」を開いた後に表示させたい場合にはOtherを選択して取得したコードをHTML編集で各投稿へ貼付けてください（※追記しました 2013-10-3、さらに追記しました 2013-10-4）。その際、「<div class="linkwithin_div"></div>」というコードを入れると好きな位置へ表示させることができます。

・追記（2013-10-3）
いろいろ試してみたところ、各投稿にわざわざコードを貼らなくても内への表示ができました。

プラットフォームでBloggerを選択し、「Install Widget」からBlogger内の「ページ要素を追加」へ移動し「テンプレートを編集」します。そこで、以下の赤太字のコードを追記してウィジェットと追加すれば、関連投稿がトップページには表示されず、各投稿内に表示されるようになります。

<b:includable id='main'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:content/>
  </b:if>
</b:includable>

※この方法ですと、そのままではモバイルテンプレートで表示されませんので、表示させたい場合には「モバイルテンプレートもカスタマイズ可能に | クリボウの Blogger Tips」などを参考にモバイルテンプレートにウィジェットが表示されるようにください。


・追記（2013-10-3）
ウィジェットとして追加した場合、妙なスペースが入ってしまうようなので、それがいやな場合にはテンプレートのHTML内に直接コードを追加することもできます。追加する位置は「<b:if cond='data:blog.pageType == &quot;item&quot;'>ここ</b:if>」内になります。おそらく2つあるので1つ目の方です。

また、最初の状態だと「おすすめ記事:」の部分が「You might also like:」になっているのですが、「var linkwithin_site_id = それぞれのID;」の次の行に「linkwithin_text = "おすすめ記事:"」みたいに1行追加すると自由に文字を変更できます。ちなみにHTMLタグの使えるので、文字の代わりに画像とかにもできます。他にもやろうと思えばいろいろできるみたいです。

▼ まとめ

ということで、連日のブログ改造でした。

20日の未明に発生した震度5強の地震では、離れになっているトイレの外壁が剥がれました。びっくり。1枚目の写真は、シイタケを干しているところです。


・追記（2013-10-23）
埋め込み投稿の各投稿への貼付けをやめました。


中村 彰宏