新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

コメント付き「いいね!」ボタンを確実に作る方法

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

5月以降、使えなくなる表記もあるというFacebookのいいね!ボタン。
□ Facebookの「いいね!」ボタンが使えなくなる。自分で設置した人は確認しておこう | ちほちゅう
仕様変更を重ね、今では「いいね!」しながらコメントが付けられるできる仕様になっています。

だもんで、これを機会にニューアルしてみるのもいいんじゃないでしょうか?
ということで、さっそく当ブログでやってみました。

なるほどー

スポンサーリンク
 

ポイントはiframe表記を使わないところです。
ヘッダー部分のソースが必要ないのでついつい使ってしまいがちですが、iframeを使ってしまうとコメントが追記できない可能性があります。

具体的にはiframeを選んだ時にはWidth(幅)を 400px 以上にしないとコメント画面が出てきません。とのこと。
via : Facebook コメント付き Like ボタン

何はともあれ、作ってみましょう。

  1. まずは、以下のサイトに行きます。
    □ Facebook Like Button
  2. こちらで「いいね!」ボタンのソースが作れます。
    特別難しい設定をする必要はありませんが、URL(URL to Like)だけは指定しておきましょう。
    コメント付きいいね!の作り方01
  3. 「Get Code」をクリックでソースコードが表示されます。その際に「HTML5」を選びます。
    (「XFBML」でもいいそうですが今回は端折ります。)
    コメント付きいいね!の作り方02
  4. こいつを今までのソースと書き換えてあげればいいわけです。
    時分の場合は以前、上の「Include the JavaScript SKD on your page once, ideally right after the opening <body> tag.」の方のソースはこちらの記事を書いたときに差し替えていますので、
    その下、「プラグインを表示したい場所にプラグインのコードを配置します。」の方だけ差し替えればOK。
    時分の使っているテーマ(STINGER)の場合は具体的には
    コメント付きいいね!の作り方03テーマ内の「sns.php」及び「top-sns.php」にあるiframe表記の部分を。
  5. コピーしたHTML5の表記に差し替えて上げればOKというわけです。
    コメント付きいいね!の作り方04もちろん、<body>部分のソースも必要ですので書いてない人は書いておきましょう。
    なお、上記サイトでは<body>直下が好ましいと英語でありますが、時分は</body>直前に入れています。

で、できたものがこんなかんじです。

コメント付きいいね!の作り方05

これで「いいね!」にコメントが付けられるようになりました。
ただしこれ、注意点が一つだけ。
「いいね!」ボタンが画面の下の方にあるとコメントできなくなってしまいます。

コメント付きいいね!の作り方失敗例
こんな感じ。
投稿するボタンが押せなくなってしまいます。
(この状態でもタブ2回押してエンターで行けますが素人さんには無理。)

いいね!にコメントを付けた時の挙動とシェアとの違いについてはまた後日。

 - Facebook(フェイスブック), Webサイト・サービス, Webデザイン, プログラミング, 覚え書き , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Flicksquareの設定を復活させる方法(foursquare→Flickr連携)

1年以上前の記事です。内容が古い可能性があります。Flicksquareの設定が …

LINE(ライン)を使ってイタ電(いたずら電話)の相手を突き止める方法

1年以上前の記事です。内容が古い可能性があります。たしかにこれやると、知り合いだ …

no image
日本語ドメインでSEO

1年以上前の記事です。内容が古い可能性があります。「YSTがフルアップデート」を …

ツイッター連携のインターネット国民投票「ゼゼヒヒ」が面白い

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)連 …

「JAF(ジャフ)」のツイッターアカウントがつぶやく自動車豆知識がすごく役に立つ

1年以上前の記事です。内容が古い可能性があります。「JAF(ジャフ)」とは「JA …

no image
半角カタカナって使っちゃダメなの?

1年以上前の記事です。内容が古い可能性があります。最近遅筆気味になってしまった。 …

殆どのスマホユーザーの個人情報はFacebookに握られている

そう、それがシャドープロファイルと言われているものです。
そして怖いのはこのシャドープロファイル、Facebookアカウントを作ったことのない人のものまで作られているとのことです。

あるFacebookユーザーの連絡先にあなたの個人情報が書かれていたら注意。
その方がFacebookに連絡先へのアクセスを許可していたらあなたがFacebookをやっていなくてもアウトです。 

ではどうやったら防げるのか?
最近ではFacebookアプリがプリインストールされているスマホ(スマートフォン)も多いのでほぼ防ぐことは不可能でしょうね。

つまり、

過去にFacebookのアカウントを作ったことがなく、Facebookを利用している人とアドレスなどの交換をしていないという場合のみ「あなたのシャドープロファイルは作られていません」

とのこと。
Facebookのアカウントを作ったことがない人は結構いるんじゃないかと思います。
ただ、Facebookを利用している人とアドレス交換をしていない人なんて殆どいないんじゃないでしょうか?
そもそも、その人がFacebookをやっているのかどうか調べてアドレス交換するなんてことできないでしょうし。。

これから、こういった情報が一般的になってくると、自分のようにFacebookやってる感を前面に出している人なんかは逆に、嫌厭されてしまうような時代がきてしまうのかもしれません。
でもね。
結局は架空請求や先日被害にあった債権回収詐欺等、それを使う悪いやつがいなければ別に個人情報何ら問題ないんですよね。
だって、かつては電話帳(ハローページ)に普通に電話番号が載っていた時代があるんですから。
嫌な時代になっちゃいましたねぇ。。

あとはFacebookの技術を信じて、そういった悪い輩に個人情報が流れないようにしてもらうしかないですね。
よく、「あとは神のみぞ知る」なんてこと言うことがありますが、Facebookもそういう意味では神の領域に入りつつあるのでしょうか?
人間が神の領域に足を踏み入れるとどうなってしまうのか? 注目して行きましょう。 

Google Chromeでページランクを確認する方法(最新版)

1年以上前の記事です。内容が古い可能性があります。以前紹介したGoogle Ch …

知らぬ間にPHPがバージョンアップ。PHP5.6からいきなりPHP7になっていた

1年以上前の記事です。内容が古い可能性があります。これ? いつからだったんでしょ …

「Twitter for iPhone」でDM(ダイレクトメッセージ)を送信する方法

1年以上前の記事です。内容が古い可能性があります。iPhoneのツイッター公式ク …

血液型オヤジ