tips to integrate facebook to your wordpress website
TRANSCRIPT
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 <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>
Original Source: http://www.advancesharp.com/blog/1150/tips-to-integrate-facebook-to-your-wordpress-website