関連記事を画像付きで記事下に表示するブログパーツ(linkwithin)

★　関連記事を画像付きで記事下に表示するブログパーツ(linkwithin)



●　内容と設置方法

①　下記サイトで関連記事を画像付きで記事下に表示するブログパーツを設置できます。

http://www.linkwithin.com/

②　下記の様に登録を行います。
　　　Email は、ヤフーのフリーメールアドレスなどで可能です。
　　　Blog Linkは自分のブログのURLを入れます。
　　　Platformは、Otherを選択します。
　　　Widthは、表示したい件数を選択します。　３～５を選択できます。

　　　全て入力したら、Get Widget! をクリックします。






③　Get Widget!　をクリックすると下記ページが表示されますので。
　　内容をコピーします。

　　linkwithin_site_id = 数字　の数字部分がサイトIDです。
　　数字は、②で登録したブログのURLによって異なります。






下記の様な内容です。★の部分は、登録したブログのサイトID（数字）です。

<script>
var linkwithin_site_id = ★;
</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>

④　コピーした内容をフリープラグインに追加すればOKです。
　　●　但し、新スキンの場合は、ブログのページの最初の記事にしか
　　表示されないので注意してください。
　　ページ内のすべての記事に表示したい場合は、この記事の下で紹介します。

　　旧スキンの場合は、問題なく全ての記事に表示されます。
　　旧スキンの場合の問題点に関しては下記を参照。
　　http://ameblo.jp/new-blue-777/entry-11482700630.html




●　新スキンでページ内の記事の全てに　linkwithin　を載せたい場合。

①　条件

下記カラムでなければ、うまく　linkwithin　を表示できません。

■　３カラム・右ワイドメニュー


■　３カラム・左ワイドメニュー
但し、フリープラグインは、左サイドバーに設置すること。


■　３カラム・右メニュー







HTML上、フリープラグインが記事の前にあるのが原因です。
色々とテストしてみましたが、タイミング的にうまく、行かないようです。
下記が一番、安定しているようです。


②　上記③でコピーした物を下記の様に変えます。
　　（★の部分は、登録したブログのサイトID（数字）です）

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<div class="linkwithin_div"></div>
<script>
$(function() {
$(".linkwithin_div").insertAfter(".articleText");
});
</script>
<script>
var linkwithin_site_id = ★;
</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>

■　説明

　・　下記はフリープラグインの最初に１つあれば不要です。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>


・　追加する部分は、下記部分です。

<div class="linkwithin_div"></div>
<script>
$(function() {
$(".linkwithin_div").insertAfter(".articleText");
});
</script>