ブログにFacebook関連のパーツを埋め込みました。色々調べてとりあえずは落ち着きましたので、メモしておきます。
まず、このブログの下部に、「いいね！」「twitter」「はてなブックマーク」のボタンと、Facebookのコメント欄を組み込みましたが、これは全てプラグインではなく、ソースの打ち込みでやっています。
そして、「『WP Social Bookmarking Light』導入しました」で出稿したWP Social Bookmarking Lightは削除しています。
この人気があって使い易いプラグインを削除した経緯は、各ボタンが均等に横並びにならなかったことと、W3Cのチェックでエラーが出てしまったからなのですが、一通りの作業を終え、最終的にはW3Cのバナーは外さなければならないことになりました。
まず、Facebookのコメント欄ですが、これも便利なプラグインがたくさん出ており、私も幾つかインストールしてみました。しかし、英語で「互換モードで動いているので全ての機能が使いたければデフォルトのコメント機能を使えば？」メッセージを消すことができず、「それならソースを探そう」と言う思考の流れになりました。
Facebookのコメント埋め込みコードを得るページ（英語）
このサイトへジャンプし、数値を入力して「Get Code」をクリックすればペーストするコードが出てきます。コードは、「HTML5」と「XFBML」で出力できますが、私は「将来的には何となくHTML5って気がする」というレベルでHTML5を選んでいます。この際、『URL to comment on』の処は、サンプルのままで進みます。そして出てきた２つのコードをそれぞれ「header.php」、「single.php」（など）のコメントを表示させたい箇所にペーストして、URLの部分「http://example.com」を「＜?php the_permalink(); ?＞」（コピーするなら「＜＞」を半角に直してください）に置き換えます。
私は、ちょっと欲張りに「archive.php」にも貼り付けたので、アーカイブは表示が大変重くなってしまいました。。。
これでFacebookのコメント欄は上手く表示されるようになったのですが、HTML5で出力している以上、xhtmlでのW3Cチェックでパスするはずもなく・・・結局今までつけていたバナーは取り外すことになりました。CSSはレベル2.1でクリアしてるんですが、CSSだけ置いておくって言うのもかなりの「残念感」がありますので、まとめて取り外しています。
次に、ボタン関連です。参考にさせて頂いたブログをご紹介します。
「WordPress にはてブと Twitter と Facebook のボタンを10秒で貼り付けられるコードを書いてみたよ」
この「functions.php」に書いてまとめるっていう発想は「！！！」で、「functions.phpってこんな風につかうんだ」と勉強になりました。私は、まずこちらのブログに書かれている方法の通りにコードをペーストして、表示させてみました。
・・・縦に並んでる。そう、やっぱり横並びが格好いいですよね。そこでCSSを色々調整して横並びにしようと思うんですが、Facebookだけが改行されてしまう。そこで、私は「iframe」を使っている処に問題があるのでは？と考えました。どうせコメント欄でスクリプトを頭につけたしているので、ボタンもHTML5でやってしまおう、と思ったのです。
Facebookのいいね！ボタン埋め込みコードを得るページ（英語）
ここでコメント欄を作る時に作業したのと同じ要領で、HTML5でコードを出力し、上のスクリプトコードは既に貼り付けているので、下のコードだけを「functions.php」のFacebookの箇所と差し替えた訳です。
これで上手く一列に横並びになりました！！！！！
しかし、『「いいね！」と言っている友達はまだいません。」の表示を消すことができず、おまけにどう調整しても横の間隔を等幅にすることができませんでした。で、試しに自分で「いいね！」を押してみると、今度は自分の顔写真が出てきて「○○○○さんが「いいね！」と言っています」と表示されるため、もうこれなら縦のままでいいや！と思い、それらしく？タイトルをマークアップしてみた、と言うのが一連の作業です。
プラグインは確かに便利ですが、ヘッダーがびっくりするくらい増えていたりもするので、やっぱり自分でコードを書くのが一番確実かも知れませんね。
年始のお休みに横並びに再挑戦します。