Facebookの「いいね!」ボタンから「いいね!」されたかレスポンスをJavaScriptで取得制御



JavaScriptのみで設置しているFacebookの「いいね!」ボタンから「いいね!」されたか、
レスポンスを取得し表示情報を制御してみます。

1.meta(app_id)とCSSの記述例

以下は調整してみて下さい。

<meta property="fb:app_id" content="478171555569073">
<style>
.clWrap{
	width:800px;
	margin:0 auto;
	text-align:left;
}
p{
	text-align:center;
	line-height:1.6em;
	padding-bottom:10px;
}
#iBox{
	text-align:center;
	font-size:24px;
	font-weight:bold;
	padding-top:20px;
	display:none;
	color:#F00;
}
#btn:hover{
	background-color:#FFF;
	color:#333;
	font-weight:bold;
	border:solid 1px #333333;
}
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
  FB.init({
    appId      : 478171555569073,
    status     : true,	//true | false
    cookie     : true,	//true | false
    xfbml      : true	//true | false
  });
  FB.Event.subscribe('edge.create',
    function(response) {
      $(function(){
      	$("#iBox").css('display','block');
      });
    }
  );
  FB.Event.subscribe('edge.remove',
    function(response) {
      $(function(){
      	$("#iBox").css('display','none');
      });
    }
  );
};
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

3.HTMLの記述例

<body>
<div id="fb-root"></div>
<div class="clWrap">
    <h1>Facebookの「いいね!」ボタンから「いいね!」されたかレスポンスをJavaScriptで取得</h1>
    <p>以下の「いいね!」ボタンをクリックすると、JavaScriptでresponseを取得し、<br />
    非表示となっているテキストを表示します。</p>

	<div align="center">
	<div class="fb-like" data-href="https://www.facebook.com/blinderhidden" data-width="300px" layout="button_count" data-show-faces="false" data-send="false"></div>
    </div>

	<div id="iBox">いいね!されました。</div>

    
</div><!--/clWrap-->
</body>

Facebookの「いいね!」ボタンから「いいね!」されたかレスポンスをJavaScriptで取得するデモ

サーバーサイドプログラム等でFacebookアプリを作らなくても、
JavaScriptだけで簡単に出来ていいですね。
他のレスポンスも取得出来そうな気がします。