Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Update FB:Like URL Dynamically using JavaScript

I'd like to change the URL to like of an FB:Like button dynamically using JavaScript.

Right now I've only been able to change the href attribute of the fb:like tag (I've pasted the code below). But simply changing the href doesn't seem to work. Perhaps I have to re-initiate the FB:Like button, but so far I can't figure out how..

function update_share(container, url) {
  // update fb:like href value
  var container = container[0] || document.body;
  var button = container.getElementsByTagName('fb:like');
  button[0].setAttribute('href', url);
}
like image 498
RZKY Avatar asked May 04 '10 09:05

RZKY


4 Answers

It works for me for XFBML tag as well without using FB iframe and even works with multiple FB like calls for AJAX.

You just need to wrap the entire XFBML code in JS/jQuery and parse it as shown below:

$('#like').html('<fb:like href="' + url + '" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" />');
if (typeof FB !== 'undefined') {
    FB.XFBML.parse(document.getElementById('like'));
}

HTML code:

<span id="like"></span>
like image 196
Mohammad Arif Avatar answered Nov 06 '22 18:11

Mohammad Arif


For reinit social buttons i use this code:

//Facebook like
if(typeof(FB) !== 'undefined')
     FB.XFBML.parse(document.getElementById('fblike'));

//Google plus one
if(typeof(gapi) !== 'undefined') {
    gapi.plusone.render(document.getElementById('gplus'),{
        'href':location.href,
        'annotation':'bubble',
        'width': 90,
        'align': 'left',
        'size': 'medium'
    });
}

//Twitter tweet button
if(typeof(twttr) !== 'undefined') {
    $('.twitter-share-button').attr('data-url',location.href);
    twttr.widgets.load();
}

With html code like this:

<div style="float:left;margin-top: 5px;width:80px;">
    <div id="gplus" class="g-plusone" data-size="medium"></div>
</div>
<div style="float:left;margin-top:5px;width:90px;">
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
</div>
<div style="float:left;margin-top:5px;width:80px;" id="fblike">
    <fb:like send="false" layout="button_count" width="100" show_faces="false"></fb:like>
</div>
like image 45
Andrey Nikishaev Avatar answered Nov 06 '22 18:11

Andrey Nikishaev


Instead of your fb:like object, write a FB iframe in your html like this:

<iframe id="face" name="face" src="http://www.facebook.com/plugins/like.php?href=http://www.google.fr&layout=button_count&show_faces=false&width=400&action=like&font=arial&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 400px; height: 21px;" frameborder="0"scrolling="no"></iframe>

and now you can change with JavaScript with this function:

function setUrl(url)
{
    sUrl = url;
    url = "http://www.facebook.com/plugins/like.php?href="+sUrl+"&layout=button_count&show_faces=false&width=400&action=like&font=arial&colorscheme=light";
    document.getElementById('face').setAttribute('src', url);
    //alert("url : "+url);
}

when you change the src, the FB iframe is updated.

like image 9
o6low Avatar answered Nov 06 '22 18:11

o6low


I think you have a few options...

  1. Remove the element, build and append a string of XFBML and then parse the parent object an XFBML.parse call.

  2. Remove the element or it's container, build and append an actual XFBML object using

  3. Build an iframe container gets passed in the like url (with a GET) from the parent page. You can do this without even using a real backend if you can get the query string in JS. Then just build the markup before you init the facebook SDK and the like button will render. Facebook iframes all their stuff anyway, so this method isn't as clunky as it sounds. Tried this, works well.

like image 3
jozecuervo Avatar answered Nov 06 '22 16:11

jozecuervo