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

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

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

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

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

Java Script

   <script type="text/javascript" src="https://www.google.com/jsapi"></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&#91;i&#93;;
               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 type="text/javascript" src="https://www.google.com/jsapi"></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&#91;i&#93;;
                  // 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 type="text/javascript" src="https://www.google.com/jsapi"></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&#91;i&#93;;
                  // 日付取得
                  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」などと表記しておりますが全て同一のことです。


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