Blogに彩りを持たせるレコメンドリンクの設置 - zenback , LinkWithin , Outbrain

   



ブログを書くものとしては、一つ一つのエントリーが自分の創作物であり、愛情を持って育てた子供のようなものです。前回『ソーシャルメディアとSEO効果の関連性とBloggerでの対策』を紹介しました。サーチエンジンから訪問してくれた新規ユーザーの方にも、他のエントリーを見てもらいたいという思いが誰しもあるかと思います。

今回はレコメンドリンクをブログのテンプレートに設置して、他エントリーへのリンクをクリックし易くする5つのブログパーツを紹介します。



まず始めに、Bloggerで新しくブログを作成すると、標準テンプレートがHTML5になったので、XHTMLのままの方はDOCTYPE宣言を変更しておきましょう。
(XHTML)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(HTML5)
<!DOCTYPE html>
実際に変更を行う前に、テンプレートのバックアップを取っておきましょう。では、設置が簡単な順に紹介します。

Blogger標準ウィジェットPopular Posts、Recent Posts


Popular Posts


ガジェットを追加から「人気の投稿」を選択


ページの閲覧数が多い順にリンクを表示してくれます。
サムネイルと記事の抜粋を表示することができるので、内容が分かりやすく期間も選べるため使い勝手がよく、人気の投稿を表示するだけにクリック率も高いです。

ページ下部に設置してCSSで表示を調整しています。

Sample
div#PopularPosts1 p{font-weight:bold;}

div#PopularPosts1 ul {
background-color: #FFFFFF;
border-radius: 5px 5px 5px 5px;
border: 1px solid #DDDDDD;
padding: 0pt 15px;
}

div#PopularPosts1 {
margin-left: -20px;
margin-top: -20px;
width: 768px;
}

div#PopularPosts1.widget div.widget-content ul li div.item-content div.item-snippet {
font-size: 0.95em;
}

Recent Posts

サードパーティ デベロッパーによって提供された Blogger 用のガジェット


「Recent Posts」で検索すると3件ほど出てきますが、Bloggerplugins.orgのものを選択します。


細かな設定が可能で、こちらもサムネイル付きのリンクを作れます。ただ、右サイドバーに設置していましたが、読み込みが重いのと殆どクリックされないことから今は外しています。

zenbackの設置方法


関連記事や関連リンク、ソーシャルボタン、Twitterやはてブの投稿などを表示できるブログパーツ

zenbackであなたのブログに全てのフィードバックを。



こちらから新規登録し、コードを取得します。

設置方法1

投稿テンプレートに取得したコードを予め入れておく。


そのまま記事を書いていけば、zenbackが表示されます。
また本文内にあるため、モバイルテーマをカスタマイズに設定しておけば、スマートフォンから閲覧した際にも表示されるようになります。jQueryで本文内に表示させることも出来ますが割愛します。

設置方法2

BloggerのテンプレートからHTMLの編集>ウィジェットのテンプレートを展開
<data:post.body/>
<div style='clear: both;'/>
こちらの<div style='clear: both;'/>を分割して、中にコードを入れます。
<div style='clear: both;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//ichitaso.blogspot.com/&nsid=92480593027154643%3A%3A99365625050215681&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script>
</b:if>
</div>
関連記事の精度を上げる「zenbackタグ」を追加する。

本文部分を「<!-- zenback_body_begin -->」「<!-- zenback_body_end -->」で囲む
<!-- zenback_body_begin -->
      <data:post.body/>
<!-- zenback_body_end -->

記事タイトル部分を「<!-- zenback_title_begin -->」「<!-- zenback_title_end -->」で囲む
<!-- zenback_title_begin -->
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
<a expr:href='data:post.url'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
</a>
      </h2>
    </b:if>
<!-- zenback_title_end -->
(実際とはタグが異なる場合があります)

記事公開日時を含んだタグ「<!-- zenback_date YYYY-MM-DD -->」をどこかに追加する
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<!-- zenback_date YYYY-MM-DD -->
  <div class='body-fauxcolumns'>
これで完了です。

但し僕の場合、自作SNSボタンのjQueryが競合しているのかIEでは表示できませんでした。
(SNSボタン、zenback両方共表示されなくなる)

そこで、Gistにdocument.writeから始まるscriptタグを除くコードをホストして、 <script type='text/javascript' src='(ホストしたURL)'></script>として回避しています。

zenbackは機能が多い分、動作が重いのが難点です。

LinkWithinを設置する方法


ブログ内の記事をサムネイル付きでランダムに表示するブログパーツ
軽量で、簡単に設置することができます。

LinkWithin - Related Posts with Thumbnails


こちらからコードを取得します。


Email:メールアドレスを入力
BlogLink:ブログのアドレスを入力
Platform:「Other」を選択
Width:表示するページ数を選択(ブログの幅にあわせて設定)
□ My blog has light text on a dark background
ブログの背景が暗い色の場合はここをチェック

「Get Widget!」をクリック!
コードが表示されるので「var linkwithin_site_id =」以降の数字をメモっておく。


zenbackの時と同様に <div style='clear: both;'> を分割して中に以下のCodeを設置
<script type='text/javascript'>
// <![CDATA[
document.write('<sc' + 'ript>' +
'var linkwithin_site_id = (メモしておいた数字を入力);' +
'var linkwithin_text = "(ここに表示させたい文字を入力)";' +
'</sc' + 'ript>' +
'<sc' + 'ript src="http://www.linkwithin.com/widget.js"></sc' + 'ript>');
// ]]>
</script>

サムネイル付きリンクを表示させたい場所に以下のタグを入力
<div class="linkwithin_div"></div>
実際の表示を確認して好みの場所へ設置してみてください。

Outbrainの設置方法


サムネイル付きのリンク、サムネイルなしリンクの作成や、5つ星による記事の評価機能、アクセス解析機能を持つブログパーツで結構高機能です。表示されるものはアクセス数が多いものが優先的に表示される印象。

Outbrain - Related Link Widgets


右上のRegisterをクリックし、アカウント名、Email、パスワードを入力します。


登録後、メールが届くので認証URLをクリック→登録を完了させます。

Manage Blogsをクリックして「Add a Blog」をクリックします。


Install widget? で Yesを選択、Bloggerを選択します。
Blog URL、言語、表示形式を選択、規約のチェックをいれて「Continue」をクリック


Bloggerの「ページ要素を追加」の画面になるので、コンテンツを編集をクリック


scriptコードを全て選択してコピーします。
※そのままウィジェットを追加するとTOP画面の一番上にしか表示されない

コードを分かりやすく改行します。
<script language="JavaScript">
var OB_platformType = 1; 
var OB_langJS = 'http://widgets.outbrain.com/lang_ja.js';
var OBITm = '1323936139351';
var OB_raterMode = 'none';
var OB_recMode = 'strip';
</script>
<script language="JavaScript" src="http://widgets.outbrain.com/OutbrainRater.js"></script> 
<input type="hidden" name="OBKey" value="ZRhLVMUn/ZetdTdQLtaE+g=="/>
<script language="JavaScript">var OBCTm='1323936139351'; </script>
<script language="JavaScript" src="http://widgets.outbrain.com/claim.js"></script>
ここでちょっとコードを変更します。

<script language="JavaScript">var OBCTm='1323936139351'; </script> 以外
「language="JavaScript"」を「type='text/javascript'」にする。
最初のscriptタグ内にコメントアウトの記述を入れる。
<script type='text/javascript'>
<!--
var OB_platformType = 1; 
var OB_langJS = 'http://widgets.outbrain.com/lang_ja.js';
var OBITm = '1323936139351';
var OB_raterMode = 'none';
var OB_recMode = 'strip';
//-->
</script>
<script type='text/javascript' src="http://widgets.outbrain.com/OutbrainRater.js"></script> 
<input type="hidden" name="OBKey" value="ZRhLVMUn/ZetdTdQLtaE+g=="/>
<script language="JavaScript">var OBCTm='1323936139351'; </script>
<script type='text/javascript' src="http://widgets.outbrain.com/claim.js"></script>
これを上記と同様に <div style='clear: both;'> を分割した中に設置します。

また、IE9で表示するとサムネイルに余分なスクロールバーが表示されます。
IE8と認識させることによって回避できるので<head>タグ内に以下の記述を入力します。
<meta http-equiv='X-UA-Compatible' content='IE=8, chrome=1' />

記事数が少ないと最初表示されません。また、インデックスされるのにしばらく掛かります。

表示の変更は「Manage Blogs」の「settings」をクリックすると後でも変えられるので、好みのスタイルに調整してあげて下さい。また「Site Performance」で細かなクリック率も確認することができます。

LinkWithinよりは重たいですが、サムネイル付きリンクをLinkWithin、サムネイルなしリンクをOutbrainといったレコメンドサービスの使い分けもできるのでお好みで利用してみてください。

レコメンドエンジンとSEO効果について


今回は5つのウィジェット・サービスを紹介しましたが、あまりたくさん設置するとページが重くなるのと見栄えのバランスを考慮する必要が出てきます。

jQueryなど得意な方は自作で構築されているblogもあり、後々そういった技術を習得できればと考えています。

また、内部リンクが多くなるとSEO効果が向上することから、上手に使い分けるのが新規ユーザーの方へもブログを書く本人にとっても有効な手段かと思います。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でWillFeelTipsをフォローしよう!


  関連記事

自分のサイトがはてブされた時にiPhoneへプッシュ通知を行う方法

最近では「スマートニュース」などのニュースキュレーションアプリを使って情報収集す ...

LINEで気に入ったページを教えたい!Bloggerで簡単に共有できるボタンを設置する方法とブックマークレット

通話やメッセージを無料で利用できることから、利用者数が急速に拡大しているLINE ...

Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする

Google Bloggerでモバイルテンプレートを有効にすると、閲覧しやすいよ ...

WordPressなどのブログで自分のサイトがはてブされた時に通知される設定方法

はてなブックマークは、自分のためにブックマークしておくだけではなく、コメント(ブ ...

自分の指定した任意の場所でJavascriptを実行させる Tips

前回の記事『Blogger カスタマイズ Tipsまとめ』では、Bloggerの ...

 - Blogger, SEO