How to add Facebook Like Button with comment

Here’s step-by-step on how to add facebook like button with comment. If you have other better ways please feel free to share in my comments.

And after you share and comment, the result

Step 0

You need to get your Facebook application ID
Go to

After you click on Create application you will see

Step 1

You need to download & installed this plugin FBLike
FB Like configuration

Click photo to enlarge
Note: Key in your Facebook Application ID in your FB Like plugin settings

Step 2

Add this to your header.php
[php]<html xmlns=""<br />
xmlns:og=""<br />
xmlns:fb=" 8/fbml" <?php language_attributes(); ?>><br />
<meta property="fb:admins" content="566593088"/><br />
<meta property="fb:app_id" content="184517187139" /><br />
<meta property="og:type" content="article" /><br />
<meta property="og:image" content="<?php bdw_get_images(); ?>"/>[/php]
If you don’t know where to add, here is an example



Replace YOUR-ADMIN-ID with your Facebook User ID. To easily get your Facebook User ID, you can use another aspect of the social graph: (substitute your username for “timware”). This will pull up the information that is publicly available for that user. You’ll want the “id” value for our purposes here.


Replace YOUR-APP-ID with the Application ID assigned to your website when you set it up on Facebook, as described above.

Step 3

Add this code to your function.php

[php]function bdw_get_images() {
// Get the post ID
global $wp_query;
$iPostID = $wp_query->post->ID;
//$iPostID = get_the_ID();
// Get images for this post
$arrImages =& get_children(‘post_type=attachment&post_mime_type=image&post_parent=’ . $iPostID );
// If images exist for this page
if($arrImages) {
// Get array keys representing attached image numbers
$arrKeys = array_keys($arrImages);
// Put all image objects into new array with standard numeric keys (new array only needed while we sort the keys)
foreach($arrImages as $oImage) {
$arrNewImages[] = $oImage;
// Bubble sort image object array by menu_order TODO: Turn this into std "sort-by" function in functions.php
for($i = 0; $i < sizeof($arrNewImages) – 1; $i++) {
for($j = 0; $j < sizeof($arrNewImages) – 1; $j++) {
if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
$oTemp = $arrNewImages[$j];
$arrNewImages[$j] = $arrNewImages[$j + 1];
$arrNewImages[$j + 1] = $oTemp;
// Reset arrKeys array
$arrKeys = array();
// Replace arrKeys with newly sorted object ids
foreach($arrNewImages as $oNewImage) {
$arrKeys[] = $oNewImage->ID;
******END BUBBLE SORT BY MENU ORDER**************/
// Get the first image attachment
$iNum = $arrKeys[0];
// Get the thumbnail url for the attachment
$sThumbUrl = wp_get_attachment_thumb_url($iNum);
//$sImageUrl = wp_get_attachment_url($iNum);
// Build the <img> string
$sImgString = ‘<a href="’ . get_permalink() . ‘">’ .
‘<img src="’ . $sThumbUrl . ‘" width="150" height="150" alt="Thumbnail Image" title="Thumbnail Image" />’ .
// Print the image
//echo $sImgString;
//print only the url of the first image
echo $sThumbUrl;
} else {
echo ‘’;

Step 4

Add this code to your single.php and put in where you would like it to appear in your post

[php]<div id="fb-root"></div>
window.fbAsyncInit = function() {
FB.init({appId: ‘YOUR APP ID’, status: true, cookie: true,
xfbml: true});
(function() {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol +
<fb:like action=’recommend’ colorscheme=’light’
layout=’standard’ show_faces=’true’ width=’500’/>[/php]
If you have trouble following my steps, you can visit Good Luck!

6 thoughts on “How to add Facebook Like Button with comment

  1. What a weird blog, all sorts of stuff. In any case, I’ve a question on your facebook post. I’m trying to understand if it’s possible to have a combined facebook like and share icon. And to compare the two.
    Lets assume the question is about putting Facebook icons on a NON-Facebook page. I have researched it and found two possibilities:
    1- Like (previously friend) – makes the visitor a fan of OUR Facebook page. Can only be used if the webpage has an associated Facebook page. It’s done with an iframe.
    2 – Share (previously bookmark) – creates a link to the webpage on the user’s profile page. Perhaps preferable for SEO.…

  2. Hey RosaMundwo, I like how you create a function to specially call the images for the fb:image. Pretty smart idea.
    One problem, is that when I add that function I get the white screen of death. I can’t figure out what’s wrong with the code because I’m no good at PHP but I suspect there might be something off.
    Any ideas?

  3. Thanks Rosamundwo. I was just using step 3 to get the right image. I wasn’t using the SDK part since I already have it.
    I was able to find a plugin Open Graph Protocol that uses the same method of get_children, which I think is awesome. Good idea on that btw.
    Thank u.

Leave a Reply

Your email address will not be published. Required fields are marked *