－自分用に備忘録を兼ねて－
ＦＣ２からMovableTypeに移転して、何かさびしい・・拍手ボタンがない！
ということで、Web拍手ボタンを設置することにしました。
使用させていただいたのは、Web拍手ツール【ＧＪ！】（グッジョブ）。
http://hmlab.info/minor/products/gj
手順は下記の通り。
１．作者ＨＥＸ６８さまのサイトから、スクリプト(gj.zip)をダウンロードして解凍します。
ファイル構成は
gj┐
├gj.php(GJ!本体）
├gj.js(javascript)
├prototype.js(javascriptライブラリ)
├gdtest.php(GDライブラリテスト用ファイル)
├readme.txt(説明テキストファイル)
├loc （空ディレクトリ）
├img（ボタン画像）
└log（空ディレクトリ）
２．スクリプトの内容を自分の環境に合わせて書き直します。
解凍したファイルのうち、gj.phpとgj.jsをテキストエデイタで開き、記述を一部変更します。
・gj.php
$PASSを任意の文字列に変更してください。コメント閲覧画面のパスワードとなります。
・gj.js
URL=の記述をあなたの環境に合わせて変更してください。
例：GJ!の設置先が"http://XXXXX.com/gj/だった場合
URL="http://XXXXX.com/gj/gj.php"
となります。
※「gj.js」の変更箇所は数カ所あります。12行目付近と15・16・17行目付近、99行目付近にもあります。テキストエディタで「検索・置き換え」を使うと間違いないでしょう。
３．スクリプト一式をアップロード
２で設定したディレクトリに、解凍したスクリプト一式をFTPでアップロードします。
（gjディレクトリをまるごとごとアップロードすれば大丈夫です。）
４．パーミッションを変更する。
パーミションは以下のように設定してください。
┌gj.php(644)
├gj.js(644)
├prototype.js(644)
├gdtest.php(644)
├loc(777) *空ディレクトリ
├img(755) *ボタン画像
└log(777) *空ディレクトリ
※私のサーバーでは６４４は６００でも動きました。詳細はお使いのサーバー環境をご確認ください。
５．環境チェック（動作テスト）
ここまで設置したところで、ブラウザから設置したディレクトリの「gdtest.php」へアクセスしてみます。
ボタン画像上に「OK」と表示されたらあなたのサーバーでGJ!の設置が可能です。OK！が表示されない場合、サーバーにPHP、またはGDライブラリが組み込まれていない為、このアプリは動きません。すいません。
テスト後は、「gdtest.php」は不要なので削除しておきます。
以上でスクリプトの設置は完了です。
続いてＭｏｖａｂｌｅｔｙｐｅでのタグ埋め込み作業をします。
６．Javascriptファイルを読み込みませるための記述
HTMLページでは、ヘッダーでJavascriptを読み込むので
MovableType4.2で 「デザイン」－「テンプレート」と開き、「ＨＴＭＬヘッダー」のテンプレートを編集します。
<script type="text/javascript" src="http://XXXXX.com/gj/gj.js"></script>
<script type="text/javascript" src="http://XXXXX.com/gj/prototype.js"></script>
※XXXXX.comは、ご自身のドメインに置き換えて下さい。（２行目の「～/javascript"」と「src=～」の間は半角スペース１つでつながっています。改行ではありません。）
上記記述を「HTMLヘッダー」のテンプレート内に加えます。ようは<head>～</head>内に記述されれば良いので、どこに挿入してもかまいません。テンプレートを閉じる前に「保存」を忘れずに。
７．拍手ボタンのタグを設置
いよいよ拍手ボタンを表示させたいページのテンプレートに、拍手ボタンのタグを埋め込みます。
MovableType4.2で 「デザイン」－「テンプレート」と開き、アーカイブテンプレートの「ブログ記事」を開きます。ボタンを表示させたい場所に下記の通りの記述を挿入します。
<input id = "<$MTEntryPermalink$>" type = "image" src = "" alt="clap" style="vertical-align:middle;" onClick="goodjob('<$MTEntryPermalink$>','<$MTEntryTitle$>') ">
<script type="text/javascript">showbutton('<$MTEntryPermalink$>','<$MTEntryTitle$>');</script>
<input type = "text" id ="<$MTEntryPermalink$>_gj_message" style="visibility:hidden;vertical-align:middle;"><br/>
<span id="<$MTEntryPermalink$>_gj_mark"></span>
※この記述は変更するところはありません。このままコピー&ペーストして頂ければＯＫです。挿入後は「保存」を忘れずに！
kuma25nはトップページの記事にも拍手ボタンを付けたかったので、「デザイン」－「テンプレート」－「ブログ記事の概要」テンプレートにも同じように記述しました。
※文字コードが違うと動かない場合があります。設置後にうまく動作しない場合は、この記述部分の文字コードを確認してみて下さい。
８．再構築して完了
テンプレートの保存が終わったら、再構築して完了です。うまく設置できていれば、拍手ボタンが表示されているはずです。
９．カスタマイズ
最初にテキストエディタで修正した「gj.js」ファイルの100行目付近にある
var gj_st = "0";//0はボタン上に拍手数表示、１は拍手数のアイコン表示
を"1"にすることで、拍手の数ではなく、拍手数に対応したアイコン表示にすることが出来ます。
また、拍手ボタンの画像は自由に差し替え出来るので、【ＧＪ！】に添付されているオリジナルの画像以外にご自分でアレンジすることも可能です。kuma25nは、
●通常の拍手ボタン↓
●ボタンを押してもらった時の感謝表示↓
というようにアレンジしました。 （上記画像は自由にお使い頂いてもかまいません）
素晴らしいスクリプトを作って下さったHEX68さまに感謝！です。
最近のコメント