Blogger単独で関連記事を表示する方法

[更新情報]
[Blogger] Milliard関連ページプラグインへ切り替え
下記ライブラリから上記記事のプラグインへ変更しました。

Bloggerで関連記事を表示させたくて検索しながら探し回っていました。

Smarter Related Posts Widget for Google Blogger - v2.0
Zenback
LinkWithin

検索すると上記はほぼ出てくる有名所でしょう。これを元に挑戦してみましたが挫折しました…。
何度やっても何故か関連記事の部分が空白で表示されないし、使い物にならなかった。
※ブログやテンプレートによりけりだと思うので、あくまで私の場合です。

そこで、他のサービスに依存しない単独で動作するものを探しました。
なかなかなかったんですが、jQueryライブラリと独自ライブラリを使った方法で実装しました。

●参照先 Blogger単独で関連記事を表示する方法 - Saskwave

デフォルトで用意されている表示形式(tile/vertical/horizon/none)から選ぶことができます。

◆表示形式

・tile
2列のタイル状に表示。場所を取るがサムネイルが大きく目立たせることができる。
・vertical
垂直で小さめのサムネイル表示。表示形式では一番場所を取らない。当ブログはこのタイプ。
・horizon
水平で縦並びの本文表示あり。ただ関連記事数が多ければ場所を取る。
・none
関連記事の非表示。表示するのであれば使わない形式。

◆ライブラリのダウンロード or CDN

jQueryライブラリと参照先の独自のライブラリをダウンロードもしくはCDNする必要があります。
独自ライブラリsaskwave.min.js」「saskwave.related-posts.min.jsはCDNでもリンク切れ対策でダウンロードすることをお勧めします。
ここでは、ダウンロードせずにCDNでのやり方でいきます。

◆HTMLとCSSコードの追加

まずHTMLの方からライブラリへの参照コード。
<head>~</head>内にコードを追加します。<head>のすぐ下辺り。

<!-- jQueryライブラリの読み込み -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<!-- 関連記事の独自ライブラリの読み込み -->
<script src='http://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/saskwave.min.js' type='text/javascript'/>
<script src='http://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/saskwave.related-posts.min.js' type='text/javascript'/>
 
<!-- saskwave.jsで利用しているGoogle Feed API -->
<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
  google.load('feeds', '1');
</script>

コメント部分は後で見直したりする時に分かりやすいように書いてるだけなので削除してOK。
4、5行目の独自ライブラリは、ダウンロードしてやるのであればそのjsファイルのリンクに書き換えます。
CDNであれば何も変更せずこのままコピペしてコードを追加。
参照先ではjQueryライブラリが1.8でしたが、1.9.1でも動いているので書き換えました。
jQueryライブラリをすでに使っている方は1、2行目は書かなくて大丈夫です。

CSSは参照先では</head>のすぐ上でしたがテンプレートのCSS部分でもいけます。
私はコードが長いので共通コードと「vertical」タイプのコードの箇所だけ追加しました。
共通コードは「COMMON」と最後の「@media」の部分です。

/* ----- COMMON ----- */
    #RelatedPosts .widget-content {
      margin: 30px 0 0;
    }
    #RelatedPosts .widget-content h2 {
      margin: 16px 0 15px;
      padding: 3px;
      border: 2px solid rgb(204, 0, 34);
      box-shadow: 0 1px 0 0 rgb(255, 255, 255);
      font-size: 20px;
      text-indent: 0.3em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
      color: rgb(204, 0, 34);
    }
    #RelatedPosts .widget-content a:hover,
    #RelatedPosts .widget-content img:hover,
    #RelatedPosts .widget-content div.thumb:hover {
      opacity: 0.7;
      filter: alpha(opacity=70);
    }
     
    /* ----- TILE ----- */
    #RelatedPosts ul.tile {
      list-style: none;
      width: 700px; /* (320 * 2) + (10 * 4) + 20 = 700px */
      margin: 0 auto;
    }
    #RelatedPosts ul.tile li {
      display: inline;
      float: left;
      width: 320px;
      margin: 10px;
      padding: 0;
      border: 1px solid rgb(195, 195, 195);
    }
    #RelatedPosts ul.tile .item-content {
      margin: 0;
      padding: 0;
    }
    #RelatedPosts ul.tile .item-thumbnail {
      margin: 0;
      padding: 0;
    }
    #RelatedPosts ul.tile .item-thumbnail div.thumb {
      margin: 0;
      padding: 0;
    }
    #RelatedPosts ul.tile .item-date {
      padding: 5px;
    }
    #RelatedPosts ul.tile .item-title,
    #RelatedPosts ul.tile .item-title * {
      padding: 0 5px 5px;
      font-weight: bold;
      height: 5em;
    }
    #RelatedPosts ul.tile .item-snippet {
      display: none;
    }
     
    /* ----- VERTICAL ----- */
    #RelatedPosts ul.vertical {
      list-style: none;
      display: table;
      width: 100%;
      margin: 0;
      padding: 10px 0 0;
    }
    #RelatedPosts ul.vertical li {
      display: table-cell;
      text-align: center;
      width: 140px;
      border-right: 3px dotted rgb(195, 195, 195);
    }
    #RelatedPosts ul.vertical li:nth-last-of-type(1) {
      border-style: none;
    }
    #RelatedPosts ul.vertical .item-content {
      padding: 5px 20px 5px;
    }
    #RelatedPosts ul.vertical .item-thumbnail {
      display: inline-block;
    }
    #RelatedPosts ul.vertical .item-thumbnail div.thumb {
      border-radius: 5px 5px 5px 5px;
      -moz-border-radius: 5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px;
    }
    #RelatedPosts ul.vertical .item-date {
      padding: 10px 0 5px;
      text-align: center;
    }
    #RelatedPosts ul.vertical .item-title,
    #RelatedPosts ul.vertical .item-title * {
      text-align: center;
      font-weight: bold;
      word-wrap: break-word;
    }
    #RelatedPosts ul.vertical .item-snippet {
      display: none;
    }
     
    /* ----- HORIZON ----- */
    #RelatedPosts ul.horizon {
      list-style: none;
      margin: 0;
      padding: 10px 15px 0;
    }
    #RelatedPosts ul.horizon li {
      margin: 2px 0 2px;
      padding-bottom: 10px;
      border-bottom: 3px dotted rgb(195, 195, 195);
    }
    #RelatedPosts ul.horizon li:nth-of-type(1) {
      padding-top: 0 !important;
    }
    #RelatedPosts ul.horizon li:nth-last-of-type(1) {
      padding-bottom: 0 !important;
      border-style: none;
    }
    #RelatedPosts ul.horizon .item-content {
      margin-top: 3px;
    }
    #RelatedPosts ul.horizon .item-thumbnail {
      float: left !important;
      margin: 0 10px 0 0 !important;
    }
    #RelatedPosts ul.horizon .item-thumbnail div.thumb {
      margin: 1px 3px 0 0;
      padding: 0;
      border-radius: 5px 5px 5px 5px;
      -moz-border-radius: 5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px;
    }
    #RelatedPosts ul.horizon .item-date {
      display: block;
      font-size: 14px;
      color: rgb(120, 120, 120);
    }
    #RelatedPosts ul.horizon .item-title,
    #RelatedPosts ul.horizon .item-title * {
      padding: 5px 0;
      font-size: 16px;
      font-weight: bold;
    }
    #RelatedPosts ul.horizon .item-snippet {
      font-size: 14px;
      line-height: 120%;
      height: 3.6em; /* (1.2 * 3) = 3.6em */
      overflow: hidden;
    }
 
    /* This hack uses webkit specific feature.
     This will be used only in google chrome. */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      #RelatedPosts ul.horizon .item-snippet {
        line-height: 120%;
        height: 3.5em; /* (1.2 * 3) = 3.6em - α */
        overflow: hidden;
      }
    }

次は記事の表示する場所にコードを追加するのでCtrl+Fで<b:if cond='data:post.hasJumpLink'>を探します。
その少し下にある<div class='post-footer'>のすぐ上に下記のコードを追加。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script type='text/javascript'>
  //<![CDATA[
    var RelatedPostsConfig = {
      /* ------ OPTIONS -------- */
      widgetTitle: '関連記事', // 表示タイトル
      showResults: 4, // 表示する関連記事数
      styleMode  : 'vertical', // 表示タイプ : tile | vertical | horizon | none
       
      /* ------ NO IMAGE : vertical・horizon ------- */
      noImage100x100: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAGFBMVEXMzMzLy8v////Hx8fU1NTn5+fz8/Pb29tgAqqLAAABY0lEQVRYw+2SzXKDIBCAofYBIPgAZv3JNUA116o0uWMcr+06eYBqMnn9os2hEzM9tzN8syIz8A3sLsTj8Xg8Ho/nz8DZHJq7OeWUu4HNH6FaugXO7w16oFO8tKPbFH6yM+NXScTVqfLSSXq4ntmdEthYYMkAgBKi4h3IEDgJYSRiAEgEQrZdKKnGUqXGrhkp4hxKF6SAnu3g+JZp7LrlKRBgbRuep1unFNAoGOkqW3MVSVEL1JosFNtjDe76IJ2isrjCJhi6VFYN1VojpMuL7Td2VnBSVqfIVr1AAXpo2KltHioj/Dilet+A6kNooa7cD3oUmiyVAVwu+juXoYFUuSKAyymRAY4YyAdKAaXKzjhXzI42KSIVmafYVWzvKtZ2bKkwKDne+oJ1FefJ0PN8oweAj0d9oc80MFP366n7teFhyV4NJcxwfTlKaoxhv78xzjibRjclVNzemMfj8Xg8Hs8/5gtAeU6oiwTZAgAAAABJRU5ErkJggg==',
      /* ------ NO IMAGE : tile ------- */
      noImage320x150: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAACWBAMAAABdrkwfAAAAD1BMVEXMzMz////m5ub09PTY2Ng4o268AAADgUlEQVR42u2XXXajMAxGk8ACMGYB4HYB0HQBdJr9r2mwJKRoyJyTxu7bdx9aY2z5Gv/mBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/z20tD3GrIdKm9M6pS0oq9RZCiKM86GvKSClJzh/K0dcSx0JsfKzaCvPzbl+2MFzrK4RZwi2BcIbnELr8jsoTE+UQVDtQwoeIq7QizC8JziqoLauhE9TyxJYa9PUk4vaohuWCvRf8DjvxsWDHH8kJausSQukrCAYn2AZjPgg2omVdkwcRV3dlrCA4k6D+37gmmuTxIHjWXEuxt+hqiJjSwrnlgsO9YI76vs/z8Si4oRbR3mq+hPjch3rmVvpb5pVVnLkTvIiwpUxw/zirrgO/KFY3rzlopBzNeFFwNsEzNyTK8V/BSQdKlBgbQA3BLHMVwcEEJ3rye6QX5ESrgvJg2+J0v3pOVQSjCd5PvIWynOBC/dGKo66ReFYJylfKBSMFFMFWJxY7d48Eoy6LUV8OF86XEDUF+2ULL4I+VEMvTJC/zlac5Zf7s6fTQ7DxNuUbdb+1HVnQOZmtCWaLLxKZKNHpXBj5j3SrrmCuPpIge7jxPwjGMxXkhJ16q14eztUFc9+7R4LtQTAXb3Kq5cSgHRExKVlXkDa85wXbTSQnOhWkBUxL2QkGoViQN7ynBMkp5+Zx1in6pfPz/4LxmhlfE6QxfmKR8DDm0tlp1Cm6uC1UQphg8TbDh9oDweYoKLN1nUKwD5wv9ykl9pRaJhgrCDZ8VM1u4dq0N8HcCxrerRgZuCWgZ0ysLWiHvWy3tv96wdwL+spUTQQbd3+2o+66sVBeueC0C9r5ay15wVG+WEdlV1ojhkzJwZ+W5YKNCk4Wq/G3GVPiwqzLVQQVjv6+US4obYrVKMGtIS+40D1BBU3PQny6G1u5oF1EW/6tKCPXOUFy0cv0/QXoRkx2VZRO0hSsItiQ4K4ab6f2jUbMCVLT9ntJJphtRo32ln/X3BbuY/lGLb2eOccYTgfBKL3p/eatZ7L8N9YKZ/He61lSyuoFqbS01+mZMVm7e5XJ9bGOYKPVLy74QVBEZhF0m9Fy/PG/1hJsrfq3HQFekIxEZJTKVNHtehZC1csFrfcWvl8PgjTdeAh1zjX+ytNrXF4pB8EqtG/Xj/fCEOl6TesJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH6Pv7p3oZRrXHSJAAAAAElFTkSuQmCC',
       
      /* ------ FOR DISPLAY ---- */
      containerId: '#RelatedPosts' // 通常はいじらない
    };
  //]]>
  </script>
  <div id='RelatedPosts'>
    <script type='text/javascript'>
      var _RP_LFS_ = $(RelatedPostsConfig.containerId);
      var _RP_LN_ = null;
      var _RP_LFU_ = null;
    </script>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast != &quot;true&quot;'/>
      <script type='text/javascript'>
        _RP_LN_ = '<data:label.name/>';
      </script>
      <script type='text/javascript'>
      //<![CDATA[
        Saskwave.RelatedPostsWidget.collectLabels(_RP_LN_);
        _RP_LFU_ = '/feeds/posts/default/-/' + encodeURIComponent(_RP_LN_) + '?alt=json-in-script&callback=Saskwave.RelatedPostsWidget.collectPosts&max-results=100';
        _RP_LFS_.append($(Saskwave.createNode('script')).attr({ type: 'text/javascript', src: _RP_LFU_ }));
        console.log('Feed loading: ' + _RP_LFU_);
      //]]>
      </script>
    </b:loop>
    <script type='text/javascript'>
      Saskwave.RelatedPostsWidget.removeDuplicates('<data:post.url/>');
      Saskwave.RelatedPostsWidget.sort();
      Saskwave.RelatedPostsWidget.show(RelatedPostsConfig.containerId);
    </script>
  </div>
  <div style='clear:both;'/>
</b:if>

ここで保存して表示されているか確認します。
最後の表示記事数など以外のコードをいじらなければこれで表示されるはずです。
表示されない場合は、コードを変更した所や追加する場所が間違っていると思います。
新着記事は少し待たないと表示されないようです。


この記事をシェアする

0 件のコメント :

コメントを投稿