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には期待したいですが
今回のように、サービスが廃止されることもあります。
ブログなどを提供されている方にとって
記事の表示はかなり重要です。
弊社も柔軟に対応して、ご案内していければと思います。