2008年10月アーカイブ

-自分用に備忘録を兼ねて-

FC2からMovableTypeに移転して、何かさびしい・・拍手ボタンがない!

ということで、Web拍手ボタンを設置することにしました。

使用させていただいたのは、Web拍手ツール【GJ!】(グッジョブ)。

http://hmlab.info/minor/products/gj

 手順は下記の通り。

1.作者HEX68さまのサイトから、スクリプト(gj.zip)をダウンロードして解凍します。

 ファイル構成は

gj┐

├gj.php(GJ!本体)

├gj.js(javascript)

├prototype.js(javascriptライブラリ)

├gdtest.php(GDライブラリテスト用ファイル)

├readme.txt(説明テキストファイル)

├loc (空ディレクトリ)

├img(ボタン画像)

└log(空ディレクトリ)

 2.スクリプトの内容を自分の環境に合わせて書き直します。

解凍したファイルのうち、gj.phpgj.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行目付近にもあります。テキストエディタで「検索・置き換え」を使うと間違いないでしょう。

3.スクリプト一式をアップロード

 2で設定したディレクトリに、解凍したスクリプト一式をFTPでアップロードします。

 (gjディレクトリをまるごとごとアップロードすれば大丈夫です。)

4.パーミッションを変更する。

 パーミションは以下のように設定してください。

┌gj.php(644)

├gj.js(644)

├prototype.js(644)

├gdtest.php(644)

├loc(777) *空ディレクトリ

├img(755) *ボタン画像

└log(777) *空ディレクトリ

※私のサーバーでは644は600でも動きました。詳細はお使いのサーバー環境をご確認ください。

5.環境チェック(動作テスト)

 ここまで設置したところで、ブラウザから設置したディレクトリの「gdtest.php」へアクセスしてみます。

ボタン画像上に「OK」と表示されたらあなたのサーバーでGJ!の設置が可能です。OK!が表示されない場合、サーバーにPHP、またはGDライブラリが組み込まれていない為、このアプリは動きません。すいません。

テスト後は、「gdtest.php」は不要なので削除しておきます。

以上でスクリプトの設置は完了です。

続いてMovabletypeでのタグ埋め込み作業をします。

6.Javascriptファイルを読み込みませるための記述

 HTMLページでは、ヘッダーでJavascriptを読み込むので

MovableType4.2で 「デザイン」-「テンプレート」と開き、「HTMLヘッダー」のテンプレートを編集します。

<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は、ご自身のドメインに置き換えて下さい。(2行目の「~/javascript"」と「src=~」の間は半角スペース1つでつながっています。改行ではありません。)

上記記述を「HTMLヘッダー」のテンプレート内に加えます。ようは<head>~</head>内に記述されれば良いので、どこに挿入してもかまいません。テンプレートを閉じる前に「保存」を忘れずに。

7.拍手ボタンのタグを設置

 いよいよ拍手ボタンを表示させたいページのテンプレートに、拍手ボタンのタグを埋め込みます。

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>

※この記述は変更するところはありません。このままコピー&ペーストして頂ければOKです。挿入後は「保存」を忘れずに!

 kuma25nはトップページの記事にも拍手ボタンを付けたかったので、「デザイン」-「テンプレート」-「ブログ記事の概要」テンプレートにも同じように記述しました。

※文字コードが違うと動かない場合があります。設置後にうまく動作しない場合は、この記述部分の文字コードを確認してみて下さい。

8.再構築して完了

 テンプレートの保存が終わったら、再構築して完了です。うまく設置できていれば、拍手ボタンが表示されているはずです。

9.カスタマイズ

 最初にテキストエディタで修正した「gj.js」ファイルの100行目付近にある

var gj_st = "0";//0はボタン上に拍手数表示、1は拍手数のアイコン表示

を"1"にすることで、拍手の数ではなく、拍手数に対応したアイコン表示にすることが出来ます。

また、拍手ボタンの画像は自由に差し替え出来るので、【GJ!】に添付されているオリジナルの画像以外にご自分でアレンジすることも可能です。kuma25nは、

●通常の拍手ボタン↓

clap1.gif

●ボタンを押してもらった時の感謝表示↓

thanks2.gif

というようにアレンジしました。 (上記画像は自由にお使い頂いてもかまいません)

素晴らしいスクリプトを作って下さったHEX68さまに感謝!です。


http://tabilog25n.com/

以前から撮りためていた旅行の時の写真を、ようやくサイトにまとまることにしました。

詳しくは姉妹サイト「旅ログ」http://tabilog25n.comをご覧下さい。

お宿の評価と感想を中心にアップする予定です。

どうぞよろしくお願いいたします。


諸般の事情により、FC2ブログで公開しておりました当ブログを、そっくりこちらに移転いたしました。

FC2からMT4にログ移転するノウハウは、偉大なる先人のみなさまに教えて頂き、とても簡単に移行できました。今後ともよろしくお願いいたします。 DSC01965.jpg


1
カウンター 無料カジノ特選ウェブナビ役立つ10選!

プロフィール

■サイト管理人(kuma25n)

DSC01965.jpg

旅行大好き。ヒマさえあれば旅のパンフを貰ってきて眺めてます。デジタルグッズ(?)にも目が無くて、物欲の赴くままに手に入れる努力な毎日・・・。そのせいで旅行に行くお金が貯まらない、という声も・・・。

■メールはこちら
(必ず目を通しますが、多忙のため返信はお約束できません。申し訳ありません。)

ウェブページ

Powered by Movable Type 4.22-ja

最近のコメント

このアーカイブについて

このページには、2008年10月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2008年7月です。

次のアーカイブは2008年12月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。