外部ブログのタイトルを自分のサイトに表示させる(javascript)
- 書いた人:
- futappa_staff
- カテゴリ:
- javascript
- :
- API javascript RSS
- 12,996 views
JavaScriptをつかって外部ブログのタイトルを自分のサイトに表示させる方法を紹介します。google が提供している feed API を使えば超簡単!
こんちわ、今日はよくサイトのトップとかに他のブログの最新のタイトル表示させたりするRSS情報の取得をやってみましょう。
多くのブログでは最新の情報をRSSという形で外部に向けて発信しています。
それを取ってきて自分のサイトに表示させる、という事です。
PHPが使えれば取得が結構簡単なのですが、サーバーによってPHPが使えなかったりするので、今回はGoogleが提供しているサービスを使ってJavaScriptでやってみます。
HTML内に以下を記述
HTML(body内)
<div id="feedList"></div>
そして核になるjavascriptをHTML(HEAD内)に以下を記述
HTML(head内)
<!-- apiを読み込む --> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <!-- RSSを読み込んで、出力するスクリプト --> <script type="text/javascript"> //APIのメジャーバージョン(安定版)を指定 google.load("feeds", "1"); function initialize() { //ブログなどのURL設定 var feed = new google.feeds.Feed("https://taneppa.net/feed/"); // 読み込み件数を設定 var postcount = 3; //出力内容を空っぽに初期化 var htmlstr = ""; //HTML内のdiv#feedListを取得 var container = document.getElementById("feedList"); feed.load(function (result){ if (!result.error){ for (var i = 0; i < postcount; i++) { //記事を一つ取得 var entry = result.feed.entries[i]; //出力内容にタイトルを入れる htmlstr += '<h3 class="posttitle"><a href="' + entry.link + '">' + entry.title + '</a></h3>'; //出力内容に日付けを入れる htmlstr += '<p class="postdate">' + entry.publishedDate + '</p>'; } //HTML内のdiv#feedListの中に出力 container.innerHTML = htmlstr; } }); } //HTMLファイルが読み込まれたときに上記のfunction initializeのスクリプトを実行 google.setOnLoadCallback(initialize); </script>
■//ブログなどのURL設定 のところ”https://taneppa.net/feed/”の代わりに自分が表示させたいブログのRSSを記入します。
たねっぱでいうと、グローバルナビにあるTwitterアイコン横の「電波出てるみたいなボタン」(Twitterのマークの横)のリンク先URLを使用します。
右クリックで、Firefoxの場合は「リンクのURLをコピー」、IEの場合は「ショートカットコピー」
■//読み込み件数を設定 のところで表示する件数を指定します
なんか、パッと見たところよくわからんスクリプト…って思うかもしれません。
しかし、よくコメント部分を見てみるとやってる事は簡単です。
スクリプトを見ればわかりますが、タイトルはh3タグ、日付はpタグで囲われています。なのでCSSで見た目も変えれますね。
★出力結果★タイトルと日付が表示されます↓
もっと、記事の本文とかも表示したいって方は以下サイトを参考にしてください。(日付表記の変更などもあります)
参考:Google AJAX Feed API入門
http://www.ajaxtower.jp/googleajaxfeed/
今回は簡易に書いてますが本当は細かく書いた方が良いです。(エラーが出たときなど)。全部↑の参考サイトに書いてますので、もっとちゃんと勉強したい方は見てください。
関連記事:PHP版!外部ブログのタイトルを自分のサイトに表示させる