2015/09/28

Bloggerだったら、Google Feed Api不要?(サムネイル付き) (その2)

Bloggerだったら、Google Feed Api不要?(サムネイル付き) の続き

・サムネイルのサイズの変更 ("/s140-c/"の数字を変えると、いろいろできる。)
と、
・横4列
に変更してみた。
 <ul style="display: inline-block; list-style-type: none; margin: 0; padding: 0;">  
 <script type="text/javascript">   
  function mycallback(json) {   
  for (var i = 0; i < json.feed.entry.length; i++) {   
  for (var j = 0; j < json.feed.entry[i].link.length; j++) {   
  if (json.feed.entry[i].link[j].rel == 'alternate') {   
  var postUrl = json.feed.entry[i].link[j].href;  
  break;  
  }   
  }   
  var postTitle = json.feed.entry[i].title.$t;  
  var postdate = json.feed.entry[i].published.$t;  
  var pyear = postdate.substring(0,4);  
  var pmonth = postdate.substring(5,7);  
  var pday = postdate.substring(8,10);  
  var pudate = pyear + '/' + pmonth + '/' + pday + '<br />';  
  var pimgurl;  
  if (typeof(json.feed.entry[i].media$thumbnail) !== "undefined") {   
  pimgurl = json.feed.entry[i].media$thumbnail.url;  
  pimgurl = pimgurl.replace("/s72-c/","/s140-c/");  
  }else{   
  pimgurl = "http://1.bp.blogspot.com/xxxxxxxx/logo.jpg";  
  }   
  var pimg = '<img src=' + pimgurl + ' width=180>';  
  var scrw = '145px';  
  if (window.innerWidth > 320){ scrw = '195px';}  
  var item = '<li style="display:inline-block; width:' + scrw + '; text-align:center; float:left; ">';  
  item += '<a href=' + postUrl + '>' + pimg + '<br />' + pudate + postTitle + '</a></li>';  
  document.write(item);  
  }   
  }   
  </script>   
  <script src="http://xxxxxxxx.blogspot.jp/feeds/posts/summary?category=xxxxxx&amp;orderby=published&amp;max-results=30&amp;alt=json-in-script&amp;callback=mycallback"></script>   
  </ul>   

赤文字は、適宜変更して下さい。

<li>を使っているので、[作成]モードで編集すると、行がズレて表示できなくなります。
そのときは、[HTML]モードで、行ズレを直して下さい。

追記:20220220 Blogger側の仕様変更で、
  画像のURLが、「1.blogspot.com」から「googleusercontent.com」に
  変更になった。
  で、パラメータの書き方も、変更。
  上記のAPIを使うのなら、
pimgurl = pimgurl.replace("/s72-c/","/s140-c/");
  の後ろに、
pimgurl = pimgurl.replace("s72-w320-h320","s140-w140-h140-l80-c");
  が必要。(しないとサムネがボケる)
 (画像を含まない投稿時の代替画像のURLも要変更)

0 件のコメント :

コメントを投稿