コメント付き「いいね!」ボタンを確実に作る方法
1年以上前の記事です。内容が古い可能性があります。
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回押してエンターで行けますが素人さんには無理。)
いいね!にコメントを付けた時の挙動とシェアとの違いについてはまた後日。
アドセンス広告メイン
関連記事
-
-
100円パソコン詐欺にあったら
1年以上前の記事です。内容が古い可能性があります。以前話題にしたイーモバイルがや …
-
-
今年はモテたい。女子が引く小さい男だと思われる9つの言動
1年以上前の記事です。内容が古い可能性があります。自分も最近良くかみさんに指摘さ …
-
-
念のため放射能がどの程度飛散しているか調べられるサイト(4/21追記)
1年以上前の記事です。内容が古い可能性があります。あくまでも念のためです。僕も水 …
-
-
さすがに変なところから電話やSMSがきたので美女子アカウントを友達から外した【Facebook】
1年以上前の記事です。内容が古い可能性があります。いや、だから会ったことのない女 …
-
-
Facebookで可愛い女子から友達申請が来たら9割はスパム
1年以上前の記事です。内容が古い可能性があります。ツイッターにもスパムアカウント …
-
-
情報収集なら「ツイート検索」+「RSS登録」が最強!!
1年以上前の記事です。内容が古い可能性があります。百式管理人さんのもうひとつのブ …
-
-
FAXをメールで受信できるネットサービス「D-FAX」
1年以上前の記事です。内容が古い可能性があります。なんとですね。 FAXをメール …
-
-
「Auto Post Thumbnail 3.4.1」のアップデートに注意。自動サムネール取得ができなくなります【WordPress・プラグイン】
1年以上前の記事です。内容が古い可能性があります。なんか、最近、サムネール画像が …
-
-
もうひとつのプルダウンメニュー
1年以上前の記事です。内容が古い可能性があります。そもそも、なんでFLASHでプ …
-
-
アメブロ(Amebaブログ)をケータイで更新する方法
1年以上前の記事です。内容が古い可能性があります。今さらですが生徒さん及び娘がア …













