FacebookのlikeボタンをプラグインなしでWordpressにつけてみた

memo

Facebookの”like”ボタン（「いいね」ってやつ）をつけてみました。

WordPressだと該当のプラグインがたくさんあるので、簡単につけれるみたいですが、

今回はカスタムとかしやすいように、プラグインなしでつけてみることにしました。

  1. まずはアプリケーションの登録

    アプリケーションを作成よりアプリケーションを作成します。

    サイト名、サイトURLをいれて、地域は「日本」を選択して、アプリケーションを作成。

    アプリケーションの登録

  2. JavaScriptの追加

    登録されると、アプリケーションに関する情報とサンプルコードが表示されます。

    アプリケーションの登録完了

    ページにjsを追加。読み込み速度とか考慮するとfooter.phpの</body>直前とかがいいのかも。

    追加するjsは登録完了ページに表示されるコードの以下の部分。

    &lt;div id="fb-root"&gt;&lt;/div&gt;&lt;script> window.fbAsyncInit = function() { FB.init({appId: 'アプリケーションID', status: true, cookie: true,xfbml: true}); }; (function() { var e = document.createElement('script'); e.type = 'text/javascript'; e.src = document.location.protocol +'//connect.facebook.net/ja_JP/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); &lt;/script&gt;

  3. likeボタン表示コードの追加

    likeボタンを表示するコードを追加します。

    &lt;fb:like&gt;&lt;/fb:like&gt;
    各記事ごとに追加するので、Wordpress3.0以上の場合はsingle.phpに追加します。

以上で、設置完了です。

アプリケーションページで設定の変更などができます。

アプリケーションページ

ここまでしたので、つぎにOpen Graph Protocolに対応させます。

Open Graph Protocolとは、Facebook以外のwebコンテンツ（webサイトやブログなど）をFacebookと統合するための仕様。みたいなものらしい。

詳しくはFacebookのページをみてください。

とりあえず、仕様に沿ってmetaタグのあるheader.phpに追加。

&lt;meta property="og:title" content="&lt;?php bloginfo('name'); ?&gt; | &lt;?php the_title_attribute(); ?&gt;"/&gt; &lt;meta property="og:type" content="blog"/&gt; &lt;meta property="og:url" content="&lt;?php the_permalink(); ?&gt;"/&gt; &lt;meta property="og:site_name" content="&lt;?php bloginfo('name'); ?&gt;"/&gt; &lt;meta property="og:image" content="画像ファイルのURL"/&gt; &lt;meta property="og:description" content="&lt;?php bloginfo('description'); ?&gt; /"&gt; &lt;meta property="fb:app_id" content="アプリケーションID"/&gt;

  • og:title

オブジェクトのタイトル。ここではブログ名（bloginfo(‘name’)）と各ページのタイトル（the_title_attribute）を使用しました。

  • og:type

オブジェクトのタイプ。ブログなのでblogを使用しました。一覧はこちらにあります。

  • og:url

オブジェクトのURL。ここではページのパーマリンク（the_permalink）を使用しました。

  • og:site_name

サイト名。ここではブログ名（bloginfo(‘name’)）を使用しました。

  • og:image

    オブジェクトを表す画像のURL。画像は50*50px以上で、縦横比3：1以下らしい。適当にアイコンやアバターの画像を引っ張ればいいと思う。

  • og:description

オブジェクトの概要を説明。ブログの概要（bloginfo(‘description’)）を使用しました。

  • fb:admins or fb:app_id

FacebookユーザIDかFacebook PlatformアプリケーションIDを登録します。

以上で、たぶんOpen Graph Protocolに必要な最低限のことはできたと思う。

ただしく設定出来ているかは、URLリンターというものでチェックできます。

Comments