FacebookのLike!ボタンを作成する方法

このQ&Aのポイント
  • FacebookのようなLike!ボタンを押すとカウント集計されるようなものを作成する方法をまとめました。
  • 通常のフォームやリンクボタンではページ全体が更新されてしまうため、部分更新されるボタンを作成する方法について説明します。
  • FacebookのLike!ボタンをブログなどに乗せるための方法は多く見つかりますが、部分更新ボタンを作成する技術要素についてはまだ情報が少ないです。
回答を見る
  • ベストアンサー

FacebookのようなLike!ボタンを作りたい

FacebookのようなLike!ボタンを押すとカウント集計されるようなものと作りたいと考えています。 しかし、通常のフォームやリンクボタンの場合には、ページ全体が更新されてしまうため、 ボタン部分だけが部分更新(投入or未投入)されるボタンを作成したいのですが、 何か参考になるようなプログラム例はありませんでしょうか。 「Facebook いいねボタン 開発」などで検索を行っても、Facebookのボタンをブログなどへ 乗せるための方法ページしか見当たらず、どのような技術要素を用いれば、 部分更新ボタンが作成できるのかわからないでいます。 大変抽象的な質問になり申しわけございませんが、 何か断片的でもかまいませんので、プログラム例が記載された ページをご紹介頂けると大変うれしく思います。 よろしくお願いいたします。

  • mmei
  • お礼率74% (120/161)
  • PHP
  • 回答数1
  • ありがとう数6

質問者が選んだベストアンサー

  • ベストアンサー
  • nak2052
  • ベストアンサー率60% (3/5)
回答No.1

自分で仕事で作ってるのですが、サンプル用に切り出すのは大変ですし、解説の時間もありません。ざっとした方法は教えられます。 AJAXを使ってください。 1「いいねボタン」をクリックしたら、onClickかイベントで、JavaScript関数を呼び出してください。 2呼び出されるJavaScript関数では、サーバ上のプルグラムにボタンがクリックされたことを知らせる値をポストで送信し、サーバから帰ってきた部分的HTMLを使って、「いいねボタン」が表示されている部分のHTMLを書き換えます。(<div>か<span>タグのIDを目印にして、そのタグのinnerHTMLを書き換える) 3サーバ上のプログラムはうけた値によって処理をして、「投入」みたいな表示に変わる部分HTMLを送信します。 Ajaxの参考書やWEBを検索するとサンプルはあるはずです。 prototype.jsやjQueryを使うとだいぶ楽になります。

mmei
質問者

お礼

早々のご回答ありがとうございます。 実現に必要な要素技術もわからない状況だったために、 AJAXやjQueryなどキーワードを知ることができ、 これから早速実現方法について改めて調査したいと思います。

関連するQ&A

  • Facebookの「いいね!」ボタンについて

    Facebookの「いいね!」ボタンの仕組みについて質問させてください。 現在、WordPressで作成中のホームページで各シングルページ(個別記事)にフェイスブックの「いいね!」ボタンをつけました。 そして、フェイスブックでこの作成中のホームぺージの「Facebookページ」を作成しました。 そこで質問なのですが、<meta property="fb:page_id" content="ページID" />をホームページに入れていると、この各シングルページ(個別記事)の「いいね!」ボタンを押すと、ファンページのほうの「いいね!」の数もカウントされるのでしょうか? それとも、Facebookページ用の「いいね!」と各記事に入れた「いいね!」は別モノなのでしょうか? 詳しい方がいらっしゃいましたらよろしくお願いします。

  • facebook いいねボタン

    会社のホームページにfacebookの「いいねボタン」設置をこころみましたが、いいねボタンは表示されてますが反応しません・・? 自分のサイトに自分のサイトURLでいいねボタンを作成したタグは無効なのでしょうか? 自分のサイトとは別にfacebookのページ(アカウント)も持っていないと駄目なのでしょうか? 自分のサイトとは別(facebook URL)で作成したいいねボタンを自分のサイトに設置するのでしょうか? 理解してなく、質問自体がどう伝えてよいのか? この質問でわかるかたご教授お願いします。

  • WebサイトにLikeボタンを設置したいです。

    はじめまして。 質問するのは初めてですが、よろしくお願いします。 私は現在Webサイトを作成しております。 サイトのページのひとつに、写真をズラーっと縦1列に並べたページがあります。 その写真1枚1枚に、YouTubeに設置されているような「Likeボタン」を設置したいと 思っています。 Facebookの「いいねボタン」とは別の、誰でも気軽に押せる「Likeボタン」です。 一人で何回でも押せても構わないので、設置の仕方を教えていただけないでしょうか。 ※ページの下部にある「Likeボタン」を押しても、ページの先頭へいってしまわないよ うにしたいです。 PHPはほとんど初心者です。どうぞよろしくお願いします。

    • 締切済み
    • PHP
  • facebook いいね!ボタンについて

    会社のホームページを製作し ページごとにfacebookのいいね!ボタンを配置しようとしています とりあえず数ページにいいね!ボタンを配置し ボタンをおしているのですが 自分のfacebookのタイムライン、友達のニュースフィードに記事が反映されません ただアクティビティログには反映され、友達のページから自分のfacebookページを見ると いいね!の記事が反映されています ページ内のタグは下記のような感じです <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta property="og:title" content=""> <meta property="og:description" content="" /> <meta property="og:type" content="website"> <meta property="og:image" content=""> <meta property="og:url" content=""> <meta property="og:site_name" content=""> ※og内の""の中は、実際は入れてあります 下記も入れたりしていますがダメでした・・・ <meta property="fb:admins" content="" /> <meta property="fb:app_id" content="" /> </head> <body> <script type="text/javascript"> var url = document.URL; document.write('<iframe src="http://www.facebook.com/plugins/like.php?href='+ … scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>'); </script> もしくは <iframe src="http://www.facebook.com/plugins/like.php?href=ht … scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> ※ボタン内のURLは実際のものとは違います </body> </html> 現状のURLがテスト用のアドレスだからなのかもしれませんが 行き詰っています・・・ 何卒よろしくお願い致します

    • ベストアンサー
    • CSS
  • ブログにFacebookのいいねボタンを設置したい

    質問があります。 掲題の通りです。 FC2の掲示板で聞いたのですが、2日ほど返事がないのでこちらで質問させて頂きます。 http://developers.facebook.com/docs/reference/plugins/like-box/ このFacebookのページのGetcodeで文字コードを入手できるのですが、 それを自分のブログのどこにどうすれば設置出来るようになるのかがわかりません。 FC2というブログサービスを利用しています。 このコードをどこに入れればいいねボタンを設置出来るようになるのか・・・。 ちなみにFacebookでもブログの宣伝用ページを持っていて、 ブログにいいねボタンを設置して、いいねを押すと、Facebookの宣伝用ページのいいねが増えるという形にしたいです。 よろしくお願いいたします。

  • WORDPRESSでFACEBOOKいいねボタンを

    WORDPRESS(無料版使用、ドメインのみ取得)でFACEBOOKの「いいね」ボタンを投稿につけたいと思い試行錯誤を重ねましたが、うまくいきません。いろいろググり、次の様に記述しましたのですが、狙い通りボタンが表示されません。 <タイトル>いいねボタンのテスト 以下投稿の本文 (HTMLというのでしょうか?) いいね <a href="https://www.facebook.com/plugins/like.php?href=https://brasileiro365.wordpress.com/?p=1438&preview=true&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=フェイスブックのID">https://www.facebook.com/plugins/like.php?href=https://brasileiro365.wordpress.com/?p=1438&preview=true&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=フェイスブックのID</a> 上記を保存してプレビューしますと、添付画像上部のスクリーンコピーのように表示されます。リンクされた文字の部分をクリックしますと新しくページが開かれ、「いいね」ボタンが下部のスクリーンコピーのように出てきます。 このボタンを投稿したページの下に表示したいのですが、どこが悪いのでしょうか。どのようにすれば、良いのでしょうか教えてください。

  • Facebook「いいね」ボタンのサイズ変更

    Facebook「いいね」ボタンのサイズの変更方法を教えてください。 下記サイトから「いいね」ボタンを表示させるコードを作成しました。 https://developers.facebook.com/docs/reference/plugins/like/ しかし、サイズが少し小さいので大きくしようと思いCSSで変更できないか試したのですが、私の知識が低くなかなかうまくいきません。 どなたか「いいね」ボタンのサイズの変更方法か、オリジナル画像にする方法をご存知の方がいらっしゃいましたらご教授お願いします。

    • 締切済み
    • CSS
  • Facebookのいいね

    芸能人や映画等のFacebookページにいいねができると思うのですが、そのいいね!をしたという情報がページ作成者に伝わると思うのですか、いいねボタンを押す度にその知らせというのは行くのですか? 自分は同じページに何度もいいねしたり外したりしていたので、押す度に通知がいくのか、同じ人間がはじめてそのページにいいねしたときだけ通知がいくのか、お教えください。

  • facebookでシェアボタンしかないケース

    ネットで調べていますが、自分が知りたい内容にピッタリあっていると思われるものがありませんでしたので、こちらに質問させていただきます。 最近、facebookページを作成しました。 自分が投稿した記事に『いいね』をつけていただいた方のfacebookにアクセスすると、『シェア』ボタンしか見あたらないケースがほとんどなのですが、こちらから『いいね』やコメントができるようにする方法はないでしょうか。 ご教示のほど、お願いいたします。

  • ボタンでカウント・集計できるCGIかPHPなど

    スマホや携帯などで、複数のボタンを押すとカウントをし、個別にその集計を別ページなどで見る 事が出来るプログラムを探しております。 用途としては、「Aの人」「Bの人」~「Gの人」などのボタンがあり、1回クリックするとカウントされます 集計ページでは、月間・週間・時間などが見れる程度の物です。 似たようなCGIやPHPを探してはいるのですが、javaを使った似たようなものはありましたが 集計まで可能なものが見当たりませんでした 個人的にhtml知識はあり、CGIも少しだけわかる程度の知識しかありません(´;ω;`) 上記の内容に近いCGIやPHPなどご存知の方が居ましたらお知恵を貸して頂けると嬉しいです。 入力画面では、こちらが一番理想的なものでした http://aroun-d.com/demo/20120221/

    • ベストアンサー
    • CGI

専門家に質問してみよう