> > 自分のホームページにfeedで読み込んだ情報（新しい商品情報など）をサムネイルで表示する方法

2012年1月3日火曜日

自分のホームページにfeedで読み込んだ情報（新しい商品情報など）をサムネイルで表示する方法


自分のホームページにfeedを取り込んで、サムネイル画像のように表示する方法です。
このやり方で、おちゃのこネットのRSSから取り込んだfeedをfeedburnerのBazz Booster経由で自分のホームページに新商品情報などを掲載できます。
  • FeedBurner - Google にアクセスし、webmaster@****.comのgoogleアカウントでログインする
  • ”新しいフィードを登録！”にて feedのURL　http://www.＊＊＊.com/feeds/post/default )　を入力して、”次へ”をクリックする ＊＊＊には公式サイトのURLを入力する を入力して、”次へ”をクリックする
  • 適当に情報を入力して、登録を完了させる
  • feedBurnerのMYフィード　に戻り、登録したフィードをクリックする
  • 集客支援　＞　バズ・ブースト　をクリックする
  • バズ・ブーストのフィード設定を以下のとおりに設定して、”有効にする”をクリックする
    • 最新何記事まで表示:　12件　あとでHTMLにて設定可能です  
    • リンク先表示方法  　同じウィンドウで開く　を選ぶ
    •  フィード名を表示　チェックをしない
    •  faviconの表示  チェックをしない
    •  記事の所有者を表示します　チェックをしない
    •  記事内容を表示　チェックして、「HTML形式で表示」を選ぶ
    •  記事発行日を表示　 チェックをしない 　
    •  ポッドキャストのリンクを表示　 チェックをしない
    •  フィードへのリンクを表示　 チェックをしない
  • クリック後、フォーム内のコードをコピーする
下の動画でも同じ作業を確認できます。



Bloggerの設定
  • Bloggerダッシュボード　＞　レイアウト　＞　HTML/JavaScript の設定　を選ぶ
  • 以下のコードを入力して保存する
///////////// HTML ////////////////////
<style>
#newarrivals .feedburnerFeedBlock ul li {
padding: 9px;
list-style-type: none;
}
#creditfooter {
display: none;
}
#newarrivals .feedburnerFeedBlock img {
width: 160px ;
}
#newarrivals .feedburnerFeedBlock li {
width: 100px;
height: 140px ;
overflow: hidden;
text-overflow: clip;
float: left;
font-size: 9px;
line-height:1.3 ;
text-align: left;
} 
</style>

<table cellpadding=3 cellspacing=1 width=540 bgcolor=#487235>
<tr><td>
<table width=100% cellpadding=0 cellspacing=0><tr><td>
<font color=#ffffff size=2><b>New Arrivals</b></font>
</td><td align=right><font size=-2 color=#f3fcc1>商品画像をクリックすると別ウィンドウで開きます</font>
</td></tr></table>
</td></tr>
<tr bgcolor=#b1c255><td align=center>
<table width=500 cellpadding=0 cellspacing=0><tr><td>
<div class="feedBurnerFeedBlock" id="newarrivals">
<script src="http://feeds.feedburner.com/*******?format=sigpro&nItems=12" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/CanadianVintage"></a><br/>Powered by FeedBurner</p> 
</noscript></div>
</td></tr></table>
</td></tr></table>

///////////// HTML ////////////////////
  • <style></style>内でCSSにより表示を設定する
  • bgcolor=#487235　など色は任意で設定する
  • *******にはfeedburnerで割り当てられたURLを入力する
  • １２　は表示件数の設定部分です。16にすると16件を表示します。
  • 【重要】newarrivals で id分けをして、このfeedだけにこのstyleが適用される指定をします

0 コメント:

コメントを投稿