Site Alert(サイトアラート)

キーワードで検索した動画をWEBサイトに表示

今回は、Site Alert(サイトアラート)TOPの右カラムに表示している動画の紹介です。せっかくなので導入方法についても簡単に説明したいと思います。

Google社が提供している「Google AJAX Search API」の「Video Bar」を利用しています。Google社では他にもAJAXを利用した様々なAPIを提供していますが、今回は「Video Bar」を利用しました。

これは、Google Video(Youtube)の動画を特定キーワードで検索した結果をWEBサイトの画面に表示及びその場で再生するAPIです。

なお、Site Alert(サイトアラート)上では、「監視」というキーワードで動画検索して表示してあります。

導入方法

導入は極めてカンタンです。

Google AJAX Search API (Beta) Video Bar Wizardをクリックして画面を表示してください。

1. vertical(垂直)デザインかhorizontal(水平)デザインで表示するかをチェック
2. Search Expression(検索キーワード)を入力
3. 「Preview video bar」ボタンを選択して、表示方法を事前確認
4. 「Site URL」にvideo barを表示したいサイトのURLを入力(ドメインで問題なし)
5. 「Generate Code」ボタンを選択。

画面内にjavascriptのコードが表示されるので、ホームページにコピー＆ペーストして導入完了です。

その他・メモ

よく利用される（と思う）調整方法を記載しますので、WEBデザイン的にそのままでの導入が難しい場合は、以下を参考に生成されたjavascriptのソースコードを修正してみてください。

• divのidが「videoBar-bar」の箇所に検索結果の動画一覧が表示されます。WEBデザインに合わせて移動させる事ができます。
• divのidが「videoBar-player」の箇所に「videoBar-bar」に表示された動画が選択された場合に、その動画を再生する場所になるので、同じくWEBデザインに合わせて移動させる事ができます。
• javascriptのfunction「LoadVideoBar()」のオプション「largeResultSet」をfalse/trueを変更すると、一覧表示する動画の数(true;10個,false4個)を制御できます。
• CSSの「videoBar-player」のwidthとheightを調整する事で、「videoBar-player」で表示する動画のサイズを調整できます。

ソーシャルブックマークに登録する　→　

トラックバック

トラックバックURL：
http://site-alert.net/mt335/mt-tb-sa.cgi/5