タグ:fc2ブログパーツブログlinkwithin関連記事サムネイル画像表示設置方法

超簡単・広告無し!関連記事サムネイル表示LinkWithinのfc2設置方法

banner3.png
ページの関連記事を画像サムネイル表示してくれるビジュアルに優れたブログパーツです。
この記事ではfc2を対象にその設置方法を解説しています。

fc2ブログパーツブログlinkwithin関連記事サムネイル画像表示設置方法



ブログのPV数アップに役立つ便利ツールです

以下の手順で設置を進めます。
コード入手ページ:http://www.linkwithin.com/learn
LinkWithin.jpg
PlatformにはOtherを選択します。
ここでe-mailとサイトURLとサムネイル関連記事表示数を入力するとコードが手に入ります。

Get Widgetをクリックするとコードが表示され、以下の英文が表示されます。
Paste the following code snippet before the tag (not below each story) in your blog template:
この意味は、/bodyタグの直前にコードを貼り付けるの意味ですが、fc2ブログの場合それをやってしまうとトップページやカテゴリページにまでlinkwithinが表示されてしまいます。
よって貼り付けたい位置、すなわちtopentry変数の内部にコードを貼り付けましょう。

HTML設置例

<a name="more" id="more"></a>
<div class="entry_body"><%topentry_more></div>
<!--/more-->
<!-- 続きを読む END -->
<!--permanent_area-->
<!-- エントリfooter -->
<div class="entry_state4">
<script>
var linkwithin_site_id = XXXXXX;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<script>linkwithin_text='Related posts:'</script>

私はtopentry変数かつpermanent変数内部に埋めました。
良く分からないって人はとりあえず/moreの直前に貼り付ければ記事最下部にlinkwithinが表示されるようになります。

カスタマイズ

表示させたい位置をカスタマイズ
<div class="linkwithin_div"></div>

タイトル部分の表示内容変更
<script>linkwithin_text='Your custom text:'</script>
Your custom text部分に自由に文字を入力すると、linkwithin上部に表示される文字をカスタマイズできます。

タイトル部分のCSS変更
.linkwithin_text{color:#333;}
このクラスで自由にフォントサイズや色を変更できます。

*アプリ価格・仕様は記事作成時(2010/06/24)のものです。最新情報はiTunesストアにてご確認下さい。

カテゴリ:ブログ、カスタマイズ

タグ:fc2ブログパーツブログlinkwithin関連記事サムネイル画像表示設置方法

関連記事:
SHARE:
  • このエントリーをはてなブックマークに追加
  • LINEで送る
COMMENT:

コメントはお気軽に!あなたのアプリレビュー、相談、プチ情報、なんでもOK

 






非公開コメント

凄いです

いろいろ、探しましたが。
こんなに簡単!!
ありがとうございました。
お礼は定期的に訪問して広告ポチポチです!!

どんぐり | 2015/09/06 11:51 | ≫ EDIT

はじめまして。
僕は初心者なのですが、海外のファッションブログでこれをみかけて、
以前からいいなあと思ってましたが、ずうっと出来ず終いでした。
リンゴノコト。さんのおかげでやっと出来ました☆
本当にありがとうございます(*^_^*)!

Vairocana Van AΘ | 2012/06/23 17:30 |

FC2でも関連表示に田尾言うし始めてるんですけど、画像を用いた関連表示がしたかったのでこちらに情報集趣旨に来ました。

やっぱりoutbrainですかね。
表示が重くなるような気がしてるんですけど。


う~ん。

あれはんどろ | 2010/09/09 22:12 |

ブログパーツ