[javascript]手軽にブログの関連記事を表示できるLinkWithin

ブログの関連記事を自動で取得してサムネイルとタイトル付きで表示してくれる LinkWithin。

LinkWithinのサイトでメールアドレスやブログURLなどを登録するだけでjavascriptのタグ（ソースコード）が発行されますので、それを自分のブログの関連記事を表示したい場所に貼付けるだけで動きます。

CSSやHTMLの知識がなくても「画像 + タイトル」の形で良い感じに関連記事を表示してくれますので、ブログを運営する上で是非使いたいサービスの1つです。

LinkWithin のサイトにアクセス

以下のページにアクセスし、メールアドレス、ブログのURLなどを入力します。
http://www.linkwithin.com/learn

Platform は何を選ぶか？

ここは運用しているブログの種類を選びます。
Bloger や WordPress などの選択肢がありますが、Othersが汎用性が高くて良いと思います。

Width は何を選ぶか？

「Width」では、ブログに表示する関連記事数を「3」「4」「5」の中から選択します。

「テキスト中心で画像は貼らない、というブログであれば最大の5件」。
「コンテンツ部分の幅が狭いから3件」

など、ブログのデザインやコンテンツの幅などに左右されるので何とも言えませんが、CSSを駆使すれば「5件出している関連記事を3件に表示制御する（2件はdisplay:none で消す）」なんてことも可能です。

タグを発行する

必要事項を入力したら「Get Widget!」ボタンをクリックしてタグを発行します。

あとはこのタグを、ブログの関連記事を表示させたい場所に貼付けるだけです。

Platform や Width の設定を変更したい場合

LinkWithinは一回登録すると設定変更ができません。

設定を間違ったり、設定内容を変更したい場合はメールアドレスを変えて再登録し、新しいタグを発行します。

Invalid blog URL のエラーが出る場合

メールアドレスは重複登録していないし、ブログのURLも合っているけど、なぜか「Invalid blog URL」のエラーが出て登録ができない…

そんな時はベーシック認証（.htaccess）が悪さをしている場合がありますので、ベーシック認証を一回外して再登録してみましょう。

オリジナルのタイトル表記に変更する

発行されたタグ（ソースコード）内で、linkwithin_site_id の下にlinkwithin_text=を追加することで、オリジナルのタイトルに変更することができます。

CSSでデザインを補正する

発行されたタグ（ソースコード）に、<div class=”linkwithin_div”></div>を追記することで、CSSのpadding: などによるデザイン補正が可能になります。

といっても、出来る事には限度がありますが…。