Facebook の「いいね！ボタン」は OGP 設定というものをしておかないとあんまり意味がないと言われています。なぜなら、この設定をしておかないと「いいね！」を押されても拡散性が弱くなるからです。友達のタイムライン上に「いいね！」を押したことが表示されないのです。
他にも、OGP の設定をしていなければ、シェアのされ方や情報の表示のされ方などがあやふやになります。OGP 設定をすることで、記事の抜粋やサムネイル表示もしっかりされるとうわけです。
OGP 設定の手順
前回の『「いいね！ボタン」の取得方法』では、手順 3 までをまとめましたので、この記事では手順 4・5・6 についてまとめたいとおもいます。
Facebookのデベロッパー（開発者）として登録してアプリケーションIDを取得する「いいね！ボタン」のタグを取得する「いいね！ボタン」のタグをWordPressに書き込む- OGP設定用のタグを取得する（←この記事はここから）
- OGP設定用のタグを書き換える
- OGP設定用のタグを書き込む
４．OGP 設定用のタグを取得する
Facebook の DEVELOPERS にログインして、OGP 用のタグを取得し、必要な箇所を書き換えて行きます。
OGP設定ページの表示
タグは「いいね！ボタン」を取得したページと同じ場所にあります。アプリ管理画面の中段、【オープングラフ】というところから【利用開始】、もしくは【オープングラフを編集】をクリックして先に進みます。
そして【Open Graphの詳細はこちら】をクリックすると新しいウィンドウでソーシャルプラグインのページを開くことができます。左サイドバーにある【Social Plugins】をクリックして、一番上の【Like Button】のページを開けばOKです。
アプリ ＞ 利用開始 or オープングラフを編集 ＞ Open Graphの詳細はこちら ＞ Social Plugin ＞ Like Button
OGP タグの取得
Like Button ページの Step1 は「いいね！ボタン」のタグ取得でした（詳細は『いいね！ボタンを設置したい』にて）。そしてその後にある Step2 が OGP 設定に関してになります。
(1) 記事タイトルを入力する
とりあえずは空欄で OK です。記事ごとのタイトルが表示させるように後々書き換えます。
(2) タイプを選択する
サイトのタイプを選択します。「ブログ」とか「ウィブサイト」といった形態の他にも、「本」とか「カフェ」とか、「映画」や「音楽」などなど、ジャンルを選ぶこともできます。自分のサイトにあったジャンルを選べば OK です。
(3) URL を入力する
サイトやブログの URL を入力しておきましょう。後で記事ごとの URL が表示されるように書き換えます。とりあえずは入力なしでも大丈夫です。
(4) イメージ画像（サムネイル画像）の指定
ここでタイムライン上に表示されたときのサムネイルとして使用される画像を指定できます。記事ごとにサムネイル（アイキャッチ）を設定しているのなら、記事ごとに表示されるように設定できますし、全て統一した画像でも OK です。とりあえずは空欄でも OK。
(5) タイトルを入力する
サイトやブログのタイトルを入力します。
(6) アプリケーション ID を入力する
アプリケーション ID を入力します。「いいね！ボタン」を取得する時にすでにアプリケーション ID は知っているはずですので、長ったらしい数字の羅列ですが、それをコピペしてください。
最低でも (2)・(5)・(6) の入力 or 選択が済んだら、【Get Tags】をクリックしましょう。以下のようなウィンドウが開きますので、テキストエディタなどにタグをコピペしてください。
５．OGP 設定用のタグを書き換える
取得したタグは以下のようになっています。
(1)<meta property="og:title" content="ここは記事タイトルタグ" /> <meta property="og:type" content="article" /> (2)<meta property="og:url" content="ここは記事URLタグ" /> (3)<meta property="og:image" content="サムネイル画像" /> <meta property="og:site_name" content="ブログタイトル" /> <meta property="fb:admins" content="アプリケーションID" /> (4)<!-- 初期値では無し -->
まだまだ空欄が多いので、WordPress に適した状態に書き換えていきます。
ワードプレス用に OGP タグを設定していく
これは「いいね！」を押された時に、「いいね！」ボタンが表示されているページの情報を正確にシェアしていくために必要は設定です。特に WordPress の ような更新型のサイトの場合、投稿したブログ記事ごとに「いいね！ボタン」が表示され、投稿された記事ごとにシェアされていくのが望ましいと思います。
そのように記事ごとに正確な情報を表示させるためにタグを書き換えていきましょう。
(1) 記事タイトルを出力するタグを差し込む
WordPress の場合、記事のタイトルを表示させるタグは以下のタグになります。上記の (1)【<meta property=”og:title” content=”ここは記事タイトルタグ” />】の「ここは記事タイトルタグ」の部分に書き込めば OK です。
<?php the_title(); ?>
また、All in One SEO Pack で指定しているタイトルの方を表示させたい場合は、以下のタグになります。
<?php echo get_post_meta($post->ID, _aioseop_title, true); ?>
PHP は詳しくないので正確ではないかもしれませんが、ググって出て来た情報をカスタマイズして試してみたらうまくいっているっぽいという、極めて “確からしい” タグですw
適当ですいません。とは言え、普通のタイトルタグで問題ないので、よほどの理由がない限り使う事はないと思います。
(2) 記事ごとの URL を出力するタグを差し込む
URL の部分は記事ごとのパーマリンクを取得できるようにしておきます。(2)【<meta property=”og:url” content=”ここは記事URLタグ” />】の「ここは記事URLタグ」の部分に以下のタグを書き込めばOKです。
<?php the_permalink() ?>
(3) サムネイル画像を出力するタグを差し込む
シェアされた際に表示されるサムネイル画像を指定します。
記事にアイキャッチを設定する人はそれをそのまま使いたいでしょうし、アイキャッチがない場合は何を表示させるのかも指定したいでしょうし、もしくはどの記事でも共通した画像を表示させたいという人もいるかもしれません。
というわけでこれらの説明は後にまわします。。。
(4) 情報を追記する
Facebook デベロッパーズのページで取得したタグには、いくつか足りない情報があるので追記します。
・抜粋記事を表示する
【description】という meta 情報は、デフォルトでは表示されていないので追記します。以下のタグをそのまま書き込んでください。
<meta property="og:description" content="<?php the_excerpt() ; ?>"/>
これまた All in One SEO Pack を使っていると、上記のタグではうまくいかないようで、All in One SEO Pack で指定した Description を表示させるには、以下のタグになるようです。
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt()); ?>"/>
ただ、Description に何か記載しておかないと何も表示されないみたいなので注意しましょう。
・ローカル情報を記載する
ローカル情報には、例えば「日本ですよ〜」という情報を記載します。一昔前は、これが書かれていないとエラーがでるようになっていたようですが、今はなくても大丈夫そうです。なので、記載しなくてもおそらくOKですが、エラーがでたら追記しておいてください。
<meta property="og:locale" content="ja_JP" />
OGP 設定のサムネイル表示パターン
先ほど飛ばした (3) のサムネイル画像の表示に関してですが、(3) は以下のように全とっかえで書き換えてください。
<?php if (has_post_thumbnail()) :?>
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'medium');
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>">
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('stylesheet_directory'); ?>/images/●●●.png">
<?php endif ;?>
もしアイキャッチを設定していればアイキャッチが表示され、アイキャッチが指定されていない場合は、8 行目で指定している画像が表示されます（「●●●.png」の部分は適宜イメージのファイル名に変更してください）。この画像はテンプレートの images フォルダ直下にアップロードしてください。Facebook ではサイズも 200px 以上が推奨されています。
また、常に同じサムネイルを表示させたい場合は、上記のように全部書き換えたりはせずに、(3)【<meta property=”og:image” content=”サムネイル画像” />】のサムネイル画像の部分に画像の URL を直接指定すれば OK です。
６．OGP 設定用のタグを書き込む
さて、書き換えが終わったらいよいよ OGP タグを書き込みましょう。先ほどいじった OGP 用のタグは <head> 〜 </head> の中に埋め込みます。テンプレートファイルは【header.php】を開けば OK です。
Twenty Eleven の場合は 68 行目辺りに </head> タグがありますので、この直前が分かりやすいと思います。色々書き換えた後のタグをコピペしましょう。以下をそのままつかちゃって大丈夫です。
<!-- OGP設定 -->
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink() ?>" />
<meta property="og:description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>" /><!-- 追記したDescription -->
<!-- サムネイル画像に関して -->
<?php if (has_post_thumbnail()) :?>
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'medium');
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>">
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('stylesheet_directory'); ?>/images/イメージのファイル名">
<?php endif ;?>
<!-- サムネイル画像に関してここまで -->
<meta property="og:site_name" content="サイト・ブログタイトル" />
<meta property="fb:app_id" content="アプリケーションID" />
そしてもうひとつ、<html> タグの中に以下のタグを書き込んで <html ●●●> となるようにします。
lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"
Twenty Eleven の場合は 22 行目辺りにあり、元々以下のようになっています。
<html <?php language_attributes(); ?>>
この中に先ほどの【xmlns】から始まるタグを付け加えれば OK です。
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>
上記のタグ、【lang=”ja”】という部分もそのまま加えていますが、どうも【<?php language_attributes(); ?>】という部分が、この【lang=”ja”】という部分を吐き出してくれているみたいですので、この部分は省略しても大丈夫なようです。
つまり、以下のように記述すれば OK ということになります。
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>
OGP が正常に作動しているかどうかチェックする
最後に、OGP 設定がうまくいっているかどうかチェックをしたいと思います。利用するのはFacebookデベロッパーズのデバッガーというツールです。
こちらにサイトの URL、もしくは記事の URL を入力し、【デバッグ】をクリックします。すると・・・
こんな感じで結果が表示されています。Object Properties のところで見え方が確認できます。
また、「解決する必要がある警告」が表示されているんですが、上の図の場合は、「画像のサイズが足りてませんよ」という内容です。もともとアイキャッチが 150×150 なので、どうしようもないので無視してます（笑）
他にも色々な警告が出てきますので、うまくいっていない場合はここの指示に従って内容を修正していってください。
あと、実際問題なくてもうまく表示されたりされなかったりと、結構不安定なようです。Facebook ってそんなもんなのであまり気にしなくていいですよ、と書いてある記事を過去に見た記憶があります・・・。
OGP 設定は以上です。気休め程度に参考にしてみてください。
参考にさせて頂いたサイト
ありがとうございました！
]]>悪い癖が出てしまった。
設置の仕方に関して前回の続きから書いていきたいと思います。
- Facebookのデベロッパー（開発者）として登録してアプリケーションIDを取得する
- 「いいね！ボタン」のタグを取得する
- 「いいね！ボタン」のタグをWordPressに書き込む（←前回の記事はここの途中まで）
- OGP設定用のタグを取得する
- OGP設定用のタグを書き込む
- OGP設定用のタグを書き込む
大まかに言うと以上の流れです。
今回は３．の「いいね！ボタンの」タグを WordPress のどこに配置するのがベストなのか、という部分を考察していきたいと思います。
ただ実際は「いいね！」ボタンに限らず、全てのソーシャルプラグインに共通する話です。ツイートボタンであろうが Google プラスワンボタンであろうが、はてなブックマークであろうが、タグを埋め込む場所は同じはずです。なのでソーシャルプラグインのタグの配置場所ということで参考にして頂ければと思います。
理屈はいいからとりあえず設置してたい人へ
なぜ、そこにタグを配置すればいいのか？ どうして、そんな表示になるのか？ などなど、理屈を説明し出すと長くなる ＆ ぼくもはっきし言ってよく分かってないので、とりあえずこうやったらうまくいったよっていう方法をご紹介します。
書いてあるとおりにやったらうまくいくのではないでしょうか・・・。
なお、WordPress を対象にしてますが、テンプレートは Twenty Eleven を使っているので他のテンプレートだと話が通じないかもしれません。
ただ、PHP によるテンプレートの構成の仕方は基本同じだと思うので、どんなテンプレートだろうが応用が効くと勝手に思っております。
ソーシャルプラグインの配置場所３パターン
他のブログを見てみると、ソーシャルプラグインが表示されている場所は大きく以下の３つに分けられると思います。
・記事の上
・記事の上と下
そして一番多いのが記事の下パターンですね。
ソーシャルプラグインの設置場所①
記事の下
一番簡単かなと思うのがテンプレートファイルの中にある【 comments.php 】に「いいね！」ボタンなどのタグを埋め込む方法です。
【 comments.php 】のファイルを開くと、結構頭の方に【 <div id=”comments”> 】と書かれているのが見つかると思います。
このタグの前か後にソーシャルプラグインのタグをコピペすればOKです。
<?php
/**
* The template for displaying Comments.
*
* The area of the page that contains both current comments
* and the comment form. The actual display of comments is
* handled by a callback to twentyeleven_comment() which is
* located in the functions.php file.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?>
/* ▼ ソーシャルプラグイン系 ▼ */
/* ▼ いいね！ボタン ▼ */
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
/* ▼ tweetボタン ▼ */
<a href="https://twitter.com/share" class="twitter-share-button" data-via="TwitterID" data-lang="ja" data-related="ユーザーネーム">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
/* ▼ Googleプラスワンボタン ▼ */
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>
/* ▲ ソーシャルプラグイン系 ▲ */
<div id="comments">
<?php if ( post_password_required() ) : ?>
<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyeleven' ); ?></p>
</div><!-- #comments -->
コメント用のファイルは必ず投稿記事の最後に出力されるようになっているかと思うので、ここにタグを貼っておけば必ずソーシャルプラグインも表示されるという寸法です。
また、Twenty Eleven で試した場合、WordPress の設定でコメント受付を拒否していた場合でも、ソーシャルプラグインは表示されました。
さらに【 <div id=”comments”> 】の前後にタグを埋め込むと、まずソーシャルプラグインが表示され、次にコメント欄が表示されるという流れですが・・・逆がいい場合、つまりコメント欄が表示されその後にソーシャルプラグインを表示させたい場合は、一番下にタグを埋め込めばOKです。
本当に最後の最後、【 </div><!– #comments –> 】と</div>で閉じられていると思うので、その後にコピペしてください。
ソーシャルプラグインの設置場所②
記事の上
今度は記事が始まる直前、だいたい想定しているのは記事タイトルの後がいいかな〜と思っておりますので、“ 記事タイトルと本文の間に表示させる方法 ”です。
しつこいようですが、使用しているテンプレートはTwenty Elevenです。
まず通常の投稿であれば【 content-single.php 】というファイルが記事を出力しています。このファイルを開くと、【 h1 】とか【 header 】とかいう文字が見つかるかと思います。
<?php
/**
* The template for displaying content in the single.php template
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
/* ▼ ソーシャルプラグイン系 ▼ */
/* ▼ いいね！ボタン ▼ */
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
/* ▼ tweetボタン ▼ */
<a href="https://twitter.com/share" class="twitter-share-button" data-via="TwitterID" data-lang="ja" data-related="ユーザーネーム">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
/* ▼ Googleプラスワンボタン ▼ */
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>
/* ▲ ソーシャルプラグイン系 ▲ */
<?php if ( 'post' == get_post_type() ) : ?>
11 行目辺りからヘッダーやタイトルに関しての記述らしきものが見つかりますよね。
ここの【 <h1 class=”entry-title”><?php the_title(); ?></h1> 】の後にソーシャルプラグインのタグをコピペすればOKです。
ソーシャルプラグインの設置場所③
記事の上と下
最後は記事の上にも下にも「いいね！」ボタンやツイートボタンなどのソーシャルプラグイン（ソーシャルボタン）を表示させる方法です。
と言っても、①と②の両方すればいいだけです。
こちらの記事で書いたように、ページの URL は自動的に取得してくれるようになってますので、上も下も連動していることになります。
ソーシャルボタンを好きな位置に配置できるように
以上を参考にして頂ければ、だいたい一般的なソーシャルプラグインの配置には対応できるかと思います。
最近は自力で設置しなくても、テーマに元々設置されていたりプラグインを使ったりすることで簡単に設置できるようになっていますので、それらを使用するのもいいと思います。
『Facebookの「いいね！ボタン」を設置したい』
「いいね！ボタン」の設置だけなら、そんなに難しくなさそうなのですが、大事な大事なOGP設定ってのをするには、ちょっとややこしい感じが・・・。プラグインを使えば簡単みたいですが、自分の好きなようにレイアウトを変えられない（！？・・・できるのかもしれませんが）ので、なんとか自力で頑張ってみようかと・・・。
なお、記事を書いている 2012 年 2 月 4 日時点の内容です。
- Facebook のデベロッパー（開発者）として登録してアプリケーション ID を取得する
- 「いいね！ボタン」のタグを取得する
- 「いいね！ボタン」のタグを WordPress に書き込む（←この記事はここまで）
- OGP 設定用のタグを取得する
- OGP 設定用のタグを書き換える
- OGP 設定用のタグを書き込む
大まかに言うと以上の流れです。
１．Facebook デベロッパーとして登録してアプリケーション ID を取得する
こちらのページからデベロッパーとして登録して、アプリケーション ID を取得します。
え？ 開発者として登録するの？ 自分そんな開発とかできないんだけど・・・と思う方もいるかもしれませんが、大丈夫です。ただ登録するだけなら誰でもできます。それにソーシャルプラグインを設置するだけのための登録で、別に開発とかしなくて大丈夫です。
・Facebook デベロッパーの登録をする
デベロッパーの登録に関してはこちらの動画が分かりやすかったです。
ぼくはこの動画を登録後に探したので、特に参考にしたわけではありませんが、もし分からない事があった方は参照ください。ちなみに、動画の最後にあるアイコン画像のアップロードは急ぎでする必要はありません。
・アプリを作成する
右上のアプリという部分をクリックするか、もしくは既に画面が開いているかもしれませんが、以下のページを開きます。
そして【 ＋新しいアプリケーションを作成 】という部分から先へ進みます。
【 App Display Name 】という部分に好きな名前を入れてください。問題なければ「Valid」と緑色の文字で表示されます。その下の【 App Namespace 】という部分はとりあえず空白でもいいと思います。
続行を押すとセキュリティ認証を求められますので、大文字・小文字を区別して合格するまで文字を入力してくださいw
・App IDを取得する
そしたら以下のような画面が表示されると思います。
必要なのは上から２段目の【 App ID 】という部分です。ここに書かれている数字をメモしておきましょう。
あと、もう一つやらなければならないのは、下の方にある「アプリを Facebook に統合する方法を選択してください」という部分で、 ウェブサイトという部分を開き、「いいね！ボタン」などのソーシャルプラグインを設置したいサイトのURLを入力しておきます。
あと、「基本データ」のところにある【 アプリのドメイン 】という部分にもサイトのドメインを入力しておきました。（入れた方がいいのかどうかは今のところ不明です）
２．「いいね！ボタン」のタグを取得する
さて、次はお待ちかねの「いいね！ボタン」のタグを取得しましょう。
まずはこちらのページへ行きます。
もしくはアプリのページの真ん中辺りに「オープングラフ」という項目があるのですが、そこの「利用開始」、もしくは「オープングラフを編集」という部分から進む事もできます。
何かこの部分の表示が変わってました。今は「利用開始」とか「オープニング」とかは表示されていないようです。
・ソーシャルプラグイン（Social Plugin）を開く
左側のサイドバー上から 2 つ目が「Core Concepts」となっていますが、そのカテゴリの 2 番目が「Social Plugins」となっていますので、ここをクリック！
・「いいね！ボタン」＝Like Button のスタイルを決める
こんな感じで Facebook 用のソーシャルプラグインがたくさんありますが、今回のテーマは「いいね！ボタン」の設置でしたので、こちらをクリックします。
するとStep1と書かれたボックスが表示されていますので、ここで好みのスタイルに「いいね！ボタン」をカスタマイズしましょう。右側にプレビューが即座に表示されるので、英語が分からなくても色々いじっていればどう表示されるのかつかめるかと思います。カスタマイズは以下をご参考ください。
① ブログの URL を入力
この時一番上にある【 URL to Like 】という部分ですが、とりあえずはブログのトップページのURLを入力しておきましょう。トップページのURLを入力していた場合は、どのページで「いいね！ボタン」を押されても、トップページが「いいね！」をされたこととして認識されます。
つまりブログの記事ごとに「いいね！」されても、他の人の Facebook 上ではブログが「いいね！」されているとした映らないということです。（個別記事は紹介されていないということに）というわけなので、この URL の部分は個別記事のURLを自動的に関連づけられるように後で変更します。
②「送るボタン」
「送るボタン」を表示するどうかを選びます。ぼくは一応選んでおきました。
③ ボタンのスタイル
「いいね！ボタン」のスタイルを 3 つのタイプから選べます。
「いいね！ボタン」だけが表示されるタイプの【 スタンダード（standard）】。「いいね！ボタン」を押した人の人数が横に表示される【 ボタンカウント（button_count）】。その人数が上に大きく表示される【 ボックスカウント（box_count）】の３タイプです。
プレビューで確認できますので、好みのタイプを選んでください。
④ ボタンスペースの横幅
「いいね！ボタン」の横幅ではありません。“ ボタンスペース ”というふうに表現したのには意味があります。
「いいね！ボタン」を設置した場合には、ボタンの横に『○○さん他●●人が「いいね！」と言っています。』というメッセージが出てくるのですが、このメッセージが表示される範囲まで含めた横幅になります。この横幅を広くすれば、メッセージが１行で表示されやすくなりますし、横幅を狭くすれば、メッセージの表示される行数が増えるでしょう。
ただ、あまり狭くすると表示がおかしくなるようなので、最低でも 300（px）はあった方がいいでしょう。
※幅はピクセル値になります。入力は数字だけで OK。
⑤「いいね！」した人の顔の表示
「いいね！」をした人の顔が表示されるかどうか選べます。
⑥「いいね！」or「おすすめ」
選択肢は「like」か「recommend」です。「like」の場合は日本語で「いいね！」と表示され、「recommend」の場合は日本語で「おすすめ」と表示されます。
「いいね！」と「おすすめ」の違いですが、役割・用途に違いはないようです。ただ表示の違いというだけで、、、どちらのニュアンスが適しているかということで選ぶとよいかと思います。
⑦ ボタンの背景
正確には“ 配色 ”ということですが、明るい配色か暗い配色か選べます。あまり暗い配色の人を見た事ないですが、ブログがダーク系だったら暗い配色でもいいかもです。お好みで。
⑧ フォント
日本語の場合関係ないようです。
・「いいね！ボタン」のタグを取得する
最後に一番下の【 Get Code 】を押すとタグの書かれたウィンドウがポップアップで出てきます。色々なブログを見ても、使っているタグは「IFRAME」が主流のようですが、ぼくが取得しようとした時には「HTML5」か「XFBML」のどちらかしか選べませんでした。
正確には選べなかったというか、「IFRAME」のタグを取得するには、何やら条件があるようです。
こちらがその条件
This plugin does not have an iframe implementation with the selected options. Please use the JavaScript SDK and the HTML5 or XFBML implementations, or change the value of the
sendparameter.
簡単に言えば、「送るボタン」（Send Button）も一緒に表示させる場合は「IFRAME」は使えませんよ、ということらしいです。なので方法は２通りしかありません。
- 「送るボタン」のチェックを外し、「IFRAME」のタグを取得する
- 「送るボタン」のチェックをそのままにし、「HTML5」のタグを取得する
「XFBML」でもいいようですが、（というかチェックボックス欄には「XFBML Only」と書かれてる・・・）聞いた事ないし得体がしれないので、まだ聞いた事はあるHTML5にしました。
３．「いいね！ボタン」のタグをWordPressに書き込む
HTML5のタグを選んだ場合、WordPressのテンプレートの方に記入すべきタグは２種類ありました。
図の方では ① と ② に分けさせてもらいました。
※ちなみに、アプリを複数つくっていた場合、「This script uses the app ID of your app:」の横にある部分で、どの App ID で「いいね！ボタン」をつくるかが選べます。
・スクリプトをheader.phpに書き込む
まず ① の方ですが、WordPress の【 header.php 】に書き込みます。使っているテンプレートはデフォルトの Twenty Eleven です。「理想的には<body>のすぐ後に配置します」とあったので、言われた通り<body>のすぐ後にコピペしてみました。
<body <?php body_class(); ?>>
<!-- Facebook ソーシャルプラグイン用スクリプト -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=アプリケーションID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Facebook ソーシャルプラグイン用スクリプト -->
・記事ごとに「いいね！」をしてもらえるようにURLを変更する
そして ② の方は「いいね！ボタン」を表示させたい場所に配置します。Twenty Eleven の場合どこに配置すればいいかというと、表示させたい位置によって変わってきますが、まずはこのコードを若干書き換える必要があります。
それはトップページの URL で取得したボタンのままだと、どこのページや記事で「いいね！」をされたとしても、記事ではなくブログが「いいね！」された事にしかならないからです。
まだ未経験ですが、色々情報をあさるとそうなってしまうようです。 ですので、ここは各記事ごとにいちいち URL を変更して「いいね！ボタン」を配置するなんて面倒なことをしなくていいように、自動的にそのページの URL にしてくれるように変更をしましょう。
おそらく今のままだと、【 data-href=”ブログのURL” 】という部分があると思うのですが、この “ ブログの URL ” を
<?php the_permalink(); ?>
に変更します。
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-width="450" data-show-faces="true"></div>
これで、ワードプレスの場合は記事ごとの URL を取得してくれるようになります。
・「いいね！ボタン」を表示させたい場所にコード（タグ）を書き込む
さて、ここまでできれば後はタグを書き込みたいのですが、、、どこに配置するかで表示場所が若干変わってきますので、少々長くなりそです。
なので詳しくはこちらをご確認ください。
と、まぁ今はタグをメモ帳にでも貼っておいてもらって、先に OGP 設定の方へと進みましょう。
続く・・・
]]>