フロントエンド
投稿日：

RSS取得はどう行うのか？

rss取得

先日ページ内にgoogleのapiを使ってtopページのニュース情報やブログ情報をRSS取得について行いました。
作業としてしていないと忘れてしまうので自分のメモとして残します。

下記のスクリプト入れます。

<!DOCTYPE html>
<html lang=”ja”>
<head>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1"); //APIを読み込みます

function initialize(){
  
  var feed = new google.feeds.Feed("該当のblogURLを入れます"); //読み込むフィードを設定します
  var noPhoto = ("<img src='' />"); //画像がなかった場合に表示する画像を指定します
  
  feed.setNumEntries(5); //記事を読み込む件数を設定します
  feed.load(dispfeed);
  
  function dispfeed(result){

    if(!result.error){
      var container = document.getElementById("feed"); //HTMLに書き出す対象のIDを指定します

      for (var i = 0; i < result.feed.entries.length; i++) {

        var entry = result.feed.entries[i];
        
        var entryDate = new Date(entry.publishedDate); //日付取得　以下二桁処理をします
        var entryYear = entryDate.getYear();
        if (entryYear < 2000){
          entryYear += 1900;
        }
        var entryMonth = entryDate.getMonth() + 1;
        if (entryMonth < 10) {
          entryMonth = "0" + entryMonth;
        }
        var entryDay = entryDate.getDate();
        if (entryDay < 10) {
          entryDay = "0" + entryDay;
        }
        var date = entryYear + "/" + entryMonth + "/" + entryDay ;

        var entryImg = "";
        var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/); //画像のチェックをします
        if(imgCheck){
          entryImg += '<img ' + imgCheck[0] + '" width="315">';
          } else {
            entryImg += noPhoto;
        }

//ここから該当箇所のマークアップを記述します。

        container.innerHTML += '<div><p class="textBlog">' 
                  + date 
                  + '</p><h3 class="news-title">'
                  + entry.title + '</h3>'
                  + entryImg  
                  + '<p class="mgt10">'
                  +entry.contentSnippet.substring(0,50)
                  + '<br> …<a href="' + entry.link + '">続きを読む</a></p></div>'
                  +'<hr>';

      }

      var linkBlank = container.getElementsByTagName('a'); // targetに'_blank'を設定します。不要な場合は、以下4行を削除
      for (var j = 0, l = linkBlank.length; j < l; j++) {
        linkBlank[j].target = '';
      } //target'_blank'ここまで
    }
  }
}
google.setOnLoadCallback(initialize);// JavaScript Document
</script>

</head>

<body>

<!--該当箇所に-->

<div id="feed"></div>

</body>
</html>

あとはコード及びクラス名の修正を行えば問題なく表示がされるはず！

この記事を見た人がよく見ている記事

SEO