2012/05/27

[blogger]シンプルな関連記事表示がしたい!「Smarter Related Posts Widget for Google Blogger - v2.0」!

follow us in feedly
follow us in RSS

設置してから、少し経ってしまっているんですが、

Smarter Related Posts Widget for Google Blogger - v2.0
をご紹介。

投稿の下に関連記事を付けるのは、是非ともしたいところですが、シンプルなのがいいと言う方に向けて。

関連記事の表示というと、Linkwihtinやzenbackなどがお手軽ですが、こちらも負けず劣らずです。
サムネイル表示も出来ますが、正直ちょっと使いづらそうな見た目だったので、サムネイル表示なしの、シンプルリスト形式表示にしています。


設定

トップページの冒頭、ハイライトで囲った部分をクリックします。

設定画面です。
  • Blog URL=ブログのURL
  • Mode=関連記事か、最近の記事かの表示を選択
  • Fixed Tags=上の設定で「Related Posts by Fixed Tags」を選んだ時に、タグを指定
などがあります、大体わかるところだけでも問題なさそうです。
サムネイル表示は「Show Thumbs?」なので、必要ない人はここを「No」に。

また、「Related Title」「Recent Title」で、「関連記事」や「オススメ記事」など、好きな見出しを付けることが出来ます。
トップページには表示しない場合には「Post Pages Only?」を「Yes」に変更。


コードをコピー

設定ができたら、「Update Demo& Code」をクリック。
Code欄にコピー用のコードが表示されるので、そのコードを、HTMLの編集から、好きな位置にペーストすれば完了です。

大体は記事の下につけると思うので、
<div class='post-footer'>
を探して、その下にペーストすればいいと思います。

追記(06/25)
コードの貼り付けですが、ガジェット「HTML/Javascript」に貼り付ける場合は、コピペでいいのですが、テンプレートHTMLの編集から貼り付ける場合、コードの書き換えが必要な箇所がありました。

コピー用に出されるコードは、
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class="related-posts-widget">
<!-- {
 blog_url:'http://www.sunabox.net'
 ,related_title:'関連する記事'
 ,recent_title:'最近の記事'
 ,thumbs:0
} -->
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
一例としてこんか感じなのですが、bloggerのテンプレートHTMLに貼る場合は、
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class="related-posts-widget">
&lt;!-- {
 blog_url:'http://www.sunabox.net'
 ,related_title:'関連する記事'
 ,recent_title:'最近の記事'
 ,thumbs:0
} --&gt;
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
というように、8行目と13行目に変更を加える必要があります。

@okissta_さん、ありがとうございました。

ブロガーの本文にSmarter Related Posts Widget for Google Blogger - v2.0 | おきすたこむ|Okissta

blogger用のクリックボタンがあるのですが、どこに挿入されるのか不安だったので、自分でコピペするほうが私に合っていました。

Linkwidhinと共に・・・


私がそうしてますが、リスト表示だけにすると本当にシンプルになるので、Linkwithinと併用しても、うるさくならない程度だと思っています。
さすがに、zenbackはサイドバーに移動させましたがw

シンプルな関連記事表示が欲しい人はどうぞ!
見ていると、同じタグの関連記事をけっこう表示してくれているようです。

ではまた!

追記(06/10)

後日、リストの表示の仕方を変更したので、その方法も紹介しました。

【[blogger]シンプルな関連記事をつけた後に、スタイルを選ぶ!「Smarter Related Posts Widget for Google Blogger - v2.0」 - sunabox】

11 件のコメント:

  1. 記事下に直接表示させると、どうしてもサムネイルが表示されてしまいます。ウィジェットに表示させるとそんなことはないのですが・・・。なぞです><

    返信削除
  2. 了解です!
    うまくいったのなら良かったですヽ(´ー`)ノ

    返信削除
  3. はじめまして。無事設置できました。シンプル表示できるものをさがしていたので大変参考になりました。ありがとうございました。

    返信削除
  4. わざわざコメントまで、ありがとうございます!
    うまく設置できたようでこちらも安心しました。

    返信削除
  5. The_eliminators2012/09/15 13:31:00

    はじめまして。記事を拝見して設置することができました。
    シンプルなものを探していたのでとても助かりました。本当にありがとうございます。で、欲が出てしまいまして、、、これをモバイルでも表示させることはできるんでしょうか?もしご存知であればご教授いただければ幸いです。m(_ _)m

    返信削除
  6. ご参考ありがとうございます。

    モバイルで表示出来ていないのはわかっていたんですが、今のところ解決方法が私も分かっていない状況です(ノ_・。)

    「add blogger」ボタンを使って、テスト用ブログで試しても見ましたが、やはり表示できず。
    モバイルでも表示できているサイトさんがありますので、方法はあると思うのですが・・・。お役に立てず、申し訳ありません。

    もし、うまくいったら、またブログに書きたいと思います。

    返信削除
  7. The_eliminators2012/09/17 5:38:00

    わざわざのご返信ありがとうございます。
    私も調べて試行錯誤して、もし方法を見つけたらご連絡させて頂きます。

    返信削除
  8. モバイルテンプレートで表示させる方法です.



    がPC用とモバイル用が存在します.
    テンプレート編集で2つ目の付近に書き込めば良いと思います.

    返信削除
  9. コメントありがとうございます。

    最近、モバイル用のHTML部分が分かったので、試していたのですが、どうも表示されたり、されなかったりが不安定ですね~。(私の環境だけかもですが)

    少し様子見しながらになりそうです。
    情報ありがとうございました~!

    返信削除
  10. 記事を参考にさせていただきまして、関連記事を設置できました。ありがとうございました。
    2年前の記事にコメント入れて恐縮です。1点ご教示いただければ幸いです。

    パソコンから見た場合はタイトルが『関連記事』と表示されますが、スマホから見ると『Recent Posts』と表示されてしまいます。

    http://maco-i.blogspot.jp/2014/06/line.html
    http://maco-i.blogspot.jp/2014/06/line.html?m=1

    スマホから見たときにも『関連記事』と表示させる方法はご存知ないでしょうか。

    返信削除
  11. コメントありがとうございます。

    この下のコメントにもあるのですが、どうも私のとこ(もしくは方法)だとモバイル表示自体がうまく出来なくて、いまのところそのまま放置してモバイルではLinkwithinを使っているような状態です。

    モバイルでの表示自体はできているようですので、
    テンプレートのモバイル部分に書き込んでいるタイトル「関連記事」の上にある『blog_url:'http://www.ブログURL'』の部分に『?m=1』とモバイル用のURLを足してみてはどうだろうか?

    みたいには思ってはみますが、表示自体が出来ない私には検証がうまく出来ません(・・
    申し訳ありません。時期に再挑戦してみます。。

    返信削除

Related Posts Plugin for WordPress, Blogger...