バズブーストを利用する為に、まず管理画面>集客支援>バズブーストをクリックします。必要事項にチェックをした後に、”有効にする”ボタンをクリック。次にバズブーストコードをコピーし、表示させたいHTMLサイトに貼り付けます。バズブーストに、あなたの設定したフィードのヘッドラインが表示されているかどうかをブラウザーで確認してください。(あなたの設定どおり、記事の抜粋や更新日時が正しく表示されているかについてもあわせてご確認ください。)
最終的に表示されるあなたのバズブーストは、 ID と クラス項目により規定されています。その為、Cascading Style Sheets(CSS)を利用してデザインを自由に設定することができます。
これが詳細なアウトプットコードとスタイル指定の為のTIPS(ヒント)です。バズブースト利用に関する サンプルをご覧になりたい方は、こちら。
1)これが全体のコードアウトプットです。このコードブロックは1エントリーのみを表しています。しかしながら、他の多くのエントリー用にも利用することが可能です。
<div class="feedburnerFeedBlock" id="myfeeduri1234">
<p class="feedTitle">Feed Title Goes Here</p>
<ul>
<li><span class="headline"><a href="#">First item headline
here</a></span>
<p class="date">Jan 22, 2005</p>
<div>Aliquam delenit enim nostrud autem velit eum aliquip
lobortis consectetuer eum volutpat vero autem et. Tincidunt consequat
illum quis suscipit dolor nonummy in dolore.</div>
<p class="enclosure"><a href="#">Download podcast</a></p></li>
.
.
.
</ul>
<div id="creditfooter"><a href="http://www.feedburner.com" target="_blank">
<img src="http://www.feedburner.com/fb/images/buzzboost-pwrd.gif"
alt="Headlines by FeedBurner" /></a>
</div>
</div>
ここで、行ごとに細かく見てみましょう。
<div class="feedBurnerFeedBlock" id="myfeeduri1234">
様々なバズブーストのスクリプトは、このクラスを含んで構成されています。その為、あなたのサイトの様々なブロックでこのスタイルが適用できます。更に、我々は、各ブロックごとに、ユニークなIDを適用させることにより、独自のコードブロックを生成することができます。(これらIDは、FeedBurnerが提供しているUI又はURLで構成されています。)
<p class="feedTitle">Feed Title Goes Here</p>
これがあなたのフィードのタイトルです (又は、セットアップ後の独自のタイトルです)。もしあなたがセットアップの時に、”フィードのタイトルを表示させない”と設定した場合、バズブーストのアウトプットにタイトルは表示されません。尚、feedTitleと他の要素との衝突を避ける為には、CSSで以下のように設定してください。
div.feedBurnerFeedBlock p.feedTitle { color: red; }
ここの行は、簡単なので飛ばします。
<li><span class="headline"><a href="#">First item headline here</a></span>
<p class="date">Jan 22, 2005</p>
liは、最初のフィード記事を表します。この記事のヘッドラインと日時は、スタイルシートへの情報として伝える為のクラスとして表示されています。ここでもまた、衝突を避ける為に、CSSで”descendant selectors”を利用してください。日時はセットアップ時のあなたの設定により決定されます。
<div>Aliquam delenit enim nostrud autem velit eum aliquip lobortis
consectetuer eum volutpat vero autem et. Tincidunt consequat illum quis
suscipit dolor nonummy in dolore.</div>
抜粋(又は全文)テキストは、 divで囲まれています。これにより、フルHTML(<p>タグなど)による表示又は、プレーンテキストのみの表示のいずれに依存することなく、表示することができるようになります。抜粋表示は、設定時に選択した場合にのみ表示されます。(表示文字数やフォーマットは、ドロップダウンメニューで設定可能です。)
<p class="enclosure"><a href="#">Download podcast</a></p></li>
リンクを表示する為(ポッドキャストなど)には、CSSの”descendant selectors”を利用してください。ポッドキャストへのリンクは、”ポッドキャストのリンクを表示 “にチェックをした際にのみ表示されます。
<div id="creditfooter"><a href="http://www.feedburner.com" target="_blank">
<img src="http://www.feedburner.com/fb/images/buzzboost-pwrd.gif"
alt="Headlines by FeedBurner" /></a></div>
FeedBurnerへリンクされた小さな画像は、各バズブーストの下部に挿入されます。この画像は、 divの中に表示されます。その為、この画像の位置やサイズを自由に変更することが出来ます。
</ul>
</div>
以上で終了です。
バズブーストを生成する時、あなたが選択したオプションは、FeedBurnerのサーバーに保存されます。しかしながら、これらは、一つ一つ好きなように変更すことが可能です。下記のオプションは、FeedBurnerがアウトプットする <script> タグを編集することで上書きすることが可能です。
| パラメーター | 設定 |
|---|---|
| nItems | Integer; number of items to output |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&nItems=10" type="text/javascript"></script> | |
| displayTitle | true or false; outputs feed title above feed content (see below) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&displayTitle=true" type="text/javascript"></script> | |
| feedTitle | Any text; appears above your feed content if enabled |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&feedTitle=Your%20Title%20Here" type="text/javascript"></script> | |
| displayExcerpts | true or false; outputs item content according to settings (see below) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&displayExcerpts=true" type="text/javascript"></script> | |
| excerptFormat | full or plain; outputs item content as full HTML or a plain-text excerpt |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&excerptFormat=plain" type="text/javascript"></script> | |
| excerptLength | Integer (0 means all); number of words to be shown (plain text only) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&excerptLength=30" type="text/javascript"></script> | |
| displayDate | true or false; outputs item date according to settings (see below) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&displayDate=true" type="text/javascript"></script> | |
| dateLocation | above or below; positions date above or below item content |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&dateLocation=above" type="text/javascript"></script> | |
| dateFormat | MM/dd/yyyy or MMM d, yyyy or MMM d yyy or d/M/yyyy or M/d/yyyy or MMMM d, yyyy; formats item date |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&dateFormat=MM/dd/yyyy" type="text/javascript"></script> | |
| displayEnclosures | true or false; outputs a link to podcasts or other enclosed media |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&displayEnclosures=true" type="text/javascript"></script> | |
| openLinks | new; opens links in a new window (opens in same window if not new) |
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&openLinks=new" type="text/javascript"></script> | |
バズブーストでは、上書きは何回でも可能です。実際、同じセットアップ手順を踏むことなく再度全ての設定を上書きし、新しく全く違うバージョンのバズブーストを作り出すことも可能です。例えば、下記のようなコンビネーションでの上書きが可能です。
<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&openLinks=new&displayDate=
false&displayEnclosures=true&displayExcerpts=false" type="text/javascript"></script>