Favicon をコメント・トラックバックに表示する
Favicon 設置に続いて、コメント・トラックバック欄に Favicon を表示するカスタマイズです。多くのテンプレートユーザの方がカスタマイズ記事をエントリーされていますが、具体的な動作についても調べてみました。
現在動作確認のため、コメント・トラックバック欄に Favicon を表示させています。
参考・ご利用サイトはすでにたくさんあるようですが代表で、
- やむやむ：コメント・トラックバック欄にファビコンを表示
- （きっかけはcaramel*vanilla：Organic HTMLのコメント欄）
を紹介させて頂きます。ありがとうございました。
以下、カスタマイズ方法です。
１．プラグインのダウンロード
Favicon プラグインをリリース元である下記のサイトよりダウンロードします。
上記のページの本文中の「Installation」 と書かれたすぐ下にある favicon.zip のリンクをクリックして保存します。
ダウンロードした favicon.zip を解凍し、下記のような構成になっていることを確認してください。
- plugins/favicon.pl
- tmpl/cms/favicon.tmpl
- mt-favicon.cgi
２．パスの修正
mt-favicon.cgi を任意のエディタで開き、1行目の
#!/usr/local/perl/bin/perl -wを下記のように修正します（これを行わないと６項の作業で500エラーになります）。
#!/usr/bin/perl -w３．プラグインのアップロード
これは CGIPath（mt.cgi が置かれたディレクトリ）を基準としたディレクトリ構成になっていますので
それぞれのディレクトリ配下に favicon.pl / favicon.tmpl / mt-favicon.cgi をアップロードしてください。
mt-favicon.cgi はパーミッションを 755 / 700等に変更してください。
４．テンプレート修正
公式サイトに掲載されているタグを、個別アーカイブ／コメント・プレビュー／コメント・エラー
に表示されるようにします。
４．１ 個別エントリーアーカイブに表示
コメント欄に Favicon を表示する場合、コメント投稿者欄（下記）に青色部分を追加します。下はデフォルトテンプレートへの追加例です。
<MTComments>
<div id="c<$MTCommentID$>">
<$MTCommentBody$>
</div>
<p class="posted">投稿者
<MTFaviconCommentIfAvailable>
<img src="<MTFaviconComment>" alt="Site icon" title="Site icon" class="favicon" />
</MTFaviconCommentIfAvailable>
<$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity>
: <$MTCommentDate$></p>
</MTComments>下は公開テンプレートへの追加例です。
<MTComments>
<a id="c<$MTCommentID$>" name="c<$MTCommentID$>"></a>
<div class="comments-body">
<$MTCommentBody$>
<div class="comments-post">
Posted by
<MTFaviconCommentIfAvailable>
<img src="<MTFaviconComment>" alt="Site icon" title="Site icon" class="favicon" />
</MTFaviconCommentIfAvailable>
<$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity> at <$MTCommentDate$></div>
</div>
</MTComments>コメント・プレビューに表示する場合もほぼ同じです。青色のタグを使えるのは MTComments タグで括られている部分のみです。
次に、トラックバック欄に Favicon を表示する場合、トラックバック表示欄（下記）に青色部分を追加します。下はデフォルトテンプレートへの追加例です。
<MTPings>
<p id="p<$MTPingID$>">
» <a href="<$MTPingURL$>"><$MTPingTitle$></a> from
<MTFaviconTrackbackIfAvailable>
<img src="<MTFaviconTrackback>" alt="Site icon" title="Site icon" class="favicon" />
</MTFaviconTrackbackIfAvailable>
<$MTPingBlogName$><br />
<$MTPingExcerpt$> <a href="<$MTPingURL$>">[続きを読む]</a>
</p>
<p class="posted">トラックバック時刻: <$MTPingDate$></p>
</MTPings>下は公開テンプレートへの追加例です。
<MTPings>
<div class="comments-body">
<p id="p<$MTPingID$>">
» <a href="<$MTPingURL$>"><$MTPingTitle$></a> from
<MTFaviconTrackbackIfAvailable>
<img src="<MTFaviconTrackback>" alt="Site icon" title="Site icon" class="favicon" />
</MTFaviconTrackbackIfAvailable>
<$MTPingBlogName$><br />
<$MTPingExcerpt$> <a href="<$MTPingURL$>">[続きを読む]</a>
</p>
<div class="comments-post">Tracked on <$MTPingDate$>
</div>
</div><!-- comments-body -->
</MTPings>青色のタグを使えるのは MTPings タグで括られている部分のみです。
５．スタイルシートの追加
スタイルシート（styles-site.css）に下記を追加します。これは Favicon の位置調整のためのものです。
.favicon {
vertical-align:middle;
}６．プラグインの確認
 Movable Type のメイン・メニューのプラグイン欄に表示されている "Favicon" をクリックすると管理画面に遷移します。プラグインを入れただけの状態では Favicon はひとつも登録されていません（左）。 |
 ５項（厳密には４項）までの設定の後、個別エントリーアーカイブを再構築し、再び同じ画面を開くと、Favicon のリストが表示されます（左）。コメント・トラックバックのあったサイトから favicon.ico が取得できれば Favicon と URL が表示されます。取得できなかった場合はURLのみが表示されます。「remove」をクリックして取得したキャッシュを削除することも可能です（削除後何故かエラーになりますがブラウザを更新すると正常に削除されているようです）。
なおエントリーへのコメントやトラックバックが大量にある場合、プラグインをいれた初回の再構築にはかなり時間がかかりますのでご注意ください。当サイトで試したところ、自宅サーバであるにもかかわらず500エラーになりました。 |
７．Favicon を早く取得するには
Favicon プラグインはコメント・トラックバック元のサイトを検索して favicon.ico を取得し、キャッシュに保存しています。取得する契機はプラグイン管理画面の更新ではなく、埋め込んだタグが動作した時、つまり再構築された時です。また再構築毎に取得するのではなく、一定の周期で取得するように制御されています。このため、相手サイトの Favicon 公開タイミングによってはすぐに自サイトに Favicon が反映されない場合があります。
Favicon を早く取得するには、プログラムに書かれた取得周期を一時的に変更します。以下変更方法です。
取得周期は favicon.pl の中に
my $page_cache = 60*60*24*7;と書かれている行があり、60（秒）×60（分）×24（時間）×7（日）、つまり一週間周期で取得しています。繰り返しになりますが、この周期では Favicon プラグインを設定しても相手サイトの Favicon 設置タイミングによっては、最大7日間近く表示されないことになります。
ということで、favicon.pl の該当行を
my $page_cache = 10;ぐらい（=10秒）に修正してアップロードし、個別エントリーアーカイブを再構築します。なお favicon.ico を取得する動作はかなり負荷がかかりますので、目当ての Favicon が表示されたら値を元に戻しましょう。
以上です。
Favicon 設置
遅ればせながら Favicon を設置しました。
Favicon は「favorite icon（お気に入りアイコン）」の略で、サイト表示あるいはブラウザのお気に入りやブックマークに登録すると、そのサイトにオリジナルのアイコン（Favicon）が予め用意されていればそれがお気に入りリストやアドレスバーのURLの左側に表示されるというものです。当サイトではバナーの猫の顔をそのまま使ってみました。
以下作成&設置方法です。
１．Favicon 用画像作成
画像作成ソフトで正方形の画像を作成します。画像サイズは 16px×16px らしいので、私は最初からそのサイズで画像を作りました。画像を作成したら bmp / gif / jpg / png 等の形式で保存します。
なお次の変換作業で対応するファイル形式が異なるようです。また画像サイズを縮小してくれるサイトもあるようです。
２．.ico ファイルに変換
Favicon は .ico 形式である必要があり、作成した画像を下記のサイトで変換します。変換サイトは他にも多く存在します。
例えば Favicon Japan を利用する場合、トップページにある「Favicon自動生成」フォームに作成した画像ファイルを指定し「Faviconを作成する」をクリックします。次のページに生成された Favicon が表示されますので、OKであれば「Download」をクリックして favicon.ico をダウンロードします。
３．ファイルのアップロード
favicon.ico をローカル・サイト・パス（index.html が置かれているディレクトリ）にアップロードします。
４．テンプレートの修正
各テンプレートに次の1行を <head>～</head> の間に追加します。
<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico" />追加したら保存・再構築してください。
以上です。OSとブラウザによって対応が異なるようです。Browser Favicon 対応表によればWindows2000/XP のFirefoxは完全に対応しているようで、ページをリロードするだけで表示されるようになります。IEはお気に入りに追加することで表示されます。ブラウザのキャッシュや一時ファイルを削除するタイミングで表示される場合もあるようです。
参考サイトおよび、テンプレートご利用サイトを検索したところ、多数のエントリーがありました（純粋な Favicon 設置の記事のみ。とりこぼしありましたらお許しください）。ありがとうございました。
