Walker News

2 Ways To Add Facebook Like Button With Comment Box To WordPress

The new Facebook Like Button with comment box allows visitors to easily share their thought for a page or link on Facebook profile.

If you would like to add this new Facebook Like Button to WordPress blog, here are two different ways to get it done in minutes, even WITHOUT installing a WordPress plugin.
With reference to Facebook Social Plugin guide, comment box only available for the iframe version of FB Like Button that uses “standard” layout style with a width of at least 400 pixels. As for the XFBML version, there is always an option to add a comment.

In addition, the page URL must be encoded to RFC 1738 format.

Uses functions.php

Edit functions.php of active WordPress theme to add this block of PHP code (to automatically append the FB Like Button to post content):
function wfblike($incontent){
  $FbLike = '<iframe src="http://www.facebook.com/plugins/like.php?href=' . rawurlencode(get_permalink()) . '&layout=standard&show_faces=true&width=480&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:480px;height:80px;" allowTransparency="true"></iframe>';
  if ($post->post_parent || is_single())
    $incontent = $incontent . $FbLike;
  return $incontent;

The rawurlencode is standard PHP function used to encode or convert hyperlink to the required RFC 1738 format.

If there is no such functions.php file in active WordPress theme folder, just create one with these two lines:

Then, insert the block of code in between the <?php and ?>

Using comments.php

If visitors will leave a comment for the post, they might prefer to share their thought about the page on Facebook :-)

Of course, you can use other PHP files in the active theme folder (except for header.php, 404.php…).

Insert this block of code to comments.php file (embed PHP in HTML code, which is different than the one used in functions.php):
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&layout=standard&show_faces=true&width=480&action=recommend&colorscheme=dark&height=80" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:480px;height:80px;" allowTransparency="true"></iframe>

Whichever way you’ll use, you might also need to use some CSS syntax to control the iframe appearance on your theme.

If this is trick is too hard for you, then get a WordPress plugin or buy me a coffee to do it for you :-)

Custom Search

2018  •  Privacy Policy