スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログで最新記事(画像付き)の表示、googleapiを使った。

googleapiを使った最新記事の表示です。コピペで実装できるようにサンプルソースを載せておきます。

デモページ
JAVASCRIPT
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1"); //APIを読み込みます

function initialize(){
	
	  var feed = new google.feeds.Feed("RSSのURL"); //読み込むRSSフィードを設定します
var noPhoto = ("<img src='画像がなかった場合に表示する画像のURL' />"); //画像がなかった場合に表示する画像を指定します
	
	feed.setNumEntries(5); //記事を読み込む件数を設定します
	feed.load(dispfeed);
	
  function dispfeed(result){

		if(!result.error){
			var container = document.getElementById("feed1"); //HTMLに書き出す対象のIDを指定します

			for (var i = 0; i < result.feed.entries.length; i++) {
				var entry = result.feed.entries[i];
                var entryImg = "";
				var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/); //画像のチェックをします 拡張子はここで増やします
				if(imgCheck){
					entryImg += '<img ' + imgCheck[0] + '" >';
					} else {
						entryImg += noPhoto;
				}

				container.innerHTML += '<div class="box02">' 
				+ entryImg
               	+ '<p>'
                + '<a href="' + entry.link + '">' 
                + entry.title.substring(0,14) 
                + '</a>'//タイトル
                + '</p>'
				+ '</div>';
			}

			var linkBlank = container.getElementsByTagName('a'); // targetに'_blank'を設定します。不要な場合は、以下4行を削除
			for (var j = 0, l = linkBlank.length; j < l; j++) {
				linkBlank[j].target = '_blank';
			} //target'_blank'ここまで
		}
	}
}
google.setOnLoadCallback(initialize);
</script>
<div id="feed1"class="clearfix" ></div>

CSS
#feed1 img{
  width:120px;
  height:120px;
 }
.box02{
border:2px solid orange;
position:relative;
margin:4px;
float:left;
width:120px
 }
.box02 p{
width:120px;
position:absolute;
bottom:0px;
margin:0;
background:black;
opacity:0.5;
font-weight:bold;
  color:white;
}
.box02 a{
  color:white;
  text-decoration:none;
}
.box02 a:hover{
  text-decoration:underline;
}
/*    clearfix      */

* html .clearfix {
  zoom: 1;
}

*+html .clearfix {
    zoom: 1;
}

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

パターン2
JS Bin

こんな感じになりました。この参考サイトのソースを削って、画像にタイトルを帯状に載せた、最新記事(画像付き)の表示を今回つくりました。

googleapiは少し読み込みが遅いようです・・・
関連記事

コメント


管理者のみに表示
ニューハーフ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。