Add Facebook “Like” Buttons To WordPress Blog Without Using Plugins

WordPress Facebook like button or the Facebook share button on your WordPress blog will definitely improve your website or blog’s popularity. Facebook is the leading Social Network service with millions of people are active members. Thousands are joining every day. If you are a blog or website owner, then you can make use of the Facebook to make your blog more popular.
Facebook “Like” button is one of the best shortcut to make your blog post or article popular. If one person likes one post it will be displayed in his profile page. If that person has many friends in his network, most of them will see the Post and this may yield more traffic to your blog from Facebook.
It is always a better idea to provide a mechanism to your users to share your post. Be it Facebook Like or Twitter Tweet or Digg or any other. The more people share your article the more popular your blog becomes. Even search engine gives extra considerations to posts or articles which are popular in social network sites.
Today we will see how to add Facebook “Like” button to your wordpress post or any other pages without using any plugins. In fact the less the number of plugins you use the more faster it becomes.

Add Facebook “like” Button scripts to your blog post .

In wordpress the file which will be rendered as the post page is the ‘single.php” file. This you can see in the themes folder. Once you identified the file, you can add the code given below to the location where you want the Facebook “Like” button to appear. Find the code similar to the below code. If you want to add the facebook “Like” button below the title you can add similar to the below code.

1
2
3
4

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
...................................................................................
<?php the_title(); ?>
YOUR FACEBOOK LIKE SCRIPT CODE HERE

If you want to add the “Like” button below the post content you can find code similar to the below and add the script.

1
2
3
4

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
...................................................................................
<?php the_content(); ?>
YOUR FACEBOOK LIKE SCRIPT CODE HERE

Identify the appropriate location inside the loop, like after post header or at the end of the content etc.

There are two Facebook Like button implementations: XFBML and Iframe. The XFBML version is more feature rich but require the JavaScript SDK.
You can choose from three different layout styles.

• standard

1
2

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;">
</iframe>

• button_count

1
2

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;">
</iframe>

• box_count

1
2

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;">
</iframe>

• The XFBML verson

1
2

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink(); ?>" show_faces="true" width="450"></fb:like>

Here the XFBML version URL defaults to the current page.

Apart from the above layout styles you can also select the width of the like button, color scheme etc. You can read more detailed tutorial in Facebook Like Button reference page.

Before you Go,

Before you go, subscribe to get latest technology articles right in your mailbox!.

EmailEnter your email address

Subscribe