コメント付き「いいね！」ボタンを確実に作る方法
5月以降、使えなくなる表記もあるというFacebookのいいね！ボタン。
□ Facebookの「いいね!」ボタンが使えなくなる。自分で設置した人は確認しておこう | ちほちゅう
仕様変更を重ね、今では「いいね！」しながらコメントが付けられるできる仕様になっています。
だもんで、これを機会にニューアルしてみるのもいいんじゃないでしょうか？
ということで、さっそく当ブログでやってみました。
ポイントはiframe表記を使わないところです。
ヘッダー部分のソースが必要ないのでついつい使ってしまいがちですが、iframeを使ってしまうとコメントが追記できない可能性があります。
具体的にはiframeを選んだ時にはWidth(幅)を 400px 以上に
しないとコメント画面が出てきません。とのこと。
via : Facebook コメント付き Like ボタン
何はともあれ、作ってみましょう。
- まずは、以下のサイトに行きます。
□ Facebook Like Button - こちらで「いいね！」ボタンのソースが作れます。
特別難しい設定をする必要はありませんが、URL（URL to Like）だけは指定しておきましょう。
- 「Get Code」をクリックでソースコードが表示されます。その際に「HTML5」を選びます。
（「XFBML」でもいいそうですが今回は端折ります。）
- こいつを今までのソースと書き換えてあげればいいわけです。
時分の場合は以前、上の「Include the JavaScript SKD on your page once, ideally right after the opening <body> tag.」の方のソースはこちらの記事を書いたときに差し替えていますので、
その下、「プラグインを表示したい場所にプラグインのコードを配置します。」の方だけ差し替えればOK。
時分の使っているテーマ（STINGER）の場合は具体的には
テーマ内の「sns.php」及び「top-sns.php」にあるiframe表記の部分を。 - コピーしたHTML5の表記に差し替えて上げればOKというわけです。
もちろん、<body>部分のソースも必要ですので書いてない人は書いておきましょう。
なお、上記サイトでは<body>直下が好ましいと英語でありますが、時分は</body>直前に入れています。
で、できたものがこんなかんじです。
これで「いいね！」にコメントが付けられるようになりました。
ただしこれ、注意点が一つだけ。
「いいね！」ボタンが画面の下の方にあるとコメントできなくなってしまいます。
こんな感じ。
投稿するボタンが押せなくなってしまいます。
（この状態でもタブ2回押してエンターで行けますが素人さんには無理。）
いいね！にコメントを付けた時の挙動とシェアとの違いについてはまた後日。
アドセンス広告メイン
関連記事
-
-
その人と分かる写真（顔の入った写真）を公開するのは個人情報保護法違反
いままで、さほど気にせず人の写りこんだ写真をシェアしたりしちゃってましたが、どう …
-
-
ブログの「さらに検索する」を消す方法
ブログリニューアルも終盤に差し掛かりました。（まだ終わってなかったの？） 今回、 …
-
-
エレベーターで間違って押してしまった階をキャンセル（取消）するのは2度押し
エレベーターで下りる階とは違う階を間違えて押してしまった時はどうしてますか？ そ …
-
-
ツイッター（Twitter）でいつの間にやら「引用ツイート」が実装されていた
ツイッターで最近良くこんな形のツイートを見かけることが多くなってきました。 これ …
-
-
ツイッター（Twitter）の仕様変更で「EasyBotter」が動かなくなったのでバグフィックスした
数日前からつぶくまくんのつぶやきが無くなってしまったようなので修正しました。 色 …
-
-
このサイトはコンピュータに損害を与える可能性があります
Googleでは、検索結果に「このサイトはコンピュータに損害を与える可能性があり …
-
-
「えらぼーと」東京都知事選挙版登場。自分は「舛添」派でした
以前、衆院選（衆議院議員選挙）でも登場した「えらぼーと」の都知事選（東京都知事選 …
-
-
最近、2ちゃんねるまとめブログ風のランディングページ（偽ブログ）が乱立しているくさい
以前、キラキラ☆ウォーカーに騙された件ですが、偽ブログに引っかかったというのが大 …
-
-
DreamweaverとFC2ホームページで作るサイト定義（サイト公開編）
前編 → 後編 → 公開編 最後はホームページの公開手順。サイト定義が済めば、D …
-
-
SNS（ソーシャルネットワーク）を使用する上で注意をすべきたった2つのポイント
スマホの情報漏洩は免れない旨、記事にしたばかりですが、これはある目的を持って故意 …
