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 http://developers.facebook.com/setup/
After you click on Create application you will see
Step 1
You need to download & installed this plugin FBLike
Download
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="http://www.w3.org/1999/xhtml"<br />
xmlns:og="http://opengraphprotocol.org/schema/"<br />
xmlns:fb="http://www.facebook.com/200 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
Notes:
fb:admins
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: http://graph.facebook.com/timware (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.
fb:app_id
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);
/******BEGIN BUBBLE SORT BY MENU ORDER************
// 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);
// UNCOMMENT THIS IF YOU WANT THE FULL SIZE IMAGE INSTEAD OF THE THUMBNAIL
//$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" />’ .
‘</a>’;
// Print the image
//echo $sImgString;
//print only the url of the first image
echo $sThumbUrl;
} else {
//*****************************************
//SET DEFAULT IMAGE
//*****************************************
echo ‘https://www.aileenbaby.com/rosamundwofacebookbutton.gif’;
}
}[/php]
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>
<script>
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 +
‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>
<fb:like action=’recommend’ colorscheme=’light’
layout=’standard’ show_faces=’true’ width=’500’/>[/php]
If you have trouble following my steps, you can visit Hyperarts.com. Good Luck!
Reference: Hyperarts.com
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. http://www.addthis.com/bookmark.php?…
Hi Intermediate SEO
Thanks for dropping by to my groceries blog with all sort of topics 😛
About your question of combining Fb like and FB share. It’s discussed in this forum http://www.v7n.com/forums/social-network-marketing/196383-facebook-like-vs-bookmark.html
I don’t know how to combine these two, maybe you can email to Facebook developers and ask them.
Here’s the fb: share link
And here’s the fb:like link
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?
Have you created your facebook app id yet?
Now there are many plugins to do this without altering the code
you can have a look at this plugin
http://wordpress.org/extend/plugins/fblikebutton/screenshots/
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.