www.webdeveloper.com
Results 1 to 4 of 4

Thread: capture click of Facebook 'Like' button

  1. #1
    Join Date
    Apr 2006
    Posts
    245

    capture click of Facebook 'Like' button

    I am looking on the Facebook Developers Documentation to locate some sample code that would allow me to capture a click event on the "Like" button. It states:

    If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through FB.Event.subscribe.
    I am using XFBML, this is my code:

    Code:
    <div class="social_net_button facebook_button">
          <div id="fb-root"></div>
          <script>(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/en_US/all.js#xfbml=1";
                  fjs.parentNode.insertBefore(js, fjs);
    
                  FB.Event.subscribe('edge.create',
                         function(response) {
                              alert('You liked the URL: ' + response);
                         }
                  );
    
                }(document, 'script', 'facebook-jssdk'));</script>
          <div class="fb-like" data-href="http://www.facebook.com/pages/Ayrshire-Minis/160330240663397" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="recommend"></div>
        </div>
    Can a click of the 'Like' button be captured by jQuery/Javascript or by any other means?

    I have tried the FB.Event.subscribe, but I get a "FB not defined message every time", so it's not tracking for me.

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    If all you want to do is keep tabs on FB likes, just build it another way, for example, here is a test I did.

    http://delpercio.com/fblikes.php

    Here's the code:

    PHP Code:
    <html>
    <head>

    <title>Facebook Checker</title>
    </head>
    <body onLoad="document.getElementById('siteLoader').style.display = 'none';">

    <h2>Check Facebook Stats</h2>
    <form action="fblikes.php" method="post">
    <table border="0">
    <tr><td><label>Enter URL to Check here:</label></td><td> <input type="text" name="url" size="40" /></td></tr>
    <tr><td>&nbsp;</td><td><input type="submit" /></td></tr>
    </table>
    </form>
    <!-- loading BEGIN -->
          <div id='siteLoader'> 
            <div id='loadImg'> 
            <img src="http://www.metataggenerator.org/images/loading2.gif" border="0" align="left" style="margin-top:-12px;"> 
            </div> 
          </div> 

    <!-- loading END -->
    <?php

    $array_keys 
    array_keys($_POST);                 //strips all html and script tags globally//
    for( $i=0;$i<count($array_keys);$i++ ) {
     
    $_POST[$array_keys[$i]] = strip_tags($_POST[$array_keys[$i]],'<meta>,<link>');
    }

    $source_url $_POST['url'];

    if (empty(
    $source_url)) {
    echo 
    '<font face="arial" color="#999999">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &uarr; Enter your URL above &uarr;</font>';
    } else {
    $url "http://api.facebook.com/restserver.php?method=links.getStats&urls=".urlencode($source_url);
    $xml file_get_contents($url);
    $xml simplexml_load_string($xml);

    echo 
    "For the site:<b> $source_url:</b><br />";

    echo 
    "Share &rarr; ".$shares $xml->link_stat->share_count;
    echo 
    "<br/>";

    echo 
    "Like &rarr; ".$likes $xml->link_stat->like_count;
    echo 
    "<br/>";

    echo 
    "Comments &rarr; ".$comments $xml->link_stat->comment_count
    echo 
    "<br/>";

    echo 
    "Total &rarr; ".$total $xml->link_stat->total_count;
    echo 
    "<br/>";
    }
    //echo $max = max($shares,$likes,$comments);

    ?>
    </body>
    </html>

  3. #3
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    While the above code is not what you want, you could perhaps build a tool that shows you what it is for your page alone.

    PHP Code:
    <?php
    $source_url 
    'http://YourURL.com';  //put your url here
     
    $url "http://api.facebook.com/restserver.php?method=links.getStats&urls=".urlencode($source_url); 
    $xml file_get_contents($url); 
    $xml simplexml_load_string($xml); 

    echo 
    "For the site:<b> $source_url:</b><br />"

    echo 
    "Share &rarr; ".$shares $xml->link_stat->share_count
    echo 
    "<br/>"

    echo 
    "Like &rarr; ".$likes $xml->link_stat->like_count
    echo 
    "<br/>"

    echo 
    "Comments &rarr; ".$comments $xml->link_stat->comment_count
    echo 
    "<br/>"

    echo 
    "Total &rarr; ".$total $xml->link_stat->total_count
    echo 
    "<br/>"

    //echo $max = max($shares,$likes,$comments); 

    ?>
    If you really want to get fancy, you could have it output the count to a file and then have a routine that emails you when the count increases...

    It seems that this would accomplish the same thing.

  4. #4
    Join Date
    Apr 2006
    Posts
    245
    WOW - those implementations certainly look interesting, but i'm really just looking to capture the click at any stage really. Either the click of the 'Like' or the 'Post to Facebook' click.

    Strangely, I had it working with the following code but it has now since stopped working. Whether that is something to do with the API i'm unsure:

    Code:
         <script>
               window.fbAsyncInit = function() {
                       FB.init({
                                               status: true, // check login status
                                               cookie: true, // enable cookies to allow the server to access the session
                                               xfbml: true  // parse XFBML
                                       });
               };
         </script>
         <script type="text/javascript">
               window.fbAsyncInit = function() {
                 FB.Event.subscribe('edge.create',
                         function(response) {
                               _gaq.push(['_trackSocial', 'facebook', 'like', document.location.href]);
                         }
                 );
               };
         </script>
    I should also point out that the reason I am attempting to capture the click of the Facebook "Like" is for Google Analytics purposes.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles