WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。

詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。

しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。

かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。

• 投稿の編集 ‹ INSPIRE TECH — WordPress

スマートフォン向け対応できるCSSを書いた

DISQUSはAPIの管理画面から、独自にCSSを適用することが可能です。

そこで、PC向けのログインウィンドウをスマートフォンで見た際にも、綺麗に画面内に収まるようカスタムCSSを作成してみました。

.dsq-popup[id] {
	position: absolute !important;
}

.dsq-popup-container .dsq-popup-close {
	right: 5px;
	top: 5px;
	position: absolute !important;
	z-index: 1200 !important;
}

.dsq-popup-container .dsq-popup-title {
	position: relative !important;
}

.dsq-popup-container .dsq-popup-title h3 {
	font-size: 12px !important;
}

.dsq-popup .dsq-tabbed-modal {
	background: none !important;
}

#dsq-popup-message #dsq-login-disqus iframe {
	height: 300px !important;
}

.dsq-popup-body {
	width: auto !important;
}

.dsq-login-box .dsq-popup-body {
	width: 300px !important;
}

.dsq-popup .dsq-modal-tabs {
	width: auto !important;
	float: none !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li {
	float: left !important;
	width: 43px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li a {
	padding: 4px 6px !important;
	text-align: center !important;
	font-size: 0px !important;
	border-bottom: none !important;
}

.dsq-popup .dsq-tab-container {
	padding: 10px !important;
	font-size: 12px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a {
	border-bottom: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	background: #eee !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a:hover {
	border-bottom: none !important;
}

適用方法

適用したいアカウントのアピアランスパネルを開きます。

スクロールして中ほどより下にある、Custom CSSの欄に上記コードを記述して保存します。

JavaScriptの設置

上記CSSだけではポップアップウィンドウの位置がおかしくなるため、下記JavaScriptを設置してください。

jQuery(function($) {
	setInterval(function() {
		$('#dsq-popup-message').css({
			'position': 'absolute',
			'top': $(window).scrollTop() + 10
		});
	}, 1000);
});

スマートフォンでの表示

こんな感じで表示されます。

注意

カスタムCSSはPC版にももれなく適用されてしまうため、PCとスマートフォンで利用する場合には、上記CSSにスマートフォンのみのクラス名やIDなどを追加するなどして、環境によって表示を切り替えられるよう工夫が必要です。

以下は何も設定していないFacebookのコメントプラグインです。

コメントができる以外に、特に機能はありません。

ここで、ちょっとした設定を加えるだけで下記のような、コメントのモデレーションやコメントプラグインの挙動を設定できる、管理画面を表示することができます。

fb:adminsを指定する

まずは自身がWebサイトの管理者であることをコメントプラグインに知らせるために、OGPの属性であるfb:adminsを指定します。

OGPってなんぞ？という方は、下記の記事を参照ください。

• Facebookのいいね！ボタンを設置しても、OGPの設定がされていなければ意味が無い » INSPIRE TECH

fb:app_idを指定する

コメントを管理するためのFacebookアプリケーションのIDを、こちらもOGP属性であるfb:app_idとして指定します。

「アプリなんて作ったことないよ！」という方も、Facebookのいいね！ボタンを作成したことがあれば、その際に自動的にいいね！ボタン用にFacebookアプリケーションが作成されていますので、そちらを使うと手間が省けます。

すでに存在するFacebookアプリケーションのIDを確認するには、Facebookにログインした状態で下記のURLにアクセスします。

• Facebook開発者

ログインした人が作成したFacebookのアプリ一覧が表示されますので、その中の「アプリID」をメモして利用して下さい。

Facebookアプリケーションを作成したことが無い場合

Facebookアプリケーションを作成していない場合、上記URLにアクセスすると、下記のような画面が表示されます。

開発者登録

Facebookでアプリケーションを作成するには、必ず開発用のアプリケーションを許可し、さらにデベロッパー登録が必要になります。

このデベロッパー登録については、下記のURLに詳細が記載されていますので参照ください。

• Facebookデベロッパーに登録する際、携帯アドレスでアカウント認証する方法-がんばるデザイナ tuts!

アプリ作成

デベロッパー登録が完了したら再度先ほどの画面に戻り、右上にある「Create New App」をクリックします。

表示されたウィンドウに必要事項を記入してOKをクリックして下さい。
アプリケーション名は基本的に外部に公開するようなアプリケーションでは無いので、サイト名＋Appとしておくのがわかりやすくて良いと思います。、

CAPTCHAの確認後、アプリケーションの作成が完了します。
完了後の画面にあるApp IDをメモして利用して下さい。

fb:app_idを指定しない場合

fb:app_id、すなわちFacebookのアプリケーションIDを指定しないと、コメントプラグインの設定画面は表示されますが、機能が大きく制限されてしまいます。

Facebookのアプリケーションは、必ずしもFacebookのソーシャルプラグインの導入には必要ではないのですが、導入することによって、今回紹介している機能を含めて、下記のような機能が利用できます。

• すべてのコメントをFacebookアプリケーションの管理画面から一括で管理できる
• Webページに設置したコメントプラグインで、Facebookアプリケーションのコメント管理画面と同等の設定が可能になる
• いいね！ボタンを押してくれた人全員にアプリケーションを通じてお知らせなどを送ることができる

よほどのことがない限り、Webサイト用にひとつ作っておくことで、その後の管理が楽になります。

URL LinterでFacebookに通知

上記の作業が終わったところで、Fecebookにログインしてから、設置したURLをURL Linterで読み込んでみましょう。

• URLリンター – Facebook開発者

この作業は行わなくても、約一日で反映されるのですが、一応正しく設置されているのを確認する為に、読み込んでおくと良いでしょう。

すると、コメントプラグインのUIが下記のように変わります。

ここで「設定」リンクをクリックすると、最初に紹介したようなコメントプラグインの挙動をカスタマイズ画面が表示されるようになります。

このリンクから管理用ページにアクセスすると、Facebookページ（旧ファンページ）のような画面になります。

実は管理用ページというのは、外部のWebページ用のFacebookページのようなもので、管理者であるユーザー以外は見られないということ以外、ほぼFacebookページと同一の機能を持っています。

そのため、いいね！ボタンを押してファンになってくれた方などに、後から一斉にお知らせを配信することが可能であり、使い方によっては非常に便利なページです。

詳細が下記のサイトに載っていますので、是非一度ご覧下さい。

• フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

しかし、この管理用ページへのリンクですが、いいね！ボタンの対象であるWebページのog:type属性がarticleの場合には、表示されず、アクセスすることができません。

よって、上述のような使い方ができないのです。

Facebook側の仕様

これはFacebook側のポリシーがあるようで、

あと、ひとつだけ注意すべきなのは og:type が article なものはこのお知らせの機能は使えません。 これは、 article は一時的なものでリアルなモノを指さない（ブログの記事など、それ自体がファンの対象ではない）からだそうです。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

ということで、バグなどでは無く明確な仕様のようです。

表示されない場合はog:typeをチェックしてみる

最初に、

意外と気付いていない方が多いのがこの3つ目です。 冒頭で「外部ページをFacebookページに見せかけれる」と書いたかと思います。 実は、OGPを設定すれば、普通のFacebookページとは違う、「外部ページ用のFacebookページ」が生成されています。 2 この「外部ページ用のFacebookページ」のウォールにコメント・URL等を投稿する事で、そのページに「いいね！」を押した人のニュースフィードに、アップデート通知を送れるのです。

＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね！」ボタンと「OGP」の設定方法、超解説:ガイアックスソーシャルメディア ラボ／Facebook・twitterの企業利用法についての研究機関

という記述を見て管理用ページの存在を知ったのですが、このサイトではog:type属性がarticleの場合に管理用ページが生成されない点については触れていないため、気づかない方もいらっしゃると思います。

Facebookのいいね！ボタンを設置してfb:adminsを指定してみたけど、管理用ページへのリンクが出ない！とお嘆きの方、当該Webページのog:type属性が、articleになっていないかを確認してみてください。

管理用ページを削除した場合

管理用ページは、一度アクセスするとFacebookページと同様に、Facebookのサイドバーに表示されます。

現在は表示されないようです。アクセスするためには、いいね！ボタンの横にある「管理用ページ」のリンクから行くしか無いようです。（2011.07.09）

そこからFacebookページと同様に管理できるのですが、ここで管理用ページを「削除」をしてしまった場合、次から管理用ページにアクセスできなくなる場合があるようです。

管理用のFacebookページは、いいね！ボタン横のリンクからアクセスするか、URL Linterで当該のページを解析した際に自動生成されるようなのですが、自分の環境だと再生成されなくなってしまいました。

バグなのか仕様なのかわかりませんが、念のため管理用ページの削除をする場合は気をつけて下さい。

どうやらこのエラーはバグのようです。Facebookのバグトラッカーで議論されているようなので、続報があり次第また追記します。 （2011.07.08）

バグの解決がなされたようです。バグトラッカー上でも解決の報告が見られます。自分のWebサイトもURL Linterでのエラーは表示されなくなり、いいね！ボタンにも、正しく「管理用ページ」と「インサイト」のリンクが表示されるようになりました。（2011.07.09）

そんな時便利なのが、FacebookのURL Linterです。
下記のURLからアクセスできます。

• URLリンター – Facebook開発者

このツールがいったい何かというと、入力されたURLのWebページに正しくOGPタグが設定されているかをチェックして、正しくなければエラーを、正しければどういった内容で設定されているかをレビューしてくれます。

いわば、OGPのチェックツールですね。

Facebookのキャッシュも削除してくれる

またこのツールは、入力されたURLに関するFacebook上の古いキャッシュデータを削除してくれる役割も持っています。

基本的にFacebookもWebサイトクローラーのような物を持っていて、Webサイトに設定されたOGP情報などをキャッシュとして蓄えています。

いいね！ボタンやシェアボタンなどでWebサイトがFacebookのウォールなどに流れる際は、キャッシュがあればキャッシュからデータを読み込むため、一度Facebookに掲載されたWebサイトのOGPなどを変更しても、再度FacebookのクローラーがWebサイトのデータをキャッシュしてくれないと、データが更新されません。

URL Linterは、入力されたURLの古いキャッシュを削除して、新しいデータで上書きしてくれます。

そのため、OGPを設定したり、設定し直した場合に利用する事で、新しい情報を即Facebookに反映させることができます。

WordPress用のプラグインも

WordPressを利用していて、一度公開した記事がFacebookにキャッシュされてしまっている場合、タイトルや内容を変更したとしても、やはりFacebookのキャッシュが優先されてしまうために変更が反映されません。

そんな時、下記の記事で紹介されているプラグインを利用すると、URL Linterをフックして即Facebook上のキャッシュを書き換えてくれます。

• firegoby » Blog Archive » 保存の際にfacebookのクローラーを再度お招きするWordPressプラグイン

OGPっていったい何？という方や、Facebookやmixiのいいね！ボタンは設置してみたけどOGPなんて知らないという方は、下記の記事をご覧ください。

• Facebookのいいね！ボタンを設置しても、OGPの設定がされていなければ意味が無い « INSPIRE TECH

OGP属性のog:imageは、Webページのサムネイルを示すもので、正しく指定しておくと、例えばFacebookのいいね！ボタンが押された時などに、リンクやその他情報と共に、そのサムネイルがボタンを押した方のウォールに投稿されます。

実はこのog:imageですが、他のOGPタグと違って、以下のように複数指定しておくことができます。

<meta property="og:image" content="http://inspire-tech.jp/wp-content/uploads/2011/07/facebook-wall-300x134.png" />
<meta property="og:image" content="http://inspire-tech.jp/wp-content/uploads/2011/07/facebook-share-300x258.jpg" />

複数指定する事でどんな意味があるかというと、Facebookのシェアボタンをサイトに埋め込んでいる場合に、クリックした人がシェアする際のサムネイルを、自由に選んでもらうことができるようになります。

Facebookのいいね！ボタンではあまり意味なし

ただ、Facebookのいいね！ボタンに限ってみた場合、og:imageを2つ以上記述する意味はあまりありません。

いいね！ボタンはシェアボタンとは違い、og:image属性が複数指定されていても、シェアボタンが押された場合の画面のような、画像の選択は表示されません。

選択が表示されないばかりか、設定してあるog:image属性の中から1つが、Facebookによって自動的に利用されます。

しかしながら、この自動的に選択する部分の仕様が不透明で、どういった条件で1枚の画像を選ぶのか、その条件が全くわかりません。

画像サイズやファイル名、アスペクト比などでソートされているのかと思っていろいろと実験してみましたが、特に関係が無いようでした。

今後のソーシャルメディア側の対応に期待

今後、各ソーシャルメディアやそのほかのサービスで、さらにOGPを使った機能が増えてくると思いますが、いつ如何なるサービスで、この複数指定が生きてくるかわかりません。

現状ではあまり使い道はないですが、覚えておいても損はないでしょう。

今回はOGPとは何なのか、どのように設定すれば良いのかを調べてみました。

OGPとは？

OGPとは一言で言うと、そのWebサイトのタイトルやWebサイトの説明、制作者の情報やWebサイトの種別などを、ソーシャルメディア側から正しく認識できるように決まった形で記述しておく仕組みを作ろう、というものです。

OGPについての説明は下記サイトが非常にわかりやすく詳細に載っていますので、OGPを知らない方は是非目を通して下さい。

• フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

Facebookのいいね！ボタンはOGPが必須

タイトルにも記述しましたが、Facebookのいいね！ボタンを設置したページにOGPが設定されているかされていないかで、Facebook上での挙動に大きな差が出ます。

まず、OGPが設定されていないWebページのいいね！ボタンがクリックされた場合、クリックしたユーザーのウォールにWebサイトの情報が表示されるだけで、それ以上は特に何もありません。

しかし、OGPが設定されているWebページのいいね！ボタンがクリックされた場合、クリックしたユーザーのウォールと、その友達のニュースフィードにWebサイトの情報が表示されます。

これは、とてつもなく大きな差です。

たった一人のユーザーに認知されて終わるか、そのユーザーのつながっているユーザー全員に認知されるかの差になるからです。

つながりの多いユーザーがいいね！をクリックしてくれれば、そのつながっているユーザー全員にWebサイトの情報が通知されるわけですから、そこからさらに大きな反響を呼び、「いいね！」が「いいね！」を呼ぶことも、大いに考えられます。

OGPの設定

と、非常に重要な役割を担うOGPですが、設定自体は非常に簡単です。
決められた属性を持つmetaタグを、決まったフォーマットでWebページのheadタグ内に記述しておくだけでいいのです。

metaタグを設置するだけ

metaタグの property属性にOGPの属性名を指定し、content属性にその内容を記述します。

<meta property="属性名" content="内容" />

例えば下記のように設定します。

<meta property="og:site_name" content="Webサイト名" />
<meta property="og:title" content="Webページのタイトル" />
<meta property="og:url" content="http://example.com/test_page.html" />
<meta property="og:description" content="サンプルのWebページです。" />

OGPの属性

OGPの代表的な属性を紹介します。

og:site_name

Webページの所属するWebサイトのタイトル

og:title

Webページのタイトル。

og:type

Webページの種類。OGPの仕様で規定されている種類一覧から選択します。

og:image

Webページのサムネイル画像のURL。この属性に限り、複数設置しても大丈夫なようです。

og:url

WebページのURL。ブログの記事などに設定する場合は、この属性にパーマリンクを出力するテンプレートタグを仕込みましょう。

og:description

Webページの簡単な説明です。

上記以外にもOGPには多数の属性がありますので、興味がある方は下記のOGPの詳細仕様を参照して下さい。

• The Open Graph Protocol

Facebook独自属性

FacebookではOGP用の独自属性を定義していて、これを設定することでFacebookプラグインの機能を拡張したり、Facebookでいいね！ボタンのクリック率を計ることが出来る「インサイト」機能などを利用することが可能になります。

fb:admins

Webページの管理者が誰であるかをFacebookのユーザーIDで指定します。管理者が複数存在する場合、ユーザーIDを半角カンマで区切って入力できます。

fb:app_id

Webページと結びつけたいFacebookのアプリケーションIDを指定します。

fb:page_id

Webページと結びつけたいFacebookのファンページIDを指定します。

例えばFacebookコメントプラグインを利用している場合、fb:adminとfb:app_idを指定していると、コメント欄をカスタマイズできる「管理者画面」を表示することが可能になります。

Facebookのいいね！ボタンからのアクセスを一覧・解析できるインサイト機能については下記の記事をご覧下さい。

• Facebookインサイト 「いいね！」でわかるアクセス解析！簡単設定！: 世界中の１％の人々へ

ソーシャルメディア毎の独自属性

上記の他にも、Facebookやmixiなど各ソーシャルメディア毎に独自に追加された属性もあるので、設置の際は各ソーシャルメディアのOGPの説明を、合わせてチェックしてみてください。

FacebookでのOGPの詳細説明（英語）

Open Graph protocol – Facebook開発者

※ OGPの基本属性からFacebook用の独自属性まで、かなり詳細に記載されていますので是非チェックしてください。

mixiでのOGP拡張属性の説明

技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

FacebookでOGPタグの簡単生成

Facebookではサイト毎のOGPタグを簡単に生成できるフォームがあります。
いいね！ボタンを生成するフォームと同一のページに存在するので、いいね！ボタンを設置する際には、こちらも一緒に設置してしまったほうが良いでしょう。

下記のURLにアクセスし【Step 2 – Get Open Graph Tags】という見出しの下にあるフォームが、OGPの生成フォームです。

• Like Button – Facebook開発者

フォームにWebページのURLや説明などを入力することで、そのWebページ用のOGPタグを自動的に生成してくれます。

WordPressでのOGP

WP-OGPプラグインに設定画面を設けて、いろいろな機能追加を施したプラグインをリリースしました。（2011-07-02）

WordPressでは非常に簡単にOGPを導入できる仕組みとして、WP-OGPプラグインというものが存在します。

• WordPress › WP-OGP « WordPress Plugins
• ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」:phpspot開発日誌

プラグインをダウンロードして有効にするだけで、各ブログ記事毎のOGPタグを自動的に埋め込んでくれます。

自分もブログリニューアルに伴って、最近ではアクセスアップに欠かせないと言われるFacebookのいいね！ボタン、6月に正式サービスがスタートし、流行の兆しを見せているGoogle+1（PlusOne）ボタンの設定を行ったので、その設定方法について簡単にまとめてみました。

Facebookのいいね！ボタン

デベロッパー登録

Facebookのいいね！ボタンを利用する場合、スパム対策ということで利用するFacebookアカウントでのデベロッパー登録が必要になります。

デベロッパー登録に関しては下記サイトに詳細がありますので参照のこと。

• Facebookのいいね！ボタンやコメント欄の設置 – 徹夜族

いいね！ボタンを配置するスクリプトを取得

下記のURLにアクセスして、Get Like Button Codeと記載されているフォームに必要な事項を入力します。

• Like Button – Facebook開発者

各入力フォームの詳細は下記の通り。

URL to Like?

いいね！ボタンを設置するURLです。

SendButton (XFBML Only)

特定の人にだけ「いいね！」を通知したい場合に利用する「送信」ボタンを追加します。

Layout Style

いいね！ボタンの表示スタイル（いいね！を押してくれた人数を表示するかしないか、または表示する位置）を選択します。

Width

表示領域の幅を設定します。

Show Faces

いいね！ボタンを押してくれた人の顔写真を表示するかを設定します。

Verb to display

いいね！ボタンを表示するかおすすめボタンを表示するかを選択します。

Color Scheme

ボタンの色を明るめか暗めで選択します。

Font

ボタンのフォントを指定します。英語フォントしか選べないので、カウント数を表示しない限り意味はありません。

最後にGet Codeボタンを押すと、いいね！ボタンを設置するためのコードが記載された、下記のようなウィンドウが表示されます。

もしここで、設置用のコードでは無く英文の警告が表示された場合、デベロッパー登録が済んでいないと思われます。

上述の記事を参考にデベロッパー登録を済ませてから、再度行ってみて下さい。

iframe版とXFBML版

Facebook系のプラグインは特殊で、XHTMLを拡張したXFBMLというFacebook専用のタグを利用して埋め込むか、単純にiframeを使って埋め込むかを選ぶことが出来ます。

どちらでもあまり変わりませんが、行える機能はXFBMLの方が多くなります。
例えば、特定の人だけに「いいね！」を通知するSendボタンを取り付けるためには、XFBMLを利用する必要があります。

また、Facebookのコメントプラグインなど、XFBMLにしか対応していないプラグインもあるので、いろいろなプラグインを導入してみたいと考えるなら、最初からXFBML版を導入するのが良いでしょう。

1ページに複数のいいね！ボタンを設置する場合

XFBNLを利用する場合限定の話になりますが、例えばブログ記事の一覧などで、記事の1つ1つにいいね！ボタンを設置する場合などです。

ちなみにiframe版では関係がないので、そちらを利用する方は、読み飛ばして頂いても大丈夫です。

2011年6月25日現在、XFBMLのタグは下記のようなコードが生成されます。
（アスタリスク * の箇所は、各ユーザー毎に違うAppIDです）

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=***************&amp;xfbml=1"></script>
<fb:like href="example.com" send="false" layout="button_count" width="450" show_faces="true" action="recommend" font=""></fb:like>

このコードを、上記のテンプレートタグを埋め込んだだけでそのまま配置してしまうと、下記の同一部分が繰り返し使用されてしまい、あまりスマートではありません。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=***************&amp;xfbml=1"></script>

この <div> タグと <script> タグはFacebookのJavascriptSDKと呼ばれるもので、他のFacebookプラグイン（コメントプラグインなど）を配置する際にも利用するため、これらはページの1カ所で読み込むほうがソースコードも綺麗になります。

HTMLソースの、<body> タグの終了直前に配置すると良いでしょう。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=***************&amp;xfbml=1"></script>
</body>

また参考として、下記のURLなどにJavascriptSDKの設置方法が記載されていますが、最近では上述の <script> タグによる指定ように、#（ハッシュ）に続けてAppIDや設定値をクエリ形式で記述することにより、ワンライナーで読み込めるようになったようです。

• Facebook ソーシャルプラグイン（いいね！やコメント）を「正しく」設置する方法 | iPhone 研究室（iPadもね）

これで他のXFBMLを利用するFacebookプラグインを設置する場合も、<script> タグや <div> タグを除いた、<fb:like> タグのみを設置するだけで動作します。

日本語表記のボタンにする場合

XFBML版の場合、そのまま設置しただけだと、いいね！ボタンはLikeボタンに、送信ボタンはSendボタンと、英語表記のままで表示されます。

これを日本語にする場合は、下記のようにJavascriptSDKの読み込み先URLを変更する必要があります。

<script src="http://connect.facebook.net/ja_JP/all.js#appId=***************&amp;xfbml=1"></script>

en_US となっている箇所を、ja_JP と修正してください。

ブログ記事への貼り付け方

上述の内容を踏まえて、ブログ記事への貼り付け方です。

iframe版を利用するのであれば、<iframe> タグの src 属性内にある ...&href=[URL]&... の [URL] の箇所に、XFBML版であれば<fb:like> タグの href 属性に、各記事のパーマリンクを出力するテンプレートタグを挿入してから設置して下さい。

WordPressの場合のサンプルを下記に掲載します。

iframe

<iframe src="http://www.facebook.com/plugins/like.php?app_id=***************&amp;href=<?php the_permalink() ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

※ アスタリスク * の箇所は、各ユーザー毎に違うAppIDです。

XFBML

<fb:like href="<?php the_permalink() ?>" send="false" layout="button_count" width="450" show_faces="true" action="recommend" font=""></fb:like>

※ JavascriptSDKは別途、 <body> タグの終了直前に配置しているものとします。

Google +1（PlusOne）ボタン

Googleが6月より正式にサービス開始したGoogle+1（PlusOne）ボタンの設置方法です。

このGoogle+1（PlusOne）ボタンのカウント数などは検索結果にも反映されるらしいのですが、そちらはまだ英語圏のみの対応のようです。

しかしながら、今から始めておくことで、今後日本でも検索結果に反映されるようになった時にその威力を発揮するはずです。

Google+1（PlusOne）ボタン設置用のスクリプトを取得する

下記URLにアクセスしてください。
Google+1（PlusOne）ボタンのカスタマイズ用フォームが表示されます。

• Google

上記フォームで必要な設定を行い、生成されたコードを指定された通りにタグを設置すれば完了です。

HTML5用のタグ

Google+1（PlusOne）ボタンのタグもFacebookのXFBMLと同様に、XHTMLの拡張タグとして配置する方法のため、一部のブラウザでは表示することが出来ない場合があります。

Facebookではiframeを利用する方法がありましたが、Google+1（PlusOne）ボタンもその点は考えられています。

Googleのヘルプによると、下記のように記載されています。

デフォルトでは、スクリプトで DOM を使用して +1 タグを表示します。構文は次のようになります。

<g:plusone size="standard" count="true"></g:plusone>

<script> タグと、+1 タグまたは JavaScript API で定義されている表示関数の呼び出しを含める必要があります。

これに相当する HTML5 の構文は次のようになります。

<div class="g-plusone" data-size="standard" data-count="true"></div>

class は g-plusone に設定します。属性を含める場合は、data-size のように data- コードを前に付ける必要があります。

+1 ボタンをサイトに追加 – +1 button API – Google Code

要するに <g:plusone> タグを利用するかわりに、<div> タグに g-plusone というClassを設定したものをつかえ、ということのようです。

また各属性は共通のようですが、<div> タグを利用する場合は、属性名の前に data- というプレフィクスを付ける必要があるのに注意が必要です。

ブログ記事への貼り付け方

まずはこちらも、FacebookのJavascriptSDKにあたるものを設置します。
公式にもあるように、<head> タグの中か <body> タグの終了直前に設置しておくのがよいでしょう。

そして肝心の、ボタンを貼り付けるタグです。

<g:plusone> タグを利用する場合は href 属性、HTML5用の <div> タグを利用する場合は data-href 属性に、各記事のパーマリンクを出力するテンプレートタグを仕込んで配置してください。

WordPressで利用する場合のサンプルを下記に掲載します。

通常

<g:plusone size="standard" count="true" href="<?php the_permalink() ?>"></g:plusone>

HTML5

<div class="g-plusone" data-size="standard" data-count="true" data-href="<?php the_permalink() ?>"></div>

カスタマイズ性が高い

まず自分が導入時に一番気にしていたことは、ツイートの内容がどこまで編集できるかということ。

単純にタイトルと記事のリンクをつぶやくプラグインなら数あれど、このプラグインほどカスタマイズ性が高いのはあまりありません。

編集時にも呟いてくれる

ツイートの内容がテンプレートで編集できるのは当たり前として、投稿時に加えて編集時にもツイートをする機能を備えています。

投稿時にツイートの内容を編集することができる

これも他にはない機能ですが、投稿時にその投稿の時だけツイートの内容をカスタマイズすることも可能です。

まさに痒いところに手が届く機能。

ダウンロード

ダウンロードはこちらのサイトから、またはWordPressの管理画面で「プラグインの追加」からWP to Twitterで検索して下さい。