皆が知らない「いいね」ボタンと「OGP」の設定方法、超解説【2/2】

2011.06.10

IT・WEB

皆が知らない「いいね」ボタンと「OGP」の設定方法、超解説【2/2】

井出 一誠(ガイアックス)
編集長

Blogや自社サイトに、Facebook「いいね!」ボタンを設置している方は多いと思いますが、「超重要」なOGP(Open Graph Protocol)の設定は出来てますか? OGPを設定するだけで「必ず」Facebookからの流入数が増加します。その増加率はサイトによっては2倍どころではありません。この本エントリーでは、流入数が増加する理由、そのための設定方手順をご説明します。

<この記事はこちらの記事の続きです>

■「いいね!」ボタンを設置する。
プラグインのコードを発行する

次に「いいね!」ボタンを設置するためのコードを発行します。まずは、Facebookデベロッパーズのこちらのページにアクセスしましょう。
 ■プラグイン発行画面
 http://developers.facebook.com/docs/plugins/

●ステップ1
「Like Button」を選択します。

●ステップ2
「Step 1 - Get Like Button Code」の設定欄で、それぞれ下記のように設定します。

 ・「URL to Like」欄 :「123」と記入
  →後で、livedoor Blogのパーマリンクの独自タグに書き換えます。ここで<$ArticlePermalink$>を入力すると、コード生成のタイミングで誤変換されてエラーになります。

 ・「Layout Style」欄 :「standard」のまま
  →「いいね!」ボタンの形を3パターンから選べます。ここは完全に好みで好きな物を選択頂いて大丈夫です。

 ・「Show Faces」欄 :「チェック」を付けたまま
  →「いいね!」した友達の写真を表示するかどうか選べます。若干表示速度が遅くなりますが、写真を出す事によりそれ以上の効果があるので表示します。

 ・「Width」欄 :設置先の横幅に合わせて記入

 ・「Verb to display」欄 :「like」のまま
  →「like」と「recommend」のどちらかを選べます。

 ・「Font」欄 :そのまま

 ・「Color Scheme」欄 :そのまま

●ステップ3
URLを書き換えます。生成したコードの「123」の部分を、<$ArticlePermalink$>に変更しましょう。このコードは、livedoorBlogの管理画面に貼りつけるので、保存して置いて下さい。

※<$ArticlePermalink$>とは?
livedoorBlogの独自タグで、記事ごとのパーマリンクを自動で挿入させるようにする記述方法です。他にも色々ありますので、ご興味ある方はこちらをご覧下さい。
 ○独自タグ一覧/livedoor BlogのデザインをカスタマイズするWiki
 ○デザインテンプレート/タグ一覧/livedoor Blog まとめサイト

■livedoorBlogの管理画面で貼りつける。

●ステップ4
livedoorBlogのデザインカスタマイズページを開きましょう。

●ステップ5
「個別記事ページ」の編集画面で、<$ArticleBody$>の下にコードを貼りつけます。

次のページ■「OGP」を設置する。

続きは会員限定です。無料の読者会員に登録すると続きをお読みいただけます。

Ads by Google

この記事が気に入ったらいいね!しよう
INSIGHT NOW!の最新記事をお届けします

井出 一誠(ガイアックス)

井出 一誠(ガイアックス)

編集長

フォロー フォローして井出 一誠(ガイアックス)の新着記事を受け取る

一歩先を行く最新ビジネス記事を受け取る

ログイン

この機能をご利用いただくにはログインが必要です。

ご登録いただいたメールアドレス、パスワードを入力してログインしてください。

パスワードをお忘れの方

フェイスブックのアカウントでもログインできます。

INSIGHT NOW!のご利用規約プライバシーポリシーーが適用されます。
INSIGHT NOW!が無断でタイムラインに投稿することはありません。