Change the "like" destination dynamically?

Question

Classic Like button code :

<div class="fb-like" style="position:relative;float:left;" data-href="http://www.mywebsite.com/?IDL=1" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

<div id="fb-root"></div>
<script type="text/javascript">    
    (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);
    } (document, 'script', 'facebook-jssdk'));
</script>

it render the I Like Facebook button to the http://www.mywebsite.com/?IDL=1 page. Now, suppose I'd like, due to some action on the page, change the destination to http://www.mywebsite.com/?IDL=2 : how can I do it? I need to destroy and create again the button? I mean dynamically, without "refresh" the page (which will be easy)

Syed I.R. · Answer 1 · 2012-10-10T09:33:20.130

1

Why not use jquery?

$('.fb-like').attr("data-href", "http://www.mywebsite.com/?IDL=2");

OR if you don't want to use jquery, assign an id to the like div and try this code (Assuming you've set the id to fb-like):

document.getElementById('fb-like').setAttribute('data-href','http://www.mywebsite.com/?IDL=2');

That will dynamically update your link.

edited Oct 10 '12 at 09:33

answered Oct 10 '12 at 09:27

Syed I.R.

6,180
2
29
41

Well mate, it doesnt works : http://jsfiddle.net/gVz3G/ . First whould be http://www.mywebsite.com/?IDL=1, than, after change the link, on http://www.mywebsite.com/?IDL=2. But it points every time at http://www.mywebsite.com/?IDL=1. – markzzz Oct 12 '12 at 13:30

score 1 · Accepted Answer · answered Oct 15 '12 at 01:54

1

You'll need to destroy the already initialized button and replace it with another one then call FB.XFBML.parse() which will reparse the XFBML and re-initialize the new button.

answered Oct 15 '12 at 01:54

Kit Sunde

35,972
25
125
179

I just mean remove it from the DOM, assuming you have jQuery you'd use `$('.fb-like').remove();`. – Kit Sunde Oct 15 '12 at 08:49
You can specify the element `FB.XFBML.parse(document.getElementById('foo'));` – Kit Sunde Oct 15 '12 at 09:55
Not really http://stackoverflow.com/questions/12840786/why-fb-xfbml-parse-doesnt-render-my-plugin – markzzz Oct 22 '12 at 07:17
@markzzz Yes really https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/ what you are linking to is having a separate issue of not being able to render his initial widget due to a missing `fb-root`, while you are attempting to render something after the initial xfbml parsing has happened. – Kit Sunde Oct 22 '12 at 08:07
So you are able to answer to my other post? I don't have understand what you mean with fb-root parsing! Can you help me to understand that problem? – markzzz Oct 22 '12 at 08:21

Change the "like" destination dynamically?

2 Answers2