ST Winds: FC2拍手をMTに採り入れる

FC2拍手をMTに採り入れる

Key Words : 「FC2、拍手、MT、Movable Type、UTF-8、EUC-JP、タグ、テンプレート、文字化け、文字コード」

「FC2拍手（EUC-JP）」をUTF-8のMovable Typeに採り入れてみた。
FC2拍手ページの管理画面で「拍手タグの作成」をせずに、拍手タグ（ボタン）が自動で挿入された状態でエントリー投稿できるように、MTのエントリー・テンプレート（「ブログ記事」あるいは「エントリー・アーカイブ」などという）に以下のようなタグを入れた（あらかじめタグを書き加えておく）。

MT用「FC2拍手」タグ<a href="http://clap.fc2.com/post/ご登録のユーザー名/?url=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" target="_blank" title="拍手する by FC2"><img src="http://clap.fc2.com/images/button/ボタンの色/ご登録のユーザー名?url=<$MTEntryPermalink$>" alt="拍手する" style="border:none;" /></a> ポイントは、エントリー記事の固定リンクとタイトルを、グローバル・タグ・アトリビュート「encode_url」で16進数ベースに変換する。

固定リンク（URL）部分には、 <$MTEntryPermalink encode_url="1"$> タイトル部分には、 <$MTEntryTitle encode_url="1"$> タグを挿入する。
例えば、「拍手」というタイトルなら「%C7%EF%BC%EA」に変換される。

※MT「encode_url」16進数ベース変換は「UNICODE」URLエンコードで、FC2管理画面で作成される「EUC」URLエンコード文字列と異なります。
（2009/01/06）

MT「グローバル・タグ・アトリビュート」の「encode_url」項目を参照。
Movable Type 3.3マニュアル
http://www.sixapart.jp/movabletype/manual/3.3/b_global_filters/#encode_url

Movable Type 4 グローバル・モディファイア・リファレンス
http://www.movabletype.jp/documentation/appendices/modifiers/ encode_url.html

「ボタンの色」は、white、black、blue、green、orange、pink、redの７色から選択できる。

当サイトで管理人が自ら拍手ボタンをクリックして確認した範囲内で、タイトルは、全角、半角英数字あるいはそれら混在でも文字化けはなかった。
※半角カタカナは使わない方がいい。

（FC2拍手管理ページの「拍手タグの作成」で作成される拍手タグに含まれるURLとタイトルは、16進数でエンコードされている。試しに16進数エンコードをしないタグをUTF-8エントリー記事に貼り付けて拍手したところ、拍手受付ページや管理ページでエントリーのタイトルが、EUC-JPとUTF-8の文字コードの違いで文字化けする傾向があり、見苦しかった。）

当サイトには100ほどの記事タイトルがあり、全ての拍手ボタンをクリックしまくってテストしたわけではないが、「FC2拍手ユーザー管理画面」内「拍手ページ一覧」のキャプチャ画像を掲載しておく。記事タイトル部分に注目。
Firefoxにて閲覧した（2009年1月16日）

各ブラウザ（IE6、Firefox3、Opera9、Safari3、Netscape7）で拍手後のブラウザ・タイトルバーを確認した。
「123個の卵EggとDonald鶏Chickenナゲット」（半角英数字と漢字まじりのUNICODE URLエンコード）の適当なタイトルを作ってテストした。
これも参考までに掲載（2009年1月16日）

お役に立てれば、これ幸い。

上記タグを、
↓シンプルにページに貼りつけたボタン。

※この記事内容はあくまで、FC2拍手ボタンのタグを、記事投稿後にあらためてFC2拍手管理画面で作成して貼り付ける手間を省くための方法について記したものである。その手間を惜しまない方は、普通にFC2拍手管理画面で拍手タグを作成して下さい。
管理画面で作成するタグは、FC2拍手ホームページの文字コード（charset=euc-jp）にあわせて「EUC」URLエンコードされているので、そのまま使っても文字化けの問題はありません。

FC2拍手管理画面で作成した拍手ボタン・タグ（「EUC」URLエンコード）も
↓貼り付けテスト。