【Google Blogger】ブログの個別記事下に関連記事を表示するウィジェット「Linkwithin」

個別の記事下に関連記事を表示しているブログをよく見かけますね。個別記事を読みに来た方が他の記事もついでに読んでいただけるといいなと思い、関連記事を表示するウィジェット「Linkwithin」を設置することにしました。「Linkwithin」設置について書かれている他の方のブログを読ませていただき、あまり関連していない記事も表示されてしまうといったコメントも多々見かけました。多少違っていても、過去のブログをランダムに表示して読者の方が他の記事を目にする機会が多くなるだけでも設置する価値はありますよね。また、見た目もシンプルなのでそこも気に入りました。ブログのフィードを自動取得して、ランダムにサムネイル付で数件表示して、無料でユーザ登録もない、おまけに広告も無いということですしね。

ブログの記事下に「関連記事」ウィジェットを表示

1. まずは「Linkwithin」サイトへ





2. 設置したいブログ情報を入力
Linkwithinサイトのトップページ右下に設置するブログ情報を設定するフォームがあります。必要情報を入力して「Get Widget!」をクリックします。
Email:メールアドレスは何でもいいみたいです。取りあえず自分のブログに登録してあるアドレスを入力。
Blog Link:設置したいブログのアドレスを入力。
Platform:プラットフォームは「Blogger」を選択（他にWordPress、TypePad、Otherがあります）。
Width:表示する記事の数を選びます。3件、4件、5件の三択です。





3. 「Install Widget」をクリック
「Install Widget on Blogger」の画面が表示されます。手順１の「Install Widget」リンクボタンをクリックします。





4. 「 ウィジェットを追加」ボタンをクリック
Bloggerの「ページ要素を追加」画面が表示されたら、青い「ウィジェットを追加」ボタンをクリックします。





5. ブログページを表示して確認
Bloggerの「レイアウト」画面が表示されます。「LinkWithin」のガジェットが追加されているのが確認できます。設置したい位置にガジェットを移動させます。上記では投稿ブログ記事下に配置しました。Linkwithinの「編集」ボタンをクリックしてスクリプトを表示させます。




このままプレビューで表示させるとタイトルが「You might also like:」と表示されるので、下記スクリプトの赤字部分を追加することで任意のタイトルを付けることができます。タイトル部分の「関連記事」は好きな文字を入れてください。



<script>
var linkwithin_site_id = xxxxxxx（ID）;
var linkwithin_text = "関連記事";</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/">
<img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" />
</a>

これで記事下に関連記事が表示されます。ただ、このままだとブログのトップページの全ての記事下に関連記事ウィジェットが表示されてしまいます。トップページがすごく重くなってしまうので、トップページには表示しないようにして、個別記事のページにのみ表示するようにする場合は以下のようにします。

ログの個別記事にのみ「関連記事」ウィジェットを表示

1. 設置したいブログ情報を入力
上記と同様にLinkwithinのサイトにアクセスし、設置したいブログ情報を入力します。ただし、「Platform」選択欄で先ほどは「Blogger」をチョイスしましたが、今回は「Other」を選択します。





2. スクリプトをカスタマイズ
「Install Widget on Other Platforms」のスクリプトが表示されます。




このスクリプトを下記のように変更します。追加･変更点は赤字部分です。



<!--  linkwithin code 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<script>
var linkwithin_site_id = xxxxxxx;
var linkwithin_text = "関連記事（好きなタイトル）";
</script>
<script src='http://www.linkwithin.com/widget.js'/>
<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>
</b:if>
</b:if>
<!--  linkwithin code 終了 -->

上記コードをコピーして、Bloggerの「テンプレート」「HTMLの編集」を開き、HTMLエディタの中の</body>が記述されている箇所を探して、</body>の前の行に挿入します。挿入したら「テンプレートを保存」をクリックして設定終了です。これで個別の記事ページにのみ関連記事ウィジェットが表示されるようになりました。

News Source Site

• Bloggerへの道 「関連記事を表示するLinkwithin」　－ Friend Of Mine
• 関連記事を表示するLinkwithinを記事下に自動挿入する方法　－ やさしいブログの作り方
• 関連記事を表示させるブログパーツ「LinkWithin」　－ マネテク！