Bloggerにサクっと関連記事を表示させるプラグイン

2021年6月13日日曜日

Blogger プラグイン

t f B! P L

この記事では、Bloggerで関連記事を表示する方法を、紹介します。

以前、Bloggerで関連記事を表示させる為のサービスを紹介しましが、今度は関連記事を表示するプラグインを自作しました。

実際、このブログの右側に表示されている関連記事は、今回紹介するプラグインを使って表示させています。
関連記事の表示は、SEO対策的にも「吉」と言われているので、是非表示していきましょう。

Google Blogger Related Posts

スポンサーリンク

完成イメージ

このプラグインを使うと、こんな感じで関連記事を表示する事ができます。
サムネイル画像も付いてます!

関連記事表示プラグイン完成イメージ

特徴

この関連記事表示プラグインには、以下の4つの特徴があります。

  • 外部サービス不使用

このプラグインは、JavaScriptだけで作成されています。
また、Bloggerのフィード(RSS)から、関連記事を抽出している為、外部サービスを使用した時によくある、サービス停止によって表示されなくなる心配は不要です。

  • 関連度が高い記事をリストの上部に表示

現在表示中のページと同じラベルを持つ記事を、関連記事として表示します。
ラベルの一致度が高い記事をリストの上部に表示します。

  • 非同期で関連記事を表示

非同期で関連記事を検索・表示する為、メインの記事の表示を止める事がありません。

  • シンプルなHTMLでカスタマイズが容易

関連記事の表示に使うHTMLは、シンプルな物になっています。
CSSで柔軟なカスタマイズが出来ると思います。

設定方法

さっそく、あなたのブログにも、関連記事を表示させてみましょう。

テーマをバックアップ

念の為、現在のテーマをバックアップしましょう。
バックアップの方法は以下の通りです。

  1. Bloggerの管理画面から、[テーマ] -> [バックアップ/復元] をクリック
  2. [テーマをダウンロード] をクリックすると、現在のテーマがダウンロードできます

HTMLを編集

  1. blogIDを調べる

まず、自分のブログのblogIDを確認します。
Blogger管理ページにアクセスし、アドレスバーのURLから、blogIDを控えます。

BloggerのblogID確認方法

  1. テーマの画面で、[HTMLの編集] をクリックし、HTMLを表示します
  2. 関連記事を表示させたい場所に、以下のコードを追加します
<!--関連記事をここに表示する-->
<div>
    <small>関連記事</small>
    <div id='b-related-post-list-container'/>
</div>

<small>関連記事</small>のタイトル部分は、好みに合わせて変更してください

  1. JavaScript/CSSの追加

テーマのHTMLの中から、以下のタグを探してください。

<b:include data='post' name='post'/>

見つかったら、そのすぐ下に、以下のコードを追加して下さい。
また、blogId: "xxxxxxxxxxxxx"となっている部分について、先ほど調べた自分のblogIDに書き換えて下さい。

<!--[START]関連記事表示プラグイン-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='b-related-post-list-labels' style='display:none'>
    <b:loop values='data:post.labels' var='label'>
        <span><data:label.name/></span>
    </b:loop>
</div>
<script>
    //関連記事の表示設定
    //オプションの設定方法は「https://www.sukerou.com/2019/01/blogger_18.html」を参照して下さい
    var related_post_list_config = {
        blogId: "xxxxxxxxxxxxx",
        postCount: 5
    };

    //以下のJavaScriptコードは編集しないでください
    ;(function(f){var h=[];var g=[];var e=0;var a=false;window.__b_load_related_post__=function(){label_elements=document.querySelectorAll(&quot;#b-related-post-list-labels span&quot;);for(var k=0;k&lt;label_elements.length;k++){var l=label_elements[k].textContent;var j=document.createElement(&quot;script&quot;);j.src=&quot;https://www.blogger.com/feeds/&quot;+encodeURIComponent(related_post_list_config.blogId)+&quot;/posts/default/-/&quot;+encodeURIComponent(l)+&quot;?alt=json-in-script&amp;callback=__b_related_post_callback&amp;max-results=&quot;+related_post_list_config.postCount;document.body.appendChild(j);g.push(l)}};window.__b_related_post_callback=function(i){if(i.feed.entry instanceof Array){i.feed.entry.forEach(function(l){var k={};k.url=&quot;#&quot;;(l.link instanceof Array?l.link:[]).forEach(function(m){if(m.rel==&quot;alternate&quot;){k.url=m.href}});if(h.some(function(m){return m.url==k.url})){return}if(location.href==k.url){return}k.title=l.title.$t;k.labels=l.category instanceof Array?l.category.map(function(m){return m.term}):[];k.relevantDegree=0;for(var j=0;j&lt;g.length;j++){if(k.labels.indexOf(g[j])&gt;=0){k.relevantDegree+=(1/(j+1))}}k.thumbnail=l.media$thumbnail;h.push(k)})}e++;if(e==g.length){c(h);h.sort(function(k,j){return Math.sign(j.relevantDegree-k.relevantDegree)});d()}};document.addEventListener(&quot;DOMContentLoaded&quot;,function(){a=true});function d(){var j=document.getElementById(&quot;b-related-post-list-container&quot;);if(j==null){return}var n=document.createElement(&quot;ul&quot;);n.classList.add(&quot;b-related-post-list&quot;);j.appendChild(n);var p=Math.min(related_post_list_config.postCount,h.length);for(var l=0;l&lt;p;l++){var q=h[l];var r=document.createElement(&quot;li&quot;);r.appendChild(b(q));var m=document.createElement(&quot;div&quot;);m.classList.add(&quot;b-related-post-text-container&quot;);var o=document.createElement(&quot;a&quot;);o.href=q.url;o.target=&quot;_blank&quot;;o.classList.add(&quot;b-related-post-title&quot;);o.textContent=q.title;m.appendChild(o);if(q.labels.length&gt;0){var k=document.createElement(&quot;div&quot;);k.classList.add(&quot;b-related-post-label-container&quot;);q.labels.forEach(function(s){var i=document.createElement(&quot;span&quot;);i.textContent=s;k.appendChild(i)});m.appendChild(k)}r.appendChild(m);n.appendChild(r)}}function b(j){var i=document.createElement(&quot;a&quot;);i.href=j.url;i.target=&quot;_blank&quot;;i.classList.add(&quot;b-related-post-thumbnail-container&quot;);if(typeof j.thumbnail===&quot;undefined&quot;||j.thumbnail==null){return i}var k=document.createElement(&quot;img&quot;);k.src=j.thumbnail.url;i.appendChild(k);k.addEventListener(&quot;load&quot;,function(){var o=this.clientHeight;var m=this.clientWidth;var p=Math.max(o,m)/Math.min(o,m);var n=0,l=0;if(o&gt;m){m=i.clientHeight;o=m*p;n=(o-i.clientHeight)/2}else{o=i.clientHeight;m=o*p;l=(m-i.clientHeight)/2}this.style.height=o+&quot;px&quot;;this.style.width=m+&quot;px&quot;;this.style.marginLeft=(-1*l)+&quot;px&quot;;this.style.marginTop=(-1*n)+&quot;px&quot;});return i}function c(o){var n=o.length;for(var m=n-1;m&gt;0;m--){var k=Math.floor(Math.random()*(m+1));var l=o[m];o[m]=o[k];o[k]=l}}})(window);if(typeof __b_load_related_post__===&quot;function&quot;){__b_load_related_post__()};
</script>
<style>
    .b-related-post-list{list-style:none;padding:0;margin:0}.b-related-post-list li{list-style:none;position:relative;min-height:5rem;margin-bottom:5px;font-size:16px}.b-related-post-list .b-related-post-thumbnail-container{width:5rem;height:5rem;border:1px dotted #ccc;overflow:hidden;display:block;position:absolute;background:#333;background:-moz-radial-gradient(#333 20%,#111 70%);background:-webkit-radial-gradient(#333 20%,#111 70%);background:radial-gradient(#333 2%,#111 70%);top:0;left:0}.b-related-post-list .b-related-post-text-container{position:absolute;left:5.4rem;top:3px;margin:0;padding:0}.b-related-post-list .b-related-post-title{display:block;margin:0;padding:0;max-height:3rem;font-size:16px;overflow-y:hidden}.b-related-post-list .b-related-post-label-container{margin-top:.1rem}.b-related-post-list .b-related-post-label-container span{display:inline-block;padding:1px;background:#1b89d5;color:#fff;margin:0 4px 0 0;font-size:.8rem}
</style>
</b:if>
<!--[END]関連記事表示プラグイン-->

コードの挿入位置は、以下のイメージを参考にして下さい。

コードの挿入位置のヒント

  1. [テーマを保存]をクリックして、編集内容を保存してください。

設定はこれで終わりです。お疲れ様でした。
実際に自分のブログにアクセスし、関連記事が表示されている事を確認して下さい。

スポンサーリンク

オプション

今回紹介した、関連記事表示プラグインは、オプションで、表示条件を制御する事ができます。

オプションの設定方法

コピーしたコードに、related_post_list_config = {…} と書かれている部分があります。
この JSON を直接編集して、目次の表示オプションを変更します。

オプションの設定内容は、後述する「各オプションの説明」を参照して下さい。

//関連記事の表示設定
//オプションの設定方法は「https://www.sukerou.com/2019/01/blogger_18.html」を参照して下さい
var related_post_list_config = {
    blogId: "xxxxxxxxxxxxxxxx",
    postCount: 5
};

各オプションの説明

  • blogId

自分のブログのBlogIdを設定します。

  • postCount

表示する関連記事の数を指定します。
5を指定した場合、関連する記事が6件以上ある場合、関連度が高い上位5件までが、リストに表示されます。

さいごに

如何でしたでしょうか?
「うまく表示されないけど?」という方は、コメント欄から連絡頂ければ、可能な限り対応します。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ