Blogger beta の Widget 追加ボタンの作り方

Blogger Help をウロウロしていて見つけたページ。

Blogger beta には、自作の Widget をほかのユーザーに簡単に導入してもらうための仕組みが用意されているとのこと。どうやら新しい機能のようです。世界中で様々な自作 Widget が出てきそうな予感。

まだ日本語化されていないようなので…、最初のページの大事そうなところだけ訳してみました。あいかわらずの拙い訳ですが、必要な方はどうぞ。

ウィジェット追加ボタン

まず最初にウィジェットを作成しておきます。その後、自作ウィジェットの内容やオプション情報を Blogger に送るためのフォームをウェブサイトに作ります。Blogger beta ユーザーがあなたのページでその「送信」ボタンを押すと、自身のブログにウィジェットを追加するページに飛ぶ、というわけです。

たとえば、Blogger Buzz へのリンクを表示するだけのウィジェットだとこんな感じ。（いきなりウィジェットが追加されるわけではないので、試しに押してみて下さい。）

このボタンはコードで示すと

<form method="POST" action="http://beta.blogger.com/add-widget">
  <input type="hidden" name="widget.title" value="Blogger Buzz"/>
  <input type="hidden" name="widget.content" value="<a href='http://buzz.blogger.com/'>Read the Latest Blogger News!</a>"/>
  <input type="hidden" name="widget.template" value="<data:content/>" />
  <input type="hidden" name="infoUrl" value="http://buzz.blogger.com"/>
  <input type="hidden" name="logoUrl" value="http://www.blogger.com/img/icon_logo32.gif"/>
  <input type="submit" name="go" value="Add Blogger Buzz Widget"/>
</form>

となります。

フォーム詳細情報

ウィジェット追加ボタンのフォームで用いられる項目の詳細は、次のとおりです。

form action="http://beta.blogger.com/add-widget"
（必須）このフォームはアクションに指定された URL にデータを送信します。method は POST が推奨。ウィジェット自体が小さければ GET でも可です。
widget.title
（オプション）ユーザーがレイアウトを変更するときに表示されるウィジェットのタイトルです。100 文字まで。HTML も使用可です。
widget.content
（必須）ユーザーのブログに表示される、ウィジェットの実際の内容です。<html> と <body> とを除いた全てのコードが利用可能。ただし、たとえばリンクなら <a> ではなく <a> という風にエスケープする必要があります。
widget.template
（オプション）ウィジェットのテンプレートです。ウィジェットタグのガイドラインにしたがってください。ここではグローバルなデータタグを利用することが出来ます。ここに何も指定がないときには、<data:title/> <data:content/> のデータタグが指定され、ウィジェットタイトルと内容とがそのまま表示されるウィジェットになります。
infoURL
（オプション）ウィジェットの説明や、追加情報を記載したページの URL を指定することが出来ます。これはウィジェットを追加する画面の「more info」（日本語では「ヘルプ」）リンクとして表示されます。
logoURL
（オプション）ここで指定された URL の画像が「more info」（「ヘルプ」）リンクの横に表示されます。画像の大きさは 100x100 ピクセルまで。

Flickr「子犬」タグの写真を表示させるウィジェット

基本的なボタンの作り方がわかったところで、もう少し面白い例を。下のボタンは、Flickr に新しく登録された「子犬」タグの写真をブログに表示するウィジェットを追加するもの。

コードで示すとこんな感じです。

<form method="post" action="http://beta.blogger.com/add-widget">
  <input type="hidden" name="infoUrl" value="http://flickr.com"/>
  <input type="hidden" name="logoUrl" value="http://www.flickr.com/images/flickr_logo_gamma.gif"/>
  <input type="hidden" name="widget.title" value="Puppies!"/>
  <textarea name="widget.content" style="display:none;">
    <div id='flickr_badge_wrapper'>
    <script type='text/javascript'
    src='http://www.flickr.com/badge_code_v2.gne?show_name=1&
    count=3&display=latest&size=t&layout=x&source=all_tag&
    tag=puppy'></script>
    <span id='flickr_badge_source_txt'>More
    <a href='http://www.flickr.com/photos/tags/puppy/'>
    Flickr photos tagged with puppy</a></span>
    <br clear='all' /></div>
  </textarea>
  <input type="hidden" name="widget.template" value="<data:content/>" />
  <input type="submit" name="go" value="Add Puppy Photos"/>
</form>

普通は、Flickr でバッジコードを得て、それを Blogger beta の HTML/JavaScript ウィジェットに入れるという登録方法をとるのですが、このようなボタンを作ることで同じことをしたがっている別のユーザーにも、簡単にウィジェットが追加してもらえるというわけです。

追記

あなたのウィジェット追加フォームで画像ボタンを使いたい場合には、次の画像を利用してください。

http://www.blogger.com/img/add/add2blogger_sm_w.gif

http://www.blogger.com/img/add/add2blogger_sm_b.gif

http://www.blogger.com/img/add/add2blogger_lg.gif

クリボウ補足

補足１ … このウィジェット追加フォームで追加できるウィジェットは、HTML/JavaScript ウィジェットです。他のウィジェットを拡張したようなウィジェットは、このフォームでは追加できないので注意が必要です。

補足２ … この記事ではボタンボタンといっていますが、たとえばタイトルを入力してもらうテキスト入力部をウィジェットフォーム内に作るということも可能です。input は name が一致していれば hidden でなくていい、というわけ。「Puppy Photos」のように textarea でもいいですし。

補足３ … フォームの送信ボタンを画像にする場合には、

の代わりに

のように書くといいです。

うーん、あまり原文に忠実には翻訳できませんでした…。日本語されたら本物のヘルプを必ずご確認下さいませ。

スポンサードリンク：

お願い：

「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　