Bloggerへの道 「関連記事を表示するLinkwithin」

1. 設置方法
2. You might also like （関連記事） 部分の文字変更
3. 個別記事にのみ表示させる方法

Linkwithinとは関連記事を表示するウィジェットです。ブログのフィードを自動取得して、ランダムにサムネイル付で数件表示してくれます。

投稿した記事内容に関連した過去の投稿を表示してくれるらしいのですが・・・使ってみての感想としては、余り関連してないかなあと（笑）まあこれは、それが魅力なのではなく、過去の情報を引っ張り出して表示してくれる所が魅力なんです。そして無料で、登録もなし。変な広告もないですし。

こちらからは設置するだけで、せっせと結構効率的に宣伝活動をしてくれるわけです。しかもウィジェットデザインがシンプル故に、ブログそのもののデザインとの相性も良いですし、言うことなし。バンドのオフィシャルページに利用するには余り向いてないウィジェットですが、音楽情報系ブログや、レビュー系のブログをやってる方はかなりオススメですよ！

それでは設置方法へ。

設置方法

1. "Linkwithin"のサイトにアクセス。

2. 記入事項を入力。

Email: メールアドレスを入力。かといってそこに何かしらメールが届くわけでもないみたいです。
Blog Link: 自分が設置するブログのリンクを添付。
Platform: Blogger、WordPress、TypePad、Other（その他のブログ）から選びます。
Width: 記事をいくつ表示するか。3～5件から選びます。
My blog has light text on a dark background: ブログ背景が黒い場合はここにチェックを入れると、文字色が白になります。

3. Install Widget on Blogger

こんな画面になるので、"1. Click Install Widget to open Blogger in a new window, ～"の部分のInstall Widgetをクリック。

そして画面になるので、ウィジェットを追加をクリック。するとレイアウト画面になります。

既にLinkWithinのガジェットが追加されているので、投稿させたい位置に移動させます。一般的なのはブログの投稿の下に配置する方法でしょうか。


こんな感じに投稿記事下に表示されます。

You might also like （関連記事） 部分の文字変更

デフォルトだと英語で"You might also like"となっている部分。ここを日本語等、特定の文に置き換えることが可能です。
先程設定した、[レイアウト]画面にいき、[LinkWithin]のガジェットの[編集]をクリック。すると下記のようなコードが出てくるので、赤部分のコードを新たに追加します。

<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>

""内に入力された文章が"You might also like"と入れ替わって表示されます。「関連記事」「他にもこんな記事ありますよ」等など、自分のブログのテーマにあった文章にする事をオススメします。
英語だと、「怪しいサイトへのリンクかも？」と思ってしまう方もいるかもしれません。自分のブログのテーマに合った文章にすることにより、ここのブログの記事へのリンクですよ～とわからせてくれる効果を期待し、変えるのもありだと思います。

個別記事にのみ表示させる方法

追記の区切り等を使って、ブログのトップページを軽くする…あるいはスッキリした見た目にしている方も居ると思います。
そういう場合、全ての投稿記事に自動で表示されるLinkwithinは、複数記事が同時に表示されるトップページでも、記事の数だけ表示されます。デザイン的にも乱雑な感じを受けてしまう人も居ますし、表示スピードも落ちてしまいます。Javascriptの処理する能力に関わるので、スペックやブラウザによってはかなり重く感じる人も？

ちょっと手間ですが、直接HTMLを弄って設置すれば、個別記事にのみLinkwithinを表示させる事が可能です。記事をクリックして、個別記事を見た時にのみ表示されるので、Linkwithinが起動する数も1つ…表示スピードにも影響ありません。それにトップページはすっきりすることもあると思います。

1. Linkwithinにアクセスする。

2. 記入事項を入力する。（この時、"Platform"は"Other"にします。）

するとLinkwithinのコードが表示され、</body>タグ以前の好きな位置に貼り付けて下さいという画面に。

3. コードを編集

しかし、このまま貼り付けてしまうと、さっきと何も変わらないので、<b:if>タグを使って、表示する条件を設定します。設定するのは、記事ページのみ表示させるということ。ついでに携帯でも表示させないようにも設定しました。

<!--  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(指定された自分のID);
          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 終了 -->

このコードを、[テンプレート][HTMLの編集]でHTMLエディタを開き、</body>の直前に挿入します。
</body>は大体一番下の方までスクロールすると見つかりますよ。一番下の</HTML>の直前に</body>があると思います。その前に上記コードを挿入します。

（指定された自分のID）の部分にはLinkwithinから与えられたIDを入力して下さい。

挿入後、[テンプレートを保存]をクリック。これで完了。

トップページには表示されずに、記事ページにのみ表示されていることを確認してみて下さい。

参考記事

• PCあれこれ探索: Google Blogger 関連記事を画像付で簡単に Linkwithin

• クリボウの Blogger Tips: モバイルテンプレートもカスタマイズ可能に