Tips to Integrate Facebook to Your Wordpress Website

Social sharing is vital for your website, especially if you want to strike the right chord with your audiences. You don't want to miss out on the conversions that might happen from the different social media websites, do you? While installing a plug-in and accessing social sharing using the plug-in seems like an easy way out, if you want to customize social sharing as per your needs, you should programmatically include the social sharing buttons. Here you will learn about how to integrate Facebook like and comments to your Wordpress website.

Integrating Facebook Comments

When your users are accessing the website, they are most likely logged onto Facebook. Integrating the Facebook comments into your website is a challenge that you need to work on if you want more engagement on your website. There are plug-in solutions like Disqus and IntenseDebate that you can use to integrate the comments to your website, but these solutions can increase spam and reduce the conversions. Instead, if you integrate the comments directly to your website, you enable the conversations in a fully fledged way.

Here are some steps that will help integrate Facebook to your website

Create New FB Comments Application

This is your first step to integrating Facebook comments to your website. You will need to create a comments application on Facebook. You will need to do this irrespective of how you are loading the comments to your website i.e. manually using the third party plug-in or using the official plug-in from Facebook. Below are the steps:

  1. Go to Facebook Application Page
  2. Click on "+Create New App"
  3. Give your comments app a name (you don't need to fill in the App Namespace details here)
  4. Get and Store the app API key along with a secret key
  5. Get the Facebook App Plug-in code (the code will contain the required keys)

Add the Code Generated

The Facebook App Plug-in code thus generated needs to be added to your website. Add it to the Facebook comments plug-in, which is the official plug-in. You can edit URL details along with the width of the box, the number of comments to be placed on a page and the background color.Click on "Get Code" button given below these settings to get the code for the comments box.

<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_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

This kind of code will be generated. You will need to paste this code immediately after the <body> tag in the

template.

Replace the static URL with Wordpress permalink to link the comments to your website using this code

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="15" data-width="500"></div>

You can even replace your Facebook comments with WordPress comments by adding the necessary code to single.php template.

Integrating Facebook Like Button

You can integrate Facebook like button in three different layouts- standard, button count, and box count. You can even add the Email button below. You can even state the width of the button for your website.

There are two different codes that you will need to add in order to integrate the Like box.

Add JavaScript SDK code immediately after the <body> tag. Once you have added this code, you will not need to add this code, even when you make changes to the Like button on your website.

Now, you will need to decide the exact place where you want to display the "Like" button. You may even need to refer to the right page. The code to check if you have referenced the right page or not is href="<?php echo get_permalink($post->ID); ?>". You will need to add this bit of code to the second part of the whole code which is as follows

div class="fb-like" data-href="http://www.facebook.com/example" href="<?php echo get_permalink($post->ID); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>

Author Bio: Deepa, a technical writer with Semaphore Software, who now devotes her time in advising its clients to hire wordpress programmers. She offers information as well as tips and latest trends in this domain. Her love for reading helps her constantly provide latest information on different technical and design aspects of WordPress

Deepa Ranganathan
  • facebook
  • wordpress
  • facebook-integration
By Deepa Ranganathan On 23 Apr, 15  Viewed: 139

Other blogs you may like

Integrate Facebook Authentication in ASP.Net5 Web App

Have you recently created a web application using Visual Studio 2015RC? Looking to integrate Facebook authentication to this web application built on ASP.Net5? Then you have hit the right keys and reached the right place. Here, you will use easy steps to integrate Facebook authentication. Now,... By Deepa Ranganathan   On 19 Jun 2015  Viewed: 390

How to Add Custom Icons to Your Navigation Menu?

It's always good to make your designs user friendly! When your design is intuitive, it guides your user towards the right path all the while. Navigation menus are one of the most intuitive areas of your design. You need to make sure the menus talk for themselves. Adding custom icons to your... By Deepa Ranganathan   On 14 May 2015  Viewed: 181

Adding Twitter Cards to Your Wordpress Website

In the past, posting links to your Twitter meant your user needed to click on the link to know more about it. It never showed a synopsis. But, things have changed with Twitter cards. You can attach the title, and a brief preview of the content along with the link. This is almost similar to pasting... By Deepa Ranganathan   On 12 May 2015  Viewed: 1,164

Customize The Admin Post List in Wordpress Website

What do you see when you click on Admin post list in your Wordpress website? A list of all the posts created by you is displayed with their titles and dates. But, that's about it which is displayed! You won't be able to see any other details related to your post. So, if you want to display some... By Deepa Ranganathan   On 08 May 2015  Viewed: 387

5 CSS Customizations for Your Wordpress Website

<center>![Customizations for Your Wordpresst][1]</center> Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look... By Deepa Ranganathan   On 06 May 2015  Viewed: 251