自作のFacebookソーシャルボタンを設置（プラグイン使わない）

ホームページやブログにFacebookのソーシャルボタン（シェアボタン）を設置します。
シェアボタンがあれば、自分のページをFacebookの友達に紹介してもらえる可能性があります。通常の「いいね！」ボタンやシェアボタンは、以下のサイトから取得できます。

→Facebook developers

ただし、仕様でいるボタンのデザインは限られてしまいます。
今回は、オリジナルのボタン画像を使用する方法を紹介します。

完成イメージ

以下のようにオリジナル画像を使用したシェアボタンを作成します。

手順

①ロゴを用意します。自作したりどこかのサイトから頂いても結構です。以下のサイトに公式のロゴが配布されています。

→Facebook Brand Resources

②シェアボタンのソースコードを設置します。定番は、個別投稿ページの上部です。以下のように取得したソースコードをsingle.phpの設置したい場所に記述します。

<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'facebookwindow', 'width=550,height=450, personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">
<img src="<?php bloginfo('template_url'); ?>/images/オリジナルロゴ.jpg" width="サイズ" height="サイズ" />
</a>

※赤文字の部分は、ページごとのURLを取得するためにwordpress用に修正した箇所です。

③シェアしてもらうときの表示設定をします。シェアボタンをクリックすると、以下のような画面が表示されます。

↓クリック

通常は、metaタグで指定しているDescriptionや、titleタグのタイトル名が挿入されます。もう少しスマートにしたい場合は、header.phpやindex.phpのhead要素にOGPを追加します。

OGPの詳しい仕様は以下のサイトに掲載されています。

→オープングラフプロトコル

④head要素のmetaのエリアに以下の記述を追加しましょう。

<meta property="og:site_name" content="サイト名" />
<meta property="og:type" content="Object typesから選択" />
<meta property="og:url" content="http://のサイトURL" />
<meta property="og:title" content="記事タイトル" />
<meta property="og:image" content="記事サムネイル画像" />
<meta property="og:description" content="記事の見出し文" />

wordpress向けOGPは次回説明します。