Discussions

QFacebookのいいねボタンを押した時に自分で用意したjsのメソッドを呼び出す

自分のサーバーに置くページに設置したいいねボタンを押すと、
自分で用意したjsのメソッドを呼ぶ、という事をやりたいのですが、可能なのでしょうか。
実際にいいねボタンに書かれているコードを見てみたのですが、解読できず。。。

自分でも以下の方法を試してみました。
・いいねボタン貼付けタグのdiv自体にonclickイベントに、メソッドを設定
-> メソッドは呼び出されませんでした。

・マウスダウンイベントでjsのメソッドを呼ぶように設定したswfをいいねボタンの上に置く
-> メソッドは呼び出せますが、いいねボタンが押せなくなりました。

どなたか、分かる方いらっしゃいませんか?
宜しくお願いいたします。

AAnswer to: Facebookのいいねボタンを押した時に自分で用意したjsのメソッドを呼び出す

kyo_ago

facebookのいいねボタンは別ドメインのiframeで作られているのでそのままでは元サイトからイベントを取得することができません。
代わりにいいねボタンが押されると$('.fb_edge_comment_widget.fb_iframe_widget')の状態が変わるようなので、これを監視するのはどうでしょうか?
(ただ、この要素の状態が変わるということは何らかの方法で「いいね」されたイベントが通知されているということなので、もしかしたらちゃんと取る方法がるのかもしれません)
サンプルコードはかなりざっくりなので速度的な問題はあると思いますが、とりあえず押したかどうかは取れているようです。

また、この方法だと最初の表示時に「いいね」されているかどうか判断できませんが、これに関してはFQLとかで何とかするしか無いかもしれません。

fum

>kyo_agoさま

ありがとうございます!
これで一回やってみようと思います。

ちなみに、
>いいねボタンが押されると$('.fb_edge_comment_widget.fb_iframe_widget')の状態が変わる
みたいな事って、どうやって調べていらっしゃるのですか?
そういうデバッグツールのようなものがあるのでしょうか?
もし差し支えなければ教えていただけると幸いです。
宜しくお願いいたします。

kyo_ago

>いいねボタンが押されると$('.fb_edge_comment_widget.fb_iframe_widget')の状態が変わる

これはFirefoxのFirebug Extensionのhtml tabでいいねボタンのiframe周辺を表示しつつ、いいねボタンクリックしてて見つけました。
(ChromeのDeveloper Toolsでも見つけられると思います)

今回は使いませんでしたが、変化が一瞬で動きがわからない場合、以下で紹介している「7. 要素の変更時にブレーク」とかを使ったりもします。
(こっちの機能はFirebugしかないかも)
http://tech.kayac.com/archive/firebug-function-for-pg.html

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag