iconsDB.comの基本的な使い方

(1) ロゴやアイコンを検索する

検索窓にキーワードを入力して検索したり、トップに表示されているアイコンを選択したり、サイドバーのタグからキーワードを選びます。該当するアイコンやロゴが検索結果にいくつか表示されます。

(2) 色を指定してロゴやアイコンを選択する

カラーバリエーションも複数選択肢が表示されていますが、任意の色を指定することもできます。結構細かい指定もできるようです。アイコンやロゴのタイプが複数あるときは、好きなものをクリックしてください。

(3) サイズとファイル形式を選んでダウンロードする

好きなファイル形式の列で、好きなサイズを選んでダウンロードします。全サイズを一括でダウンロードすることもできますし、任意のサイズにカスタムしてダウンロードすることも可能です。

自由度の高いアイコン・ロゴ素材が手に入る

このサイトの特徴は、

となっているところです。
しかもアイコンのデザインもフラットでシンプル。変な装飾もないから使いやすいはずです。個人利用・商用利用どちらも無料で使えます。クレジット表記も不要。まぁようするに好きに使って構わないということですね。ただし、感謝の気持ちは忘れないように＾＾
とにかく色々なタイプのアイコンが、色々なカラーで、デフォルトで 8 サイズ分用意されています。各色のアイコンと、その反転バージョンのアイコンもあったり、ダウンロードできるタイプも、ICO・PNG・GIF・JPG とそろっていたり、、、もうここを押さえておけばアイコンで困ることはないのではないでしょうか？

まとめると・・・

あなたのサイトのイメージに合わせて、マッチする色のアイコンをダウンロード、あとはソーシャルボタンの画像をオリジナルに変更すれば OK ですね。ちなみに、これについては Google で検索するとたくさんのサイトが出てきます。
どこを見てもだいたい同じことが書かれていますが、Facebook など、ボタン仕様変更の影響で一部正常に作動しない場合もあります。できるだけ最新の記事を参考にした方がいいでしょう。
＞ ソーシャルボタンでオリジナル画像の使用方法 ― 参照
ソーシャルボタンなどのオリジナルアイコン使用、ちょっと暇つぶしにでもチャレンジしてみてはどうでしょうか？

ものすごい勢いでユーザー数を増やしている LINE。その LINE が公式のソーシャルメディアボタンをリリースしました。
それがこちら・・・

LINEで送るボタン！

設置に関してはこちらに記載されています。とても簡単そうです。WordPress 向けのタグもちゃんと用意されていて、とてもありがたいですね。
早速設置してみようと思ったのですが、どうもスマホ対応のみのようです。スマホでサイトやブログを見ている人がこの「LINEで送るボタン」を押すと、記事タイトルや URL を簡単にシェアすることができるというわけです。
しかし、PC で閲覧している人が「LINEで送るボタン」を押してしまうと、LINE の公式サイトへとジャンプしてしまいます。つまり、せっかく見に来てくれているユーザーを、自分のブログから離脱させてしまうのです。なので、設置するのはいいけど、スマホでは表示・PC では非表示にした方がいいなという見解に至りました。

まず基本：LINEで送るボタンをWordPressに設置する方法

まずは LINEで送るボタンを設置する手順を示しておこうと思います。

(1) ボタン画像をダウンロード＆アップロード

「LINEで送るボタン」の画像は自分のサーバーに自分で設置する必要があります。まずは、こちらのページの最下部から、ボタンの画像フォルダをダウンロードしてください。【linebutton】というフォルダがダウンロードできると思います。
中には画像ファイルが 5 種類入っています。

(2) ボタン画像をアップロード

ダウンロードした画像は、フォルダ（linebutton）ごとサーバーにアップしましょう。どこにアップしてもいいんですが、子テーマファイルに images フォルダを用意してその中に入れるのがいいと思います。

(3)「LINEで送るボタン」タグの編集

LINEで送るボタンの WordPress 用のタグは、以下のようになっています。

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

任意で指定するのは 3 つあります。

• ボタン画像の URL
• ボタン画像の幅
• ボタン画像の高さ

URL は絶対パスで指定。幅や高さは使いたい画像ファイル名にある数字をそのまま当てはめれば大丈夫です（ px などの単位は不要）。

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://ドメイン/wp-content/themes/twentyfifteen-child/images/linebutton/linebutton_40x40.png" width="40" height="40" alt="LINEで送る" /></a>

(4) テンプレートに「LINEで送るボタン」を貼る

次に WordPress のテンプレートに「LINEで送るボタン」のタグを書き込みましょう。どのテンプレートに書き込むか悩むところですが、今回は【content.php】に書き込みました。他の候補としては、【content-single.php】や【comments.php】などが上げられます。
詳しくはこちらを参照ください。

どこに「いいね！」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか？

スマホで閲覧している人にのみ「LINEで送るボタン」を表示させる条件分岐分岐タグの使い方

さて、普通の設置方法が分かったところで、次は条件分岐タグを使ってスマホで見ている場合のみ「LINEで送るボタン」を表示させたいと思います。PC で見た場合は非表示なるというわけです。
条件としては・・・

という指定ができれば OK ですね。

PCサイトとスマートフォン用サイトを分ける条件分岐タグを発見

スマートフォン用のコンテンツを指定できる条件分岐タグを探してみたところ、やはりありました！さすがです！
そのタグはこちら

wp_is_mobile()

ただし、WordPress のバージョンが 3.4 以降ということで、使用する場合はバージョンに気をつけてください。

スマホ向け条件分岐タグの設置例

「LINEで送るボタン」をスマホ向けサイトでのみ表示されるようにする、具体的なソースコードはこちらです。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile()): //スマートフォン向け ?>
	<!-- ここに「いいね！ボタン」などソーシャルプラグインのコードを記載 -->
	<!-- ▼ LINEで送るボタンここから ▼ -->
	<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>
	<!-- ▲ LINEで送るボタンここまで ▲ -->
<?php elseif ( is_search() || is_home() || is_archive() ) : //このタグは無くてもOK ?>
<?php else: //スマートフォン以外 PC向け ?>
	<!-- ここに「いいね！ボタン」などソーシャルプラグインのコードを記載 -->
<?php endif; ?>

if の後に function なんたらかんたらと、なんだかややこしい事が書いてありますが、参考にさせて頂いたサイトに書かれていた通りのやっておりますので、詳しいことは分かりません。ただ、WordPress のバージョン 3.4 以前バージョンであったとしてもエラーにならない書き方のようです。

実際にどのように表示されているのか・・・？

条件分岐タグを使えばご覧の通り、

PC で見たときは「LINEで送るボタン」は表示されませんが、スマホで見ているときはちゃんと表示されています。
ちなみに、スマホ向けの表示を WordPress のプラグイン WPtouch で設定している場合は、テンプレートファイルに書き込んだソーシャルプラグイン関係がうまく表示できません。
この点は解決できませんでしたが、EZ zenback などを使って組み込むと上手くいくようです。ただし、その場合は条件分岐タグが使えなくなるので、スマホ用の CSS で表示・非表示を変えるしかないのかな〜・・・と思います。
ぜひ試してみてください。

OGP 設定の手順

前回の『「いいね！ボタン」の取得方法』では、手順 3 までをまとめましたので、この記事では手順 4・5・6 についてまとめたいとおもいます。

４．OGP 設定用のタグを取得する

Facebook の DEVELOPERS にログインして、OGP 用のタグを取得し、必要な箇所を書き換えて行きます。

OGP設定ページの表示

タグは「いいね！ボタン」を取得したページと同じ場所にあります。アプリ管理画面の中段、【オープングラフ】というところから【利用開始】、もしくは【オープングラフを編集】をクリックして先に進みます。
そして【Open Graphの詳細はこちら】をクリックすると新しいウィンドウでソーシャルプラグインのページを開くことができます。左サイドバーにある【Social Plugins】をクリックして、一番上の【Like Button】のページを開けばOKです。

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(); ?>>

<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 設定は以上です。気休め程度に参考にしてみてください。

参考にさせて頂いたサイト

ありがとうございました！

大まかに言うと以上の流れです。
今回は３．の「いいね！ボタンの」タグを 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 を取得する

こちらのページからデベロッパーとして登録して、アプリケーション 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 send parameter.

簡単に言えば、「送るボタン」（Send Button）も一緒に表示させる場合は「IFRAME」は使えませんよ、ということらしいです。なので方法は２通りしかありません。

「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 設定の方へと進みましょう。
続く・・・

WordPressにいいね！ボタンを設置する時のOGP設定

ただ、このページで取得できるコードをそのまま貼付けると、ブログ記事ごとにブックマークしてもらえなくなります。
つまり、どの記事でブックマークされたとしても、ブログトップページがブックマークされた事になってしまうので、以下の方法であなたのブログに適したコードに変更してください。

１．サイトのURLとタイトルを入力する

はてなブックマークボタンを設置したいサイトやブログのURLとタイトルを入力します。ブログ記事ごとにURLを変更したい場合も、とりあえずはトップページのURLを入力しておきましょう。

２．はてなブックマークボタンのタイプを選ぶ

スタンダード・バーティカル・シンプルの 3 種類のタイプから好きなタイプを選びましょう。

３．URLとタイトルをワードプレスの記事ごとのURLやタイトルに変更する

コードをコピーしてはてなブックマークを表示させたい位置に貼る必要がありますが、今のままだとブログのトップページの URL やブログタイトルが指定されていますので、はてなブックマークが設置されている記事ごとに URL とタイトルをその記事に合わせて変更する場合は、コードを若干変更する必要があります。
ワードプレスの場合、記事のパーマリンク（いわゆるURL）やタイトルを表すのはこちらのコードになります。
URLを出力するタグ

<?php the_permalink(); ?>

タイトルを出力するタグ

<?php the_title(); ?>

そしてどこを書き換えればいいかと言うと、以下比べてみてください。

<a href="http://b.hatena.ne.jp/entry/入力したブログURL" data-hatena-bookmark-title="入力したブログタイトル" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async">
</script>

↓

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?>｜入力したブログタイトル" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async">
</script>

入力したブログURLの部分を【 <?php the_permalink(); ?> 】に、入力したブログタイトルの部分を【 <?php the_title(); ?>｜入力したブログタイトル 】に変更しています。
ブログタイトルの部分は、記事ごとのタグ（<?php the_title(); ?>）だけにしてもいいですが、
<?php the_title(); ?>｜ブログタイトル
みたいにして、ブログの中の１記事であるように表現してもいいと思います。

４．コードをはてなブックマークを表示させたい位置に貼る

基本的にはブログ記事の頭か、最後か、その両方かだと思います。基本的には【 content-single.php 】に書き込めば OK です。
詳しくは別記事にまとめましたので、ご参考ください。

どこに「いいね！」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか？

WordPressへTwitterのツイートボタンを設置する方法

単純にタグを貼るだけなので簡単です。
こちらのページでタグは取得できます。

取得したボタンのタグはこんな感じです。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</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>

日本語で、サイズは大です。

ツイートボタンのツイート数の吹き出しを右横から上に表示させる方法

ぼくが前に見た時はツイートボタンの設定を行う際に、デザインを何種類か選ぶ事ができ、その中に以下のようなツイート数の吹き出しが上に表示されるボタンがありましたが、現在はデフォルトでは選べないようですね。

↑
このデザインにしたい
でもクライアントさんが上に表示されているボタンがいいと仰ってたので、レイアウトを変えてみました。

<a href="https://twitter.com/share" data-via="ユーザーID" data-lang="ja" data-size="large" data-count="vertical">ツイート</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>

【 data-count=”vertical” 】を追記すれば、ツイート数の吹き出しが上に表示されるようになります。後はツイートボタンを表示させたい場所に、上記のコードをコピペすれば OK です。
では WordPress の数ある PHP テンプレートの中の、どこに書けばいいのか？？　Twenty Eleven に関してということになりますが、だいたい以下の4つのファイルに書き込めばいいと思います。

• content-page.php
• content-single.php
• content.php
• comments.php

多くの場合、記事の最初か記事の最後、もしくはその両方に表示させたいと思っているかと思いますので、どこに表示させるかで設置位置が変わってきます。
詳しくはこちらの記事にまとめましたので、ご覧ください。

どこに「いいね！」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか？