Update FB:Like URL Dynamically using JavaScript

Asked
Active3 hr before
Viewed126 times

4 Answers

dynamicallyusingupdate
90%

i'd like to change the URL to like of an FB:Like button dynamically using javascript.,Lately you can also use the HTML5 version, as described here: http://elure.co/43_facebook-like-button-dynamic-url-javascript.htm, Linear constraint for dynamic facility location , Meta Stack Overflow

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>
load more v
88%

In my html.tpl.php, I will hardcode the JS include so that it is right after the body (so I am not at the mercy of render trees, preprocess, etc:, How seriously can we take the success of the Standard Model when it has so many input parameters? , Meta Discuss the workings and policies of this site , “pig book” -when, where & why has a booklet of college students with photos been called a “pig book”?

Inside a template_preprocess_node() I have done:

/**
 * Implements template_preprocess_node().
 */
function MYTHEME_preprocess_node( & $variables) {
   $node = $variables['node'];
   $variables['full_url'] = url('node/'.$node - > nid, array('absolute' => TRUE));
}

Then in my node.tpl.php, I have

<?php // http://developers.facebook.com/docs/reference/plugins/like/ ?>

<div class="fb-like" data-href="<?php print $full_url; ?>" data-send="true"
  data-layout="button_count" data-width="450" data-show-faces="false"></div>
<script>
  (function ($) {
    try {
      FB.XFBML.parse();
    } catch (e) {
      $('.fb-like').remove();            
    }
  })(jQuery);
</script>

In my html.tpl.php, I will hardcode the JS include so that it is right after the body (so I am not at the mercy of render trees, preprocess, etc:

<div id="fb-root"></div>
<script>(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>
load more v
72%

You can change the language of the Like Button by loading a localized version of the Facebook JavaScript SDK. Replace en_US with your locale, for example, fr_FR for French (France).,When a person visiting your webpage clicks the Like button, an App Event is triggered to log this like on Facebook.,Set the URL of your webpage where you are placing the Like button,Facebook SDK for JavaScript

Formatted for readability.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>
load more v
65%

September 2018 Update: URL Dynamic Parameters are back!,The very first paragraph of this article reads “May 2018 Update: It looks like this feature has been (temporarily?) disabled by Facebook…please proceed with caution.” Did you not see that, or do you mean it’s not clear enough?, Ana June 6, 2018 at 12:35 am The very first paragraph of this article reads “May 2018 Update: It looks like this feature has been (temporarily?) disabled by Facebook…please proceed with caution.” Did you not see that, or do you mean it’s not clear enough?,May 2018 Update: It looks like this feature has been (temporarily?) disabled by Facebook, at least for some accounts. There’s discussion online about it not working anymore, and information on these dynamic parameters has been edited out from the official documentation. The original article is still presented below for reference, but please proceed with caution.

So the value you would place in the URL parameters field would be

utm_medium = paidsocial & utm_source = {
   {
      site_source_name
   }
} & utm_campaign = {
   {
      campaign.name
   }
} & utm_term = {
   {
      ad.id
   }
}

Other "dynamically-using" queries related to "Update FB:Like URL Dynamically using JavaScript"