ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

【JS】【wordpress】google feed APIを代替する方法

【JS】【wordpress】google feed APIを代替する方法

google feed API遂に廃止か?!

サポート部の山本です。

先週大きなニュースがありました。

google feed APIが動かなくなっているということです。。。

正確には、廃止したのかはわかりませんが以前にも一旦廃止され、その後復旧するということがありました。
復旧するかもしれないという可能性に懸けるのも一つですが
この際別の方法で実装するのが良いかと思います。

ということで今回は代替方法をご案内します!


HTMLとJSを使い実装していきます。
コピペしていただくだけで、ブログなどのフィードを表示させられます。
wordpressのアイキャッチに設定している画像も出せます。

以下実装方法をご案内します。

表示させる条件として、サイトとブログなどのドメインが同じであることと
Wordpressをお使いいただいていることがございますので、ご注意ください。

別のドメインや複数表示させる方法は、別の機会で書こうと思います。

ステップ1:head内の記述

記事を表示させたいページのhead内に以下のコードを記述します。
※下記の「フィードのURL」にはブログのRSSフィードのURLを入れてください。

<!-- ニュースRSSフィード取得 -->
<script type="text/javascript">
$(function() {
    var setURL = 'フィードのURL'; //feedのURL
    var setNUM = 8; //表示件数
    var setID = 'feed'; //表示させる箇所のID
    xmlLoad(setURL,setID,setNUM);
});
function xmlLoad(_xmlUrl,_id,_num){
    DD = new Date();HH = DD.getHours();MM = DD.getMinutes();SS = DD.getSeconds();
    var xmlUrl = _xmlUrl+"?"+HH+MM+SS;  //キャッシュ対策のクエリを付与
    var main = this;
    $.ajax({
    url: xmlUrl,
    type: 'GET',
    dataType: 'xml',
    timeout: 10000,
    error: function(){
        _msg = 'error';
        xmlOpen(_msg,_id,_num);
    },
    success: function(_xml){
        main.xml = _xml;
        _msg = 'load';
        xmlOpen(_msg,_id,_num);
    }
    });
    return;
}
var xmlOpen = function(_msg,_id,_num){
    var main = this;
    var html = '';
    var ID = _id;
    var Num = _num;
    var userAgent = window.navigator.userAgent.toLowerCase();
    if(_msg == 'load'){
        xml = main.xml;
        var channelData = $(xml).find('channel')[0];
        $(channelData).find('item').each(function(i){
            if(i < Num){
            postTitle = $(this).find('title').text();//記事タイトル取得
            postLink = $(this).find('link').text();  //記事リンク取得
            //日付の取得
            publishedDate = $(this).find('pubDate').text();
            var pdate = new Date(publishedDate); //Dateクラス
            var pyear = pdate.getFullYear();   //年
            var pmonth = pdate.getMonth() + 1; //月
            var pday = pdate.getDate();        //日
            //日付を2桁表示に変更
            if (pyear < 2000) pyear += 1900;
            if (pmonth < 10) {pmonth = "0" + pmonth;}
            if (pday < 10) {pday = "0" + pday;}
            var postDate = pyear + "." + pmonth + "." + pday + " ";
            //サムネイル画像の取得
            var description = $(this).find('description')[0].firstChild.nodeValue;
            var thumbnails = description.match(/<img[^>]+>/gi);
            thumbnail = thumbnails[0];
            //html生成
html += '<li class="rss-thumbnail">';
html += '<p><a href="' + postLink + '">' + thumbnail + '</a></p>';
html += '<div class="meta">';
html += '<span class="date">' + postDate + '</span>';
html += '<div class="tit"><a href="' + postLink + '">';
html += '<span>' + postTitle + '</span>';
html += '</a></div>';
html += '</div>';
html += '</li>';
            }
        });     
    }else{
        //エラー時の表示
        html += '<li>通信エラー</li>';
    }
    $("#"+ID).html(html);
}
</script>
<style>.rss-thumbnail .date{display:none;}</style>

ステップ2:HTMLの記述

ページ上のRSSを表示させたい場所(body内)に以下を記述します。

<ul id="feed"></ul>

終わりに

以上で完了です。

今後も便利な機能を提供してくれることにgoogleには期待したいですが
今回のように、サービスが廃止されることもあります。

ブログなどを提供されている方にとって
記事の表示はかなり重要です。

弊社も柔軟に対応して、ご案内していければと思います。

                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

未分類カテゴリの最新記事