2014年6月2日月曜日

Blogger単独で最近の投稿を表示する方法 (Recent Posts)

2014年6月2日月曜日 , , , , ,
Bloggerには、最近の投稿(Recent Posts)ガジェットがないため、最近の投稿を追加できなかったりします。実現しようとすると大抵、Feed2JSを使うなど、外部サービスに頼らざる得ません。でも外部サービスを使う場合、外部サービスが終了したりすると急に使えなくなるので不便ですよね。

ちなみに、Bloggerのフィードガジェット使えばできるじゃん！って突っ込まれそうですが、あれは最大件数5件までだったりサムネイルを表示できなかったりでいろいろ不便です。

なので、作ってみました。
デフォルトではこんな感じに表示されます！


このコードは、BloggerのHTML/Javasriptガジェットに突っ込むだけでそのまま使えます。
そうそう、コード簡素化のために、jQueryを使っています。
jQueryをまだ組み込んでいないBloggerユーザーは下記にある追記を参考にして組み込んでください。

なお、この最近の投稿スクリプト(Recent Posts)の特徴は以下の通りです。
  • 表示件数を任意にコントロールできる(ただし500件まで)
  • 表示したいアイテムの設定ができる
  • サムネイルの表示、非表示を設定できる
  • コンテンツのスニペットを文字数単位で設定できる
  • CSSやJavascriptコードの表示部分を弄れば好きなレイアウトにできる
  • jQueryによる簡易な記述
  • カスタマイズ自由
などです。
ではコードを掲載します。
都合上、CSSとHTML/Javascriptを分けて掲載してますが、一纏めにしてHTML/Javascriptガジェットに貼り付けても問題なしです。

CSSコード
<style type="text/css">
#RecentPosts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#RecentPosts ul li {
  margin: 2px 0px 2px;
  border-bottom: 1px dotted rgb(195, 195, 195);
}

#RecentPosts li:nth-of-type(1) {
  padding-top: 0px !important;
}

#RecentPosts li:nth-last-of-type(1) {
  padding-botttom: 0px !important;
  border-style: none;
}

#RecentPosts img {
  height: 72px;
  width: 72px;
  
  padding: 0px;
  margin: 1px 3px 0px 0px;
  
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}

#RecentPosts a:hover,
#RecentPosts img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

#RecentPosts .item-content {
  margin-top: 3px;
}

/* This class belongs to the RecentPosts only. */
#RecentPosts .item-date {
  font-size: 90%;
  color: rgb(120, 120, 120);
  display: block;
}

#RecentPosts .item-title,
#RecentPosts .item-title a {
  margin: 3px 0;
  font-size: 13px;
  font-weight: bold;
  color: rgb(204, 0, 34);
  text-decoration: none;
}

#RecentPosts .item-title a:link,
#RecentPosts .item-title a:visited,
#RecentPosts .item-title a:hover,
#RecentPosts .item-title a:active {
  color: rgb(204, 0, 34);
}

#RecentPosts .item-title a:link,
#RecentPosts .item-title a:hover,
#RecentPosts .item-title a:active {
  text-decoration: none;
}

#RecentPosts .item-snippet {
  /* Hides the overflow area over height attribute. */
  border-style: none;
  padding-top: 5px;
  font-size: 12px;
  line-height: 120%; /* 150% */
  height: 6em; /* (1.2 * 5) = 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) {
  #RecentPosts .item-snippet {
    line-height: 120%; /* 150% */
    height: 5.9em; /* (1.2 * 5) = 6em - α */
    overflow: hidden;
  }
}


#RecentPosts .item-thumbnail {
  float: left;
  margin: 0px 5px 5px 0px;
}

#RecentPosts .no-thumbnail-72x72 {
  width: 72px;
  height: 72px;
  display: block;
  background-repeat: no-repeat;
  
  /* no photo img. */
  background-image:  url(data:image/png;base64,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);
}
</style>

HTML/Javascriptコード
<div id="RecentPosts" class="recent-posts">
  <div class="recent-posts-hook"><!-- HOOK UP --></div>
  
  <script type="text/javascript">
  //<![CDATA[
  var showPostCounts      = 15;
  var showPostDate        = true;
  var showPostTumbnail    = true;
  var showPostSnippet     = true;
  var showPostSnippetSize = 192;
  
  var showRecentPosts = function(json) {
    var entry = null;
    var content = null;
    var postTitle = null;
    var postDate = null;
    var postSnippet = null;
    var postUrl = null;
    var postThumbUrl = null;
    
    var recentPostsHookNode = $('#RecentPosts .recent-posts-hook');
    var ulNode= $('<ul>');
    var liNode= null;
    var divNode = null;
    var node= null;
    
    for(var i = 0; i < showPostCounts; i++){
      entry = json.feed.entry[i];
      
      if(typeof entry === "undefined"){
        break;
      }
      
      if(i == json.feed.entry.length){
        break;
      }
      
      liNode= $('<li>');
      divNode = $('<div>').attr('class', 'item-content');
       
      // TITLE
      postTitle = entry.title.$t;
        
      // LINK
      for (var j=0; j < entry.link.length; j++){
        if(entry.link[j].rel == "alternate"){
          postUrl = entry.link[j].href;
          break;
        }
      }
      
      node = $('<div>').attr('class', 'item-title');
      
      // DATE
      if(showPostDate){
        postDate = entry.published.$t;
        var pubYear= postDate.substring(0,4);
        var pubMonth = postDate.substring(5,7);
        var pubDay = postDate.substring(8,10);
        postDate = pubYear + '/' + pubMonth + '/' + pubDay;
          
        divNode.append($('<div>').attr('class', 'item-date').text(postDate));
      }
      
      node.append($('<a>').attr('target', '_self').attr('href', postUrl).text(postTitle));
      
      divNode.append(node);
      node = null;
      
      if("content" in entry){
        content = entry.content.$t;
      }else{
        if("summary" in entry){
          content = entry.summary.$t;
        }else{
          content = '';
        }
      }
      
      // THUMBNAIL
      if(showPostTumbnail){
        try{
          postThumbUrl = entry.media$thumbnail.url;
        }catch(error){
          var a = content.indexOf("<img");
          var b = content.indexOf("src=\"", a);
          var c = content.indexOf("\"", b + 5);
          var d = content.substr(b + 5, c - b - 5);
            
          if((a != -1) && (b != -1) && (c != -1) && (d != "")){
            postThumbUrl = d;
          }else{
            postThumbUrl = null;
          }
        }
        
        node = $('<div>').attr('class', 'item-thumbnail');
        node.append($('<a>').attr('target', '_self').attr('href', postUrl).html(((postThumbUrl != null) ? $('<img>').attr('src', postThumbUrl) : $('<a>').attr('class', 'no-thumbnail-72x72'))));
        
        divNode.append(node);
        node = null;
      }
      
      // SNIPPET
      if(showPostSnippet){
        postSnippet = content.replace(/<\S[^>]*>/g, "");
        
        if(postSnippet.length > showPostSnippetSize){
          postSnippet = postSnippet.substring(0, showPostSnippetSize - 1) + '…';
        }
        
        divNode.append($('<div>').attr('class', 'item-snippet').html(postSnippet));
      }
      
      liNode.append(divNode);
      liNode.append($('<div>').attr('style', 'clear: both;'));
        
      ulNode.append(liNode);
    }
    
    recentPostsHookNode.append(ulNode);
  }
  //]]>
  </script>
  <script type="text/javascript">
  //<![CDATA[
  $('#RecentPosts .recent-posts-hook').append(
    $('<script>').attr({
      type: 'text/javascript',
      src : '/feeds/posts/default?max-results=' + showPostCounts + '&orderby=published&alt=json-in-script&callback=showRecentPosts'
    })
  );
  //]]>
  </script>
</div>

以下の部分を弄ると、表示の制御ができます。  
var showPostCounts      = 15;   // 表示件数
var showPostDate        = true; // 日付を表示するかどうか
var showPostTumbnail    = true; // サムネイルを表示するかどうか
var showPostSnippet     = true; // スニペットを表示するかどうか
var showPostSnippetSize = 96;   // スニペットの文字数 

他にもCSSを弄ったり、Javascriptの表示のための部分を弄ったりすることでいろんな風にカスタマイズすることができますよ！

追記

この最近の投稿スクリプト(Recent Posts)ではjQueryライブラリを使用しています。
jQueryライブラリの利用をしていないBloggerの場合、以下のURL先の「下準備」を参考にして、jQueryライブラリの記述を行ってください。

http://saskwave.blogspot.jp/2014/02/blogger-google-feed-api-label-feeds-collection-2.html

改訂

2014/06/02
  • CSSの修正をしました。
  • レイアウトの見直しをしました。
2014/06/07
  • スニペットの文字が途切れるという問題をCSSで修正をしました(たぶん大丈夫なはず)。

2 件のコメント:

  1. さほ2014年4月22日 22:24

    はじめまして！最近Bloggerを利用しはじめた者です。

    こういうウィジェットをさがしていました！
    サムネイルのデザインも、シンプルかつ丸みがあって可愛い…。
    事後報告ですみませんが、さっそくお借りしました。本当に素敵です！

    自作のガジェットを紹介されている方は他にもいらっしゃいますが、
    ここまで親切でわかりやすい説明はなかなか見かけません。
    頭が良くて、性格まで、ってもしや…神DA！笑

    お馬鹿コメですみません。。
    ほかの記事もまた参考にさせてください、失礼しました～！

    返信削除
    返信
    1. sask2014年4月23日 11:13

      ありがとうございます。

      こちらのブログにあるコードは特に明記がない場合、ご自由にご利用ください。

      RecentPostsもガシガシ弄って貰って構いません。
      むしろ弄って貰うために、なるべくシンプルなCSSにしてますし
      HTML/Javascript(jQuery含む)でレイアウトを簡単に変更できるような
      構造にしてあります。

      ちなみにですが知り合いに頼まれた商用サイトでは
      このRecentPostsをタイル状に表示できるよう改造しました。
      サムネイル画像がタイルになってる感じですかね。

      Blogggerネタ、ブログネタは結構あるんですが
      筆不精なものでなかなか投稿できないでいます(;^^

      では。

      削除

登録: コメントの投稿 (Atom)