流行のいいね!ボタンをページにつけましたよ。
やり方がいろいろあるんですねえ。
Facebookにコードを作ってもらう方法
Like Button – Facebook開発者のページで、必要な情報を入力して[Get Code]ボタンをクリックすると、iframe版とXFBML版のコードが表示されますので、それをページの好きなところに設置します。
デフォルトだと英語の[Like]ボタンですが、コード中の「en_US」部分を「jp_JA」に変更すると日本語の「いいね」ボタンになります。
英語版:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="gfds" show_faces="true" width="450"></fb:like>
日本語版:
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:like href="gfds" show_faces="true" width="450"></fb:like>
ちなみに「fr_FR」にするとフランス語版の[J’aime]ボタンになりますね。
iframe版とXFBML版の違い
iframe版
○低スペックのブラウザ、端末に対応している
×機能が限定されている
×高さを手動で設定する必要がある
→文字サイズを大きくしすぎるとスクロールバーが出る
XFBML版
×JavaScriptの動く端末に限られる
○高機能。できることの幅が広い
○高さが自動で設定される
手動で追加情報を入れる方法
1. AppIDを指定して基本のJSを読み込む
下記のコードをページのどこかに書くことで、ボタンをAppIdと紐づけます。
AppIdはCreate an App – Facebook開発者のページで、いいねボタンを表示させたいサイトのURLを入力して取得します。
下の「### YOUR APP ID ###」の部分を、ここで取得したIDに置き換えて入れます。
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '### YOUR APP ID ###',
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
2. ボタンを表示させたい場所に所定のタグを入れる
下記のコードを入れた場所に、いいねボタンが表示されますよ。
「### URL ###」に、いいね!したいページのURLに変更します。
<fb:like href="### URL ###" show_faces="true" width="450"></fb:like>
WordPressの場合は下のように書けば自動的にURLが入りますね。
<fb:like href="<?php the_permalink() ?>" show_faces="true" width="450"></fb:like>
3. その他の付加情報をmetaタグで指定する
Open Graph Tagsというmeta情報をheadタグ内に記述します。
コンテンツのタイトルを指定する例:
<meta property="fb:title" content="鍋パーティー@うつみさんち" />
他にも以下の情報が使えるみたいです。たぶん
- og:title
- コンテンツのタイトル
- og:type
- コンテンツの種類。Object typesから選ぶ
- og:image
- コンテンツをよく表現している画像
- og:url
- ボタンのほうで指定したのと別のURLを指定する。canonical URLみたいな使い方
- og:site_name
- サイトの名前
- fb:admins
- 管理者のFacebook ID。複数指定するときはカンマで区切る
- fb:app_id
- 上記の管理者IDを使わない場合は、AppIdを入れておくのですね
- og:description
- ページの簡単な説明
他にもいろいろできそうなんで、ちょっと使ってみて、また書きますね。