Update FB:Like URL Dynamically using JavaScript

Question

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);
}

Tomerikoo · Accepted Answer · 2021-12-09 16:38:24Z

24

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>

edited Dec 9, 2021 at 16:38

Tomerikoo

19.6k16 gold badges57 silver badges68 bronze badges

answered Nov 15, 2010 at 8:03

Mohammad Arif

7,6514 gold badges43 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrey Nikishaev · Accepted Answer · 2011-12-25 11:43:00Z

9

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>

edited Dec 25, 2011 at 11:43

answered Dec 25, 2011 at 10:39

Andrey Nikishaev

3,9025 gold badges42 silver badges58 bronze badges

5 Comments

tsukimi Over a year ago

do you know how to do the same for Linkedin buttons? This is very useful code

tsukimi Over a year ago

I found something here for anyone interested

Andrey Nikishaev Over a year ago

No i don't. But i think it similar, you just need to invstigate render process of button. Also you can try to use ShareThis buttons, they have good API. sharethis.com

jonkeegan Over a year ago

This was a HUGE help. Nice and concise, and up-to-date. Thanks!

Fateh Khalsa Over a year ago

Didn't work for Twitter (I had to explicitly create and insert new twitter-share-button markup, and Then reload Twitter), but the Facebook code worked fine!

Tomerikoo · Accepted Answer · 2021-12-09 16:40:27Z

9

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.

edited Dec 9, 2021 at 16:40

Tomerikoo

19.6k16 gold badges57 silver badges68 bronze badges

answered Aug 27, 2010 at 18:09

o6low

911 silver badge1 bronze badge

Comments

jozecuervo · Accepted Answer · 2010-05-06 07:07:35Z

3

I think you have a few options...

Remove the element, build and append a string of XFBML and then parse the parent object an XFBML.parse call.
Remove the element or it's container, build and append an actual XFBML object using
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.

answered May 6, 2010 at 7:07

community wiki

jozecuervo

Collectives™ on Stack Overflow

Update FB:Like URL Dynamically using JavaScript

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related