Home > HP作成 > | MT関係 > | ウェブサイト構築 > | ソーシャル・ネットワーキング > facebook「いいね!」ボタンをMTに設置する際の諸注意

facebook「いいね!」ボタンをMTに設置する際の諸注意

facebook の「いいね!」ボタンを設置してみた。

実は twitter のボタンも設置してみたのだが、こちらは公式サイトで"日本語で"(ここ重要!)
あまりにも簡単だったのと、文字数も限られているし、すぐ流れちゃうんだろうし・・・で、とりあえず設置できたのでOK!的な感じで現在運用しているのだが(・・・といっても設置したのは一昨日です^^;)

facebook の「いいね!」ボタンは結構苦労したので、ブログをレンタルブログではなくて、自分でMTを使って構築している方で、まだ facebook の「いいね!」ボタン を設置していなくて、設置したい!
・・・と思っている方がおりましたら参考にしてください。

facebook の「いいね!」ボタンについては解説しているサイトも他にもあったんだけど、MT用じゃなかったり、古いバージョンの 「いいね!」ボタン の設置の仕方だったりとかでちょっと苦労したので^^;

・・・続きからご覧ください




まず、facebookの「いいね!」ボタンを設置するページに行く

そうすると英語のページに飛ぶので^^; 英語が得意な人はそれを読んでもらってとりあえず必要なコードをゲットしてください^^;

Step 1 - Get Like Button Code
のところから入力していきます。

facebook1.jpg

  1. ボタンを設置するURLを入力します。これは「いいね!」ボタンを設置するURLになります。
    ここは後で変更するので、サイトのURLでもとりあえず入れておきましょう。

  2. 「送信する」ボタンを入れるかどうかです。
    チェックを入れたりはずしたりするとプレビューが表示されるので好みのものを選んでください。

  3. こちらも好みのものを選んでください。

  4. ボタンの横幅を指定します。・・・といっても、ボタン自体の大きさが変わるわけではありません。
    3でスタンダードを選ぶとこちらで指定した横幅で表示されるので参考にしてください。

  5. 「顔」を表示するかどうかです
    。チェックボタンを入れると「いいね!」ボタンを押してくれた人の「facebookに登録してあるプロフィール画像がサイト上に表示されます。
    こんな感じですね。
    facebook3.jpg
    プレビュー画面では確認できなかったので、実際にサイトに表示された画像です。

  6. ボタン上に「いいね!」を表示させるか「おすすめ」を表示させるかを選びます。

  7. 色を指定します。自分のサイトカラーに合わせて選んでください。

  8. fontは日本語の場合関係ないようです。別に選ばなくても大丈夫です。
入力が済んだら「Get Code」ボタンを押してコードを取得します。
そうするとこんな画面が出ます。

facebook4.jpg

上のタブで「HTML5」「XFBML」「IFRAME」「URL」が選べるのが分かります。
それぞれのタブをクリックするとそれぞれ違うコードが出てきます。

「IFRAME」「URL」でこんな画面が出てきて選べない人もいるのではないでしょうか?

facebook5.jpg
どうしても「IFRAME」や「URL」で選びたい人は②の Send Button のチェックを外すと、こんな感じで選べます。

facebook6.jpg

IFRAME」を選ぶと「いいね!」ボタンを押してコメントした際のコメントの表示がされないようです。

・・・そういえば(XFBML Only)ってちゃんと書いてありますわね。
・・・XFBMLでなくても、HTML5でも大丈夫です。

設置するに当たって、一箇所書き換えればいいだけなので、簡単でよいな~とも思うのですが、
IFRAME とは インラインフレームのことで、HTML本文の真ん中にフレームを埋め込むというもの。

昔は結構好きだったんだけど(面白いことができるから)

SEOの観点からフレームを使わないようにしているうちに、セキュリティー的に問題があるとか、このインラインフレームが悪用されたりとか、インラインフレームを使ったページを開こうとするとIEに警告が出るとか・・・
いろいろあるので、やめておきます。

「XFBML」というのは、

「XFBML」というのはfacebook 専用言語

・・・ということらしいので、やめておきます。
見かけないものが入っていると、後でMTいじる時に面倒なことになると困るから・・・

・・・っていうか、普通に「HTML5」が使えるようになったわけだから、これ使うのが普通でしょ。

・・・というわけで「HTML5」を選びます。

あとは指示通りに、JavaScriptを<body>の下に貼り付けます。
久しぶりにmtのテンプレートさわったので、どのテンプレートから<body>が始まったのか、忘れてしまって、探してしまいました^^;

下段の「プラグインを表示したい場所にプラグインのコードを配置します。」
の部分ですが、私はやっぱり、記事を読み終わってから「いいね!」と言って欲しいので、記事の一番下に表示させるようにします。(←真面目でしょ 笑 )

・・・で、この時に、最初にとりあえず入力した URL を書き換えます。
因みになかのんは、facebook というテンプレートモジュールを作って、そこに記述してみました。
・・・twitter のときもそうしたので・・・

書き換えるところは
data-href="http://hen-e.com"  のURLの部分です。
このままだと、サイト全体が「いいね!」されてしまうので、ひとつの記事に「いいね!」した時点で、ほかの記事に「いいね!」することができなくなってしまいます。

ですので、この部分を
data-href="<$MTEntryPermalink$>"

に変えるだけです^^;

そうすると、こんな感じに facebook に表示されます。

facebook8.jpg
う~ん。
やった!という気もしないでもないけど。
微妙ですよね~(笑)
まず、写真がおかしい^^;

・・・いや写真もおかしいですが・・・
つまり、同じ写真をつかっているので、微妙にわかりにくいのですが、MTにコードを埋め込んだ時に、どの画像を使いなさい、という指定はしていなかったはず。

でも。写真が出ている・・・なんか facebook は指定がないと、サイト内にあるたまたまの記事や写真を拾ってしまうとかなんとか、なんかの記事で見たような・・・

この写真が乗ったのはたまたま、この「変ないーもん屋」にアップした最新のしゃしんだったからなのでは?

それから、実は先ほどURLの部分 MT用にかえましたよね。
あれ、変えない状態でUPして、サイトごと「いいね!」してしまったアホな奴がいまして・・・
何を隠そう私ですが、その際に facebook にサイト内にある別の記事の書き出しが載りまして^^;

まあ、
テキトウに(何か法則はあるのかもしれませんが)拾ってきてるわけですね~。

・・・それに、サイトのURLも欲しいところ・・・

・・・で、はじめの方に戻りますが、
Step 1 - Get Like Button Code 
のところから、入力しました。

そうです、つまり Step 2 ・・・が、あるわけですね^^;

・・・なんだか、懇切丁寧に(?)書いていたら長さばっかり長くなってしまったので、分割することにします。
続きはStep 2で!

これでようやく1/3です^^;



Home > HP作成 > | MT関係 > | ウェブサイト構築 > | ソーシャル・ネットワーキング > facebook「いいね!」ボタンをMTに設置する際の諸注意

なかのん

変ないーもん屋運営者

nakanon2.jpg
某・会社常務取締役 兼 某・会社社長
肩書きだけ見ると、一見優雅なセレブに見えるが内情は・・・
既存の商売に見切りを付けて大幅な業務転換を図るべく模索する日々。
モラトリアム社会人を脱却しようと現在活動再開中

Search


Feeds
Photos
現代広告の心理技術101

広告の目的は人に行動させること

この本を読めば、広告をより効果的にするため ただ以下のことを学ぶことができる。

1. 人が何を求めているのか。
2. 人は自分の求めているものをどう思っているのか。
3. なぜ人はそういう行動をとるのか。

それがわかれば、次のことが可能になる。

1. 顧客を満足させる方法がさらにわかる。
2. より多くの人にモノを買いたいと思わせることができる。
3. 良質な製品をより多くの人々のもとに届けられる。
4. 人々の生活により多くの満足感をもたらす手助けができる



「現代広告の心理技術101」は、オンライン・オフラインに限らず何らかの形で広告を行っている私たちにとって、一番必要な良書です。
なかのんも愛用しています。

現代広告の心理技術101

Return to page top