data-font="verdana"></div>6行目のen_USの箇所はこのままだとLikeボタンになるので、日本語のいいね!にしたい場合はja_JPに変えてやると良いです。アプリIDはご自身のIDに変更してください。font="verdana"></fb:like>html5と同様です。xfbml版の場合のみ、<html>タグを下記のように変更してください。xmlns:fb="https://www.facebook.com/2008/fbml">この独自な記述が嫌な人は、無難にiframe版を使いましょう。僕も普段組み込む時はほとんどiframe版です。allowTransparency="true"></iframe>iframe版は文字列が所々実体参照変換されているので気をつけて変更しましょう。これら3種のうちどれかをいいね!ボタンを設置したい場所に記述します。Protocol)を取得するOGPとはなんだろう?これについては下記サイトに詳しく記載されてましたのでご参照ください。何かこれを設定しておくと、いいね!ボタンを押した際に予め設定したOGPの情報が掲載されるようにできます。Facebookコネクトページの下にあるので、いいね!ボタンの設定をした流れでそのまま取得してしまいましょう。WordPressで動的な個別記事に対応するようにコードを書き換えるので、アプリID以外、空の状態で良いです。これらのコードはmetaなので、head内に記述します。ちなみにこれで取得したコードは、それぞれFacebookのウォール投稿に対応してます。いいね!ボタンを押すと自分のウォールにこんな風に投稿されるのです。このFacebookのウォールに表示されるサムネイル画像ですが、これを「記事内にある最初の投稿画像を自動的に取得」出来るようにすると、非常に便利です。お客様にWordPressの管理を提供する場合にはすごく便利です。記事内に画像が無い場合には、予め代わりの画像を取得出来る様に分岐させておきます。(その場合はロゴマークなどを使用すると自然ですかね。)それらを踏まえたWordPressでの記述は以下になります。content="※記事内に投稿画像が無い場合に表示される画像の絶対パス※">';};?>となります。(※便宜IDや画像パスは変えてください。)これらをWordPressテーマ内で使用すると、いいね!ボタンの設置は完了です。バグることがあるので注意さて、今回わざわざコード取得からOGPまでまとめたのは、冒頭で触れたように僕が「謎のバグ」に遭遇したからです。した挙句に解ったことがあります。Facebookクローラーが取得するものFacebookには実はクローラーがあります。これはいいね!ボタンがクリックされた際に該当サイトにクロールしに来ます。その際に、サイトからウォールに投稿する必要な情報を取得していくのですが、これが思わぬ落とし穴を招くことがあります。取得時間サイトの種類サイト名ページの説明アプリIDページの画像ページのURLこれらはOGPを記述していれば問題ないのですが、OGPを記述してない場合には自動的に別の所から情報を引っ張ってくるみたいなのです。画像なんかは酷く、自動的に選ぶ(たぶんページの最初に来るimgタグ?)ので、間違った情報をウォールに提供しかねないのです。気をつけないといけないのは、「ページのURL」。/>を見ているようなのです。WordPressの場合、ver2.9x以降の投稿記事・固定ページにcanonicalが自動的に出力されるようになりました。WordPressのver2.8x以前ではそのままでは出力されないのです。こないだ僕がWordPress案件でハマったのは、サーバが少々古く、MySQLの関係からWordPressが2.8xじゃないと使えなかったので、OGPも利用しておらず、canonicalのことに気付きませんでした。(ver2.8xは2009年8月位のバージョン。結果、blog自体のいいね!カウントが延々とされていたというバグに遭遇しました。(※パーマリンクのカスタム構造でURLを変えてたことも影響してる気がしなくもない)これだけならまだしも、一度いいね!が押されてクローラーに取得された場合、ソースを変更してもすぐには反映されず、クローラーのキャッシュに最初に取得した間違った情報が残ってるという状態にもなってました。この2重の落とし穴により、原因追求に時間がかかったというわけです。それを全て解決したのがOGPでした。OGPを設定してキャッシュをクリア。キャッシュが残ってる場合は、もう一度改めてクローラーに来させればキャッシュクリア出来るので、URLリンターを利用します。Token(デバッグツール:URLリンター)このページより、URLを入力してデバッグをクリックすると、クローラーがチェック&キャッシュクリアしてくれます。デバッガなので、注意事項が出てきますし、ここでページの情報が正確に取得されるかどうかを確認できます。OGPを記述しているとその情報が最優先されます。Facebookクローラーは、OGPを記述していない場合はcanonicalを探しに行く。canonicalが無ければ単にURLを取得しようとするが、動的生成の場合上手く取得出来ない場合がある。OGPは是非とも指定しておきたいのです。OGPは正確な情報をウォールに提供するだけでなく、OGPという性質上、これからのSNS全般が利用出来るものなので、Google+でも同様な取得をします。これは今後、もっと重要で必須なタグになっていくでしょうね。いやはや、地味ながら今回学んだことは大きいです。includeし、相対パスで読み込めるようにするカスタム投稿タイプとカスタムタクソノミーをプラグインを使わずに実現するコメント一覧コメントは承認制をとっておりまして、運営者の判断にて承認いたしますことをご了承ください。誹謗中傷等は削除させて頂きます。ご返信が遅れる場合もあります。コメントをキャンセルメールアドレスが公開されることはありません。雑記スポンサードリンクこのサイトではゆうすけ個人のblogとして、普段の雑記や技術的なトピックス、デザイン的な何かを発信したり、考察していきたいと思います。