YouTube動画へのリンクを作成
freoのオプション機能とYouTubeのAPIで、YouTube動画のサムネイル画像付きリンクのサンプルを作成してみました。わざわざ動画をiframeで記事内に表示するのもどうかと！？
オプション管理の設定
オプション管理→オプション登録へ進んで
- オプションID
- y1
- オプション名
- YouTube-動画タイトル
- 利用対象
- 全て
- 種類
- 一行入力
- 必須
- 任意
で登録します。このオプションが、YouTube動画のタイトル入力欄となります。
上記と同様に
- オプションID
- y2
- オプション名
- YouTube-動画id
- 利用対象
- 全て
- 種類一行
- 入力
- 必須
- 任意
で登録します。このオプションが、YouTube動画のid入力欄となります。
htmlテンプレートの編集
編集するhtmlテンプレート(任意)
- templates/internals/default/default.html
- templates/internals/view/default.html
- templates/internals/page/default.html
上記のYouTube動画へのリンクを表示させたい場所に、以下のソースを追加します。
templates/internals/default/default.html(記事一覧表示)
<!--{if $entry_associates[$entry.id].option.y1 !='' && $entry_associates[$entry.id].option.y2 !=''}-->
<h4>YouTube動画リンク</h4>
<table summary="オプション">
<caption>YouTube動画リンク</caption>
<tr>
<th><a href="http://www.youtube.com/watch?v={$entry_associates[$entry.id].option.y2}">{$entry_associates[$entry.id].option.y1}</a></th>
<td><a href="http://www.youtube.com/watch?v={$entry_associates[$entry.id].option.y2}"><img src="http://i.ytimg.com/vi/{$entry_associates[$entry.id].option.y2}/default.jpg" width="120" height="90" alt="img" title="YouTube Thumbnail" /></a></td>
</tr>
</table>
<!--{/if}-->
templates/internals/view/default.html(個別記事表示)
<!--{if $entry_associate.option.y1 !='' && $entry_associate.option.y2 !=''}-->
<h4>YouTube動画リンク</h4>
<table summary="オプション">
<caption>YouTube動画リンク</caption>
<tr>
<th><a href="http://www.youtube.com/watch?v={$entry_associates.option.y2|nl2br}">{$entry_associate.option.y1|nl2br}</a></th>
<td><a href="http://www.youtube.com/watch?v={$entry_associates.option.y2|nl2br}"><img src="http://i.ytimg.com/vi/{$entry_associate.option.y2|nl2br}/default.jpg" width="120" height="90" alt="img" title="YouTube Thumbnail" /></a></td>
</tr>
</table>
<!--{/if}-->
templates/internals/page/default.html(ページ個別表示)
<--{if $page_associate.option.y1 !='' && $page_associate.option.y2 !=''}-->
<h4>YouTube動画リンク</h4>
<table summary="オプション">
<caption>YouTube動画リンク</caption>
<tr>
<th><a href="http://www.youtube.com/watch?v={$page_associates.option.y2|nl2br}">{$page_associate.option.y1|nl2br}</a></th>
<td><a href="http://www.youtube.com/watch?v={$page_associates.option.y2|nl2br}"><img src="http://i.ytimg.com/vi/{$page_associate.option.y2|nl2br}/default.jpg" width="120" height="90" alt="img" title="YouTube Thumbnail" /></a></td>
</tr>
</table>
<!--{/if}-->
各ソースの先頭行では、他のoption指定があった場合での表示の調整をしています。
オプションの一覧を表示部分には、表示させない様にする。
この様な感じで他にオプション項目が存在し、上記を例とすればy1とy2オプションを一覧には表示させたくないと言った場合は以下の様にhtmlテンプレートを変更して下さい。
templates/internals/default/default.html(記事一覧表示)
デフォルトではテンプレートの126行目辺りにある
<!--{if $entry_associates[$entry.id].option[$option.id] != ''}-->
を
<!--{if $entry_associates[$entry.id].option[$option.id] != '' && $option.id !='y1' && $option.id !='y2'}-->
に変更して下さい。
templates/internals/view/default.html(記事個別表示)
デフォルトではテンプレートの60行目辺りにある
<!--{if $entry_associate.option[$option.id] != ''}-->
を
<!--{if $entry_associate.option[$option.id] != '' && $option.id !='y1' && $option.id !='y2'}-->
に変更して下さい。
templates/internals/page/default.html(ページ個別表示)
デフォルトではテンプレートの47行目辺りにある
<!--{if $page_associate.option[$option.id] != ''}-->
を
<!--{if $page_associate.option[$option.id] != '' && $option.id !='y1' && $option.id !='y2'}-->
に変更して下さい。
※オプションを増やす場合などは、
～option[$option.id] != ''
以降に、
&& $option.id !='オプション名'
をその都度、追加して下さい。
これで上記で追加、設定したオプションid(y1とy2)の時は、表示させない様に出来ます。
記事の作成
記事を書いて、オプション入力欄のYouTube-動画タイトルに、動画のタイトルをYouTube-動画idに、動画のidを入力します。
※動画のidは、http://www.youtube.com/watch?v=○○○の、○○○の部分です。
これでリンク切れ以外では、サムネイル画像が表示されていると思います。
サムネイル画像の変更
http://i.ytimg.com/vi/動画id/default.jpg
<img src="http://i.ytimg.com/vi/{$entry_associates[$entry.id].option.y2|nl2br}/default.jpg" width="120" height="90" alt="img" title="YouTube Thumbnail" />
のdefault.jpgを0.jpgに変更すると480px×360pxの画像が表示されます。その際はwidthとheightの指定も変更する。
応用
一覧表示には表示させないで、個別記事の最後に表示させる場合。続き(?continue=1)がある場合も記事の最後に表示させる。
templates/internals/default/default.html(記事一覧表示)は、デフォルトのまま(変更せず)で、 templates/internals/view/default.html(記事一覧表示)の38行目辺りの
<div id="continue">
{$entry_text.more|smarty:nodefaults}
</div>
次の行(41行目)に
<!--{if $entry_associate.option.y1 !='' && $entry_associate.option.y2 !=''}-->
<h4>YouTube動画リンク</h4>
<table summary="オプション">
<caption>YouTube動画リンク</caption>
<tr>
<th><a href="http://www.youtube.com/watch?v={$entry_associates.option.y2|nl2br}">{$entry_associate.option.y1|nl2br}</a></th>
<td><a href="http://www.youtube.com/watch?v={$entry_associates.option.y2|nl2br}"><img src="http://i.ytimg.com/vi/{$entry_associate.option.y2|nl2br}/default.jpg" width="120" height="90" alt="img" title="YouTube Thumbnail" /></a></td>
</tr>
</table>
<!--{/if}-->
を追加し、 41行目辺りの
<!--{else}-->
<p><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}?continue=1#continue" title="No.{$entry.id}の続き">続きを読む</a></p>
<!--{/if}-->
の次の行に
<!--{else}-->
<!--{if $entry_associate.option.y1 !='' && $entry_associate.option.y2 !=''}-->
<h4>YouTube動画リンク</h4>
<table summary="オプション">
<caption>YouTube動画リンク</caption>
<tr>
<th><a href="http://www.youtube.com/watch?v={$entry_associates.option.y2|nl2br}">{$entry_associate.option.y1|nl2br}</a></th>
<td><a href="http://www.youtube.com/watch?v={$entry_associates.option.y2|nl2br}"><img src="http://i.ytimg.com/vi/{$entry_associate.option.y2|nl2br}/default.jpg" width="120" height="90" alt="img" title="YouTube Thumbnail" /></a></td>
</tr>
</table>
<!--{/if}-->
として下さい。
その他
- オプション名は、分かりやすい様に変更して下さい。
- 動画のタイトルいらないよ、って方は上記y1の部分の設定を全て省くと良いです。
- y1とy2の対を、増してhtmlテンプレートに行けば複数のサムネイルを表示出来ます。
- その他ウェブサービスのAPIで画像を取得出来るものであれば、ニコニコ動画とか、私の別ブログでやっていますがamazon商品リンクとかに応用出来ます。
- 後はjQueryプラグインを使ってみるとか。
- リンク切れを考慮すれば、JavaScriptで書いた方が良かったかも知れません:-(