Drupal Technical

[Drupal] Add Facebook share button to checkout complete page in Drupal site

Antony.glen | | 2 min read

Facebook plays a vital role in marketing your business. Facebook provides share buttons which can be embedded in your website, enabling you to share the website's data from within the site. Let's find out how this feature can be implemented in a Drupal site.

In this article, we will discuss how to add custom Facebook share button to checkout complete page. First of all, we need to create a Facebook app. This can be done by visiting the Facebook developer's site. On creating Facebook app, please note down the App id, Secret Key etc., which is to be used as authentication data. Find out the checkout complete template file for adding the share button. Add 'id' attribute as reference to the share button. Pass the data that needs to be shared using the js. Before that, we need to fetch the details that has to be shared. Implement the hook 'hook_themes_preprocess_completion($orders)' for getting the required data. Assign the data we have fetched from the '$orders' to the checkout_themes array as follows:


  drupal_add_js(array('checkout_themes' => '<PRODUCT TITLE>'), 'setting');
  drupal_add_js(array('checkout_themes' => '<IMG_PATH>'), 'setting');
  drupal_add_js(array('checkout_themes' => '<SKU_NUMBER>'), 'setting');
  drupal_add_js(array('checkout_themes' => '<PRODUCT_QTY>'), 'setting');

In the 'js' file, we could addon click event for the share button, to get the details that need to be shared on Facebook. Follow the steps as given below:


  $jq('#share_button').click(function(e){
        var cmrproducttitle = Drupal.settings.checkout_themes.cmrproducttitle;
        var cmrproductimage = Drupal.settings.checkout_themes.cmrproductimage;
        var cmrproductsku = Drupal.settings.checkout_themes.cmrproductsku;
        var cmrproductquantity = Drupal.settings.checkout_themes.cmrproductquantity;
      e.preventDefault();
        FB.ui(
      {
      method: 'feed',
        name: cmrproducttitle,
        link: 'http://www.example.com/',
        picture: cmrproductimage,
        caption: 'Example Site',
        description: 'I have brought the product' + cmrproducttitle + 'from site Example.com',
        message: ''
      });
    });

The Facebook share button can be added with reference to the '#share_button' id in the above code snippet. Finally, we need to add share button to the checkout complete page. For that, we need to edit a module template under checkout themes. We could find the file checkout_themes_completion.tpl.php in path sites/all/modules/checkout_themes/themes. Add the following code to the template file.


  <span class='fb_share_btn'>
    <span>Feel Free to Share about your Purchase <button type="button" id="share_button" class="pluginButtonLabel">Share</button></span>
  </span>

Now you have successfully added the share button to the checkout complete page. Give suitable styling to appropriately match your design.

Please provide your feedback if you find this article useful and get in touch to know more.

 

 

Related Topics