Tips to Integrate Facebook to your Wordpress Website
Published on 23 April 15
Semaphore0
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:
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:
- Go to Facebook Application Page
- Click on "+Create New App"
- Give your comments app a name (you don't need to fill in the App Namespace details here)
- Get and Store the app API key along with a secret key
- 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>
<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 <header> 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>
Conclusion
Using this method, you can easily integrate Facebook comments as well as Like button to your website without any coding errors. The best part of using this solution is that you can even customize it to suit your website needs. With Facebook being widely used, this integration will give your users an extra avenue to interact with your website and this would give you detailed insights on how to improve your service and the customer base. Facebook integration is a win-win for both the website owner as well as for the customers.
This blog is listed under
Open Source
, Development & Implementations
, Digital Media & Games
and E-Commerce
Community
Related Posts:
Post a Comment
