How to reload/refresh a facebook like button when connecting to Facebook API via Javascript

Question

I am using the JS API to connect to facebook within my website. This requires a click of a button and the users profile info etc.. is loaded in via javascript.

My problem is that I have a FB like button in my page:

 <div id="fb-like" style="position:absolute; left:340px; top:80px;">
        <fb:like href="http://www.facebook.com/xxxxxx" send="true" width="450" show_faces="false" colorscheme="dark"></fb:like>
    </div>

But when the users info is brought in, the like button doesnt show that im logged in. In order to see that im logged in, I need to refresh the page and then it says that ive liked it and which of my friends like it etc..

Is there a way to refresh the like button when the javascript login is complete?

Thanks :)

Answer 1

You can refresh the like button by editing DOM with javascript, reacting to the login event.

Here is how i do it.

        <div id="fblike" style="position:absolute; left:340px; top:80px;"></div> 
<div id="fb-root"></div> 
<script>
        window.fbAsyncInit = function() {
        FB.init({
        appId  : '135669679827333',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        //channelUrl : 'https://anotherfeed.com/emo/channel.html', // channel.html file
        oauth  : true // enable OAuth 2.0
        }); 
        function onlogin(){ 
        var loginb=document.getElementById('fblike'); 
        loginb.innerHTML='';
        loginb.innerHTML='<div id="fb-like"><fb:like
        href="http://www.facebook.com/xxxxxx" send="true" width="450"
       show_faces="false" colorscheme="dark"></fb:like></div>';
        FB.XFBML.parse(loginb); 
        };

       FB.Event.subscribe('auth.login', function(response) {
        onlogin();
       });
        FB.Event.subscribe('auth.logout', function(response) {
        //window.location.reload();
        });
        };   // Load the SDK Asynchronously 
        (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&appId=135669679827333";  
        fjs.parentNode.insertBefore(js, fjs); }(document, 'script',
        'facebook-jssdk')); 
    </script>