TrendTube/トレンドチューブ

人気のキーワードで見るYouTube動画まとめ~サイトを彩る登録不要・簡単設置の無料ブログパーツ

登録不要・無料ブログパーツ

ブログパーツ:関連動画

自身のサイトやブログの任意の場所にスクリプトコードをコピペするだけで、簡単にYouTube動画を掲載できる各種ブログパーツをご提供しています。

設置場所の横幅100%で表示しますので、メインカラムでもサイドカラムでも、レイアウトを崩すことなくキレイに掲載できます。また、設置ページを離脱することなく動画再生できますので、滞在時間の延長によるSEO対策にもなります。

登録不要・無料でご利用いただけますので、お気軽にお試しください。

特徴・サンプル・設置方法

任意のキーワードに関連するYouTube動画をランダムに8件掲載できます。また、キーワードを指定しない場合、設置ページの「meta keywords」を解析して自動的に表示します。

  • 各動画リスト(例えば、夏目漱石)の下部に【設置スクリプトコード】を表示していますので、コピペすると、次のように表示します。

便利な使い方

ブログ記事に設定する「タグ」を利用して、各記事毎に関連動画を自動表示させるカスタマイズをご紹介いたします。タグに自動的に連動しますので、一度の設置で、各記事毎に関連動画を表示できるカスタマイズとなります。

なお、YouTubeの検索キーワードは「2ワード」程度がヒットしやすい傾向にありますので、ブログ記事に複数タグが設定されている場合、前方2ワードをYouTube検索キーワードに割り当てるようにしてみました。

FC2ブログの場合

利用者数が最も多い人気のブログサービス「fc2ブログ」の『ユーザータグ』に「YouTube関連動画」を自動表示するカスタマイズです。

テンプレートの設定を開き『<%topentry_body>』の下に以下を追記します。テンプレートに下記ソースを設定しておけば、投稿記事(ユーザータグ)に関連した動画リストを、記事下に関連動画として自動的に表示できます。fc2ブログをご利用の方は、ぜひお試しください。

<!--------
▼関連動画
--------->
<!--topentry_tag-->
<h3>関連動画</h3>
<script>
var tag = [<!--tag_list-->'<%topentry_tag_list_parsename>',<!--/tag_list-->];
var q = tag[0];
if(tag[1] != undefined){
var q = tag[0]+' '+tag[1];
}
document.write('<script charset="utf-8" src="https://trendtube.wdeco.jp/api/type2/?query='+encodeURIComponent(q)+'"><\/script>');
</script>
<!--/topentry_tag-->
<!--------
▲関連動画
--------->

SeeSaaブログの場合

Seesaaブログでは、タグのことを『ラベル』といいますが、言い方が違うだけでタグと全く同じ意味です。

  1. 管理ページの【デザイン】→【CSS/HTML編集】
  2. テンプレートのリストが表示されますので、利用するテンプレート名(デザインタイトル)をクリック
  3. 【HTML編集】に切り替えて『<div class="Article__content"><% article.entire_body | bodyfilter(article_info,blog) | mark_raw -%></div>』を見つけてください。
  4. 3のコード直下に下記のコードをコピペして保存すれば完成です。
<!--------
▼関連動画
--------->
<% if:list_tag -%>
<h3>関連動画</h3>
<script>
var tag = [<% loop:list_tag -%>'<% tag.word -%>',<% /loop -%>];
var q = tag[0];
if(tag[1] != undefined){
var q = tag[0]+' '+tag[1];
}
document.write('<script charset="utf-8" src="https://trendtube.wdeco.jp/api/type2/?wuery='+encodeURIComponent(q)+'"><\/script>');
</script>
<% /if -%>
<!--------
▲関連動画
--------->

なお、Seesaaブログのラベルは、あいうえを順に並べ替えられるようですので、思い通りに前方2ワードを指定できない場合があります。工夫してラベルワードを設定しましょう。

ライブドアブログの場合

【ブログ設定】→【カスタマイズ】タブ→【個別記事ページ】タブにて『<$ArticleBody$>』タグ内の任意の場所に以下を追記します。

<IfHasArticleTags>
<!--------
▼関連動画
--------->
<h3>関連動画</h3>
<script>
var tag = [<ArticleTagsLoop>'<$ArticleTag$>',</ArticleTagsLoop>];
var q = tag[0];
if(tag[1] != undefined){
var q = tag[0]+' '+tag[1];
}
document.write('<script charset="utf-8" src="https://trendtube.wdeco.jp/api/type2/?query='+encodeURIComponent(q)+'"><\/script>');
</script>
<!--------
▲関連動画
--------->
</IfHasArticleTags>
© TrendTube All Right Reserved.