facebookいいねボタンが出てなかった・URLをURLエンコードしてなかったせい

自分のWEBサイトで
facebookの、いいねボタンがしばらく前から表示されてなかった。
facebookにログインしてないせいって記事を見たので
ログインしてみただけど、やっぱり表示されなかった。
まーfacebookあんまり好きじゃないので放置してたんだけど
今日、原因わかった。

なんか仕様が変わったとかって記事を読んだので
facebook connect から改めて、いいねボタンのコードを取得。

HTML5移行中のままだいぶ放置してたので
まだXHTMLとHTML5が混在しているサイト。
まずは、XHTMLのページに、iframeのコードを再設置。
コードの中のURL部分は、URLエンコードされていた。
%3F%3Fとかって感じの例のやつ。

これまで設定していたのは、URLエンコードしていなかった。
それと http:// というプロトコルの部分も書いてなかった。
以前はいいねボタンが表示されていたので
仕様が変わったのかな。
取得したコードの中と同じようにURLはURLエンコードしてhttp://も付けて埋め込んでみる。
無事表示された。

HTML5のページも、いいねボタンが表示されなくなっている。
この際、iframeのコードからHTML5用コードに変えてみる。
HTML5のコードは2つに別れてて
コードを取得したページで表示される下の方のコードは
いいねボタンを表示させたい箇所に挿入するらしいが
上のコードはどこに置くんだろう。
ぐぐってたらbodyタグ直下って記事をみつけた。
共通処理でソーシャルブックマーク系のコードはまとめているし
2箇所に埋め込むの面倒な。
どっちも、いいねボタンを表示させたい箇所に連続して書いてみる。
動いたのでまーこれでいいや。

これで、ちゃんと、Google+1、Twitter、facebook のボタンが揃った。
XHTMLのページでは、Google+1のボタンがIEでエラー出てた。
原因不明だったので、XHTMLのページではGoogle+1ボタンをはずした。
HTML5ページではエラー出てないので
そこで悩むより、とっととHTML5に移行してしまいたい。
そのうち勢いでやっちゃおう。

新しく作ってるサイトにも、コードを設置した。
よしよしいい感じ。
いろんなことをなるべく時間をかけずにじゃんじゃん進めて行こう。
スモールスタートの精神が大事なのだよ。
と自分に言い聞かせて。