Become Wordpress Professional - Your Ultimate Wordpress Guide

Tuesday, 2 April 2013

How to add Facebook like Button in Wordpress

Facebook is considered as a top social network platform and no doubt it is the need of every blogger in order to introduce theirselves and promote their website free of cost with thousands of audience via Facebook like button. Facebook has extended their Like button features and in additional "Recommended button" has also been introduced. Today you will learn how to add a Facebook like button in WordPress blog with full customization features and insight data.

Add Facebook Open Graph Meta Data 

The first step is to add Facebook Open Graph meta data in your WordPress site. It is used to generate thumbnail of your blog post when you share it in your time line or pages on facebook. It is highly recommended to display thumbnail while sharing articles on Facebook because it gain maximum likes.

Open your theme functions.php file and and paste the below code within PHP tags
//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
  return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
 }
add_filter('language_attributes', 'add_opengraph_doctype');

//Lets add Open Graph Meta Info

function insert_fb_in_head() {
 global $post;
 if ( !is_singular()) //if it is not a post or a page
  return;
        echo '<meta property="fb:admins" content="YOUR USER ID"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>';
 if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
  $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
  echo '<meta property="og:image" content="' . $default_image . '"/>';
 }
 else{
  $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
  echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
 }
 echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Note : After paste the code you have to make some changes in it.

1. Find this line from the code above: echo '<meta property="fb:admins" content="YOUR USER ID"/>'; and Add Your User ID. Every Facebook profile has its own unique user ID and you can get your unique facebook user ID using the following URL.

http://graph.facebook.com/YOUR FACEBOOK POFILE USERNAME here

Just Replace the last line with your Facebook Profile username.

2. Find “Your Site Name Goes Here” from the above code and change it with your website URL

3. If you have a default thumbnail for your blog posts and want to display it when there is no featured image then find this code $default_image="http://example.com/image.jpgand replace it with your default image URL.


Adding Facebook Like Button in WordPress

Facebook like button is very useful if you want to others to add your content in their timeline in very easy way. Use this XFBML code where you want to display Like Button. If you want to add in just your Blog posts then open single.php file in your theme folder and paste the code inside the Post loop.


Note : You can also customize your Facebook Like button. Below is the details of further edition in parameters of this code.

show_face=false
This Parameter is generating Facebook profile pics with your like Button. When some of your friend already like the post you can view their profile pic beside like button. If you want to activate this parameter then change it into show_face=true.

layout=button_count
This parameter will simply generate a horizontal like button with count. If you want to add New Facebook box Like button then simply change this into layout=box_count.

action=Like
If you want to display Recommended button instead of Like button then replace this parameter with action=recommend. 

colorscheme=light
This parameter will create background of your Like button. If you want to add Dark Background then use this parameters colorscheme=dark instead of default parameter.

Now you are able to add full functional and customized Facebook Like button in your blog posts and pages. Try it in your WordPress blog and share your articles and ideas in your Facebook world.

2 comments:

  1. Hi,

    Recently I came across some great articles on your site.
    The other day, I was discussing (http://www.wpreads.com/2013/04/adding-facebook-like-button-in-wordpress.html)with my colleagues and they suggested I submit an article of my own. Your site is just perfect for what I have written!
    Would it be ok to submit the article? It is free of charge, of course!

    Let me know what you think
    Contact me at anelieivanova@gmail.com

    Regards
    Anele Ivanova

    ReplyDelete
  2. Hi Anele,

    Thank you for your appreciation, surely you may submit your article at my email id: farsabbutt@yahoo.com and it will be published accordingly.

    Best Regards,
    Farsab B.

    ReplyDelete

Please Avoid Spamming. Comments will be moderated before they are published.