Question

I have several Facebook like buttons on myself that are being rendered via XFBML. After clicking on them, they appear to work in that they change from the standard like button into the "thumbs up" icon that says "You like this". However, after a second or two (I assume the time it takes to hit FB's servers and come back), it automatically unlikes itself, turning back into the original like button.

See a video of what I mean here.

My code is pretty standard:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en">

...

<fb:like href="http://www.example.com/valid/path" layout="button_count" ref="recipe_preview" />

...

<script type="text/javascript">
    window.fbAsyncInitExt = function() {
        FB.Event.subscribe('edge.create', function(response) {
            alert('Facebook Like Button: ' + response);
        });
    };
</script>

...

<div id="fb-root"></div>
<script type="text/javascript"> 
    window.fbAsyncInit = function() {
        FB.init({
            appId:  'XXXXXXXXXX',  // my app ID is here
            status: true,
            cookie: true,
            xfbml:  true
        });
        if (typeof(fbAsyncInitExt) == 'function') {
            fbAsyncInitExt();
        }
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    })();
</script> 

Edit: For what it's worth, I also attempted to see if Facebook was sending any log info, but it didn't appear to be:

<script type="text/javascript">
    window.fbAsyncInitExt = function() {
        FB.Event.subscribe('edge.create', function(response) {
            alert('Facebook Like Button: ' + response);
            console.debug(response);
        });
        FB.Event.subscribe('fb.log', function(response) {
            alert('LOG: ' + response);
            console.debug(response);
        });
    };
</script>
Was it helpful?

Solution

After a lot of digging, I finally discovered the source of the error. It turns out the page referenced by the href value in my fb:like tag required at least one of the fb:app_id or fb:admins META tags in the HEAD. For reference: http://developers.facebook.com/docs/opengraph

OTHER TIPS

After trying all of the solutions I could find, none work, but I tried using the "Live feed" app ID rather than the default "Live Stream" when you're getting your code from the facebook developers page, which worked for me.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top