MT5 ブログ記事にFacebookの「いいね!」と「コメント覧」を貼ってみた

◆2013年4月6日(土) 江別は曇り

師匠のブログを何気に眺めていたら、おお!Facebookの「いいね」と「コメント欄」の表示があるではないか!

ソーシャルプラグイン

これは、格好が良いし、なによりFaceBookと自身のブログが有機的に連携してくれそうな気がします。

よし、やってみましょう!

◆MT5の各エントリー(記事)にFBのリンクを表示させる。

まずは、Social Pluginsなるサイトにアクセスして、MT用のコードをゲットしなくてはいけないらしいです。

http://developers.facebook.com/docs/plugins/

ん~、全部英語です。

((↓)以下、各イメージはクリックで拡大します)


1.Like Buttonを押してコードを取得

ソーシャルプラグイン-2-1 


2.ブログURLや表示幅を設定し、GetCodeでコード表示

ソーシャルプラグイン-01


3.表示されたコードを保存しておきます。

ソーシャルプラグイン-02

・Javaを表示させるコードそのもの

・表示させる位置情報のタグ

コピーしてエディタにでも、保存しておきます。

4.MTのテンプレートを編集

デザイン→テンプレート→(ブログテンプレートの管理)→アーカイブテンプレート→ブログ記事

注)ここで、テンプレートのバックアップを取ることを忘れないで下さい!!これとても大事です。

ソーシャルプラグイン015

大体、どの位置に挿入したいかを全体イメージからつかんでおきます。

私のブログの例でいうと、「トラックバック」の下あたりのイメージですね。

まず、位置情報を記述するタグを埋め込みます。

ソーシャルプラグイン-06-01

トラックバック表示のタグの下に配置します。

注)このコードはあとで若干変更します(後述)このままでは問題が発生するのです!

次に、Javaを表示するコードを貼りつけます。

ソーシャルプラグイン-07-01

これで、準備は完了。保存と再構築、全体の再構築を実行します。

5.ブログサイトのテスト表示

ソーシャルプラグイン-111-3

あれれれ???「いいね!」ボタンは表示されましたが、「コメント欄」がありません。

そうです、「コメント欄」は別コードだったのですね。

つまり、私が配置したかったイメージは、

・いいね!表示

・コメント入力画面

という二つのコードで成り立っていたというわけです。

(そんなコトも知らずに、テンプレート編集をしていた、無知の私でした・・・m(_ _)m )

 

6.コメント入力表示のコードの入手と配置

上記と同じ作業をもう一度実施します。

まず、コメント入力表示用のコードを入手します。再びSocial Pluginsから・・・

http://developers.facebook.com/docs/plugins/

ソーシャルプラグイン-2-2

コメント入力用画面を呼び出して・・・

ソーシャルプラグイン-04

先ほどと同じように、ブログURL、表示幅を設定してコードを入手します。

ソーシャルプラグイン-02

Javaの表示用コードと、位置情報のタグをエディタ等にコピーしておきます。


7.MTテンプレートの編集

デザイン→テンプレート→(ブログテンプレートの管理)→アーカイブテンプレート→ブログ記事

ソーシャルプラグイン-06

位置表示タグは「いいね!」用と「コメント入力」用の2行となります。

注)このコードはあとで若干変更します(後述)このままでは問題が発生するのです!

ソーシャルプラグイン-07

Java表示コードも2つでワンセットとなります。貼りつけ位置は</bodey>の直下が推奨されていますので、その通りの位置に貼りつけます。

さあ、これで準備完了。 保存、再構築、全体を再構築します!

 

8.ブログサイトのテスト表示

ソーシャルプラグイン-08

うまくいきました!望んだ場所に、望んだコンテンツの配置に成功です!

(実際には何度か失敗しました。(笑) 失敗談は別エントリーで・・・)


◆問題発生!!!!

実際に、テストコメントを入力すると、大きな問題が発生!!!

あるエントリーにコメントを記述すると、それが、ブログ全体の全てのエントリーに反映されてしまうのです。

つまり、私のこの日記に誰かがコメントを付けてくれると、私の過去の全ての日記に、そのコメントが反映されてしまうのです。

これは、まずい!非常にまずい!!!

ということで、トラブルシュート検索してみると、ジャストヒットのサイトがありました。

http://kondo.in/labo/archives/2010/0524_230600.shtml


な~るほど!

言われてみればその通り。位置表示のタグで、「ブログ全体のURL」を指定ししてしまうので、コメントが全体に反映する・・・のです。当たり前の表示です。

なので、「その記事だけに、入力されたコメントを表示する」というタグに変更する必要があるのです。

◆変更前のタグ

ソーシャルプラグイン-09

◆変更後のタグ

ソーシャルプラグイン-10

要するに、いいね、コメント欄の表示先を、

http://www.****.jpなど「全体」で指示しないで、<$MTEntryPermalinks$>と、個別に指示してあげると良い・・・・と言うことらしいです。

私の場合も、これで、上手くゆきました。

実際には何度も失敗して、ほぼ半日かかってしまった作業ですが、次からは、多分30分もかからずに作業できると思います。

私の場合は、カレーブログと釣りブログがありますので、面倒がらずに全部やらなきゃ・・・

というわけです。

トラックバック(0)

トラックバックURL: http://www.yo4.jp/cgi-bin/mt/mt-tb.cgi/864

Powered by Movable Type 5.02

ウェブページ

このブログ記事について

このページは、よしかわゆういちが2013年4月 6日 12:56に書いたブログ記事です。

ひとつ前のブログ記事は「au+iPhone+4GLTE の衝撃!!」です。

次のブログ記事は「掘り出しモノ?1280円のローバスはアタリ!?」です。

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