top > コラム > ホームページ制作 > ブログの最新記事をホームページに表示する方法

ブログの最新記事をホームページに表示する方法

[2018/01/08]

Google Feed APIのサービスが終了してしまったので、YQL APIを利用した方法も紹介します。

YQL APIを利用し、ブログのRSS情報を取得し、ブログの最近記事を表示させたいと思います。

jQueryを利用します。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
    $.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {
        q: "select * from rss(5) where url = 'FeedのURL'",
        format: "json"
    }, function(json) {
        var container = document.getElementById('feed');
        var htmlstr = '';
        htmlstr += '<ul>';
        for (var i = 0; i < json.query.results.item.length; i++) {
            var entry = json.query.results.item[i];
            var dd = new Date(entry.date);
            var yearNum = dd.getYear();
            if (yearNum < 2000) yearNum += 1900;
            var m = dd.getMonth() + 1;
            if (m < 10) {
                    m = '0' + m;
            }
            var d = dd.getDate();
            if (d < 10) {
                    d = '0' + d;
            }
            var date = yearNum + '/' + m + '/' + d;
            htmlstr += '<li>' + date + ' <a href="' + entry.link + '" target="_blank">' + entry.title + '</a></li>';
        }
        htmlstr += '</ul>';
        container.innerHTML= htmlstr;
    });
});
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>

6行目ですが、jQueryの本体を読み込みます。ここでは、jQueryのCDNからjQueryファイルを読み込んでいますが、ご自身のサーバにjQuery本体のファイルを設置されても構いません。

10行目の「FeedのURL」にFeedのURLを記述します。また、表示数は10行目の「from rss(5)」の数字になります。

19~29行目が、日付のフォーマットを設定しています。

30行目が、表示方法のフォーマットを設定しています。

39行目ですが、表示する箇所に「<div id="feed"></div>」を記述します。

参考サイト

------------------------------------ ここから過去記事 ------------------------------------

ブログの最新記事をホームページに表示したい場合は、Google Feed APIというサービスを利用するのが便利です。

これは、ブログのRSS情報を取得し、ホームページに、ブログのタイトルや内容を表示できるものです。

まずは、以下のソースコードを、ブログの最新記事を表示したいホームページのHTMLページの<head>タグ内に記述します。

Java Script

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
   google.load("feeds", "1");
   function initialize() {
      var feed = new google.feeds.Feed("ブログのFeed URL");
      feed.load(function(result) {
         if (!result.error) {
            var container = document.getElementById("feed");
            for (var i = 0; i < result.feed.entries.length; i++) {
               var entry = result.feed.entries[i];
               var div = document.createElement("div");
               div.appendChild(document.createTextNode(entry.title));
               container.appendChild(div);
            }
         }
      });
   }
   google.setOnLoadCallback(initialize);
</script>

5行目の「ブログのFeed URL」というところを実際のブログのFeed URLを記述します。

そして、以下のソースコードを、ブログの最新記事を表示したい箇所(<body>タグ内)に記述します。

HTML

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

これでとりあえずはブログの最新記事4つまでのタイトルを取得できます。

応用編(リスト形式)

ただ、これでは、ブログの最新記事のタイトル4つが並んだ状態で表示されるだけです。デザイン的にももっと変更したいですよね。ここでは記事数を変更して、タイトルにリンクを貼って、リスト形式にしてみます。

Java Script

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
   google.load("feeds", "1");
   function initialize() {
      var feed = new google.feeds.Feed("ブログのFeed URL");
      // エントリー数
      feed.setNumEntries(10);
      feed.load(function(result) {
         if (!result.error) {
            var container = document.getElementById("feed");
            var list = "";
            for (var i = 0; i < result.feed.entries.length; i++) {
               // エントリー取得
               var entry = result.feed.entries[i];
               // HTMLタグ整形
               list += '
               <li><a href="' + entry.link + '">' + entry.title + '</a></li>';
            }
            // HTMLタグ出力
            container.innerHTML = '<ul>' + list + '</ul>';
            }
         });
      }
      google.setOnLoadCallback(initialize); 
</script>

7行目の「feed.setNumEntries(10);」が表示される記事数になります。ここでは記事数を10にしていますが、任意の数に変更してください。

応用編(定義リスト形式)

先ほどはタイトルのみのリストでしたが、日付も一緒に表示したい場合は、定義リスト形式にすると便利です。

Java Script

<script src="https://www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript">
      google.load("feeds", "1");
      function initialize() {
         var feed = new google.feeds.Feed("ブログのFeed URL");
         // エントリー数
         feed.setNumEntries(10);
         feed.load(function(result) {
            if (!result.error) {
               var container = document.getElementById("feed");
               var list = "";
               for (var i = 0; i < result.feed.entries.length; i++) {
                  // エントリー取得
                  var entry = result.feed.entries[i];
                  // 日付取得
                  var strdate = createDateString(entry.publishedDate);
                  // HTMLタグ整形
                  list += '<dt>' + strdate + '</dt><dd><a href="' + entry.link + '">' + entry.title + '</a></dd>';
               }
            // HTMLタグ出力
            container.innerHTML = '<dl>' + list + '</dl>';
            }
         });
      }

      // 日付設定
      function createDateString(publishedDate){
         var pdate = new Date(publishedDate);
         var pyear = pdate.getFullYear();
         var pmonth = pdate.getMonth() + 1;
         var pday = pdate.getDate();
         var strdate = pyear + '年' + pmonth + '月' + pday + '日';
         return strdate;
      }

      google.setOnLoadCallback(initialize);
</script>

日付は、「○年○月○日」というように整形していますが、32行目を変更いただくと例えば、「○/○/○」というようにスラッシュを入れることも可能です。

Java Script

var strdate = pyear + '/' + pmonth + '/' + pday;

参考サイト

ホームページ制作カテゴリの最新記事

目次

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る