▲PAGE TOP

自分のホームページに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を入力する
  • 12 は表示件数の設定部分です。16にすると16件を表示します。
  • 【重要】newarrivals で id分けをして、このfeedだけにこのstyleが適用される指定をします



COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)