Add a Facebook Like and Send button as a WordPress shortcode. You can choose between all the available types as well as selecting the darker templates. I recently wrote a post about Google +1, Add Google +1 to WordPress 3.0 with a simple shortcode, so checkout that shortcode if you haven’t already implemented Google +1 into your WordPress site.
The code below was put together using Facebook Like API documentation.
1) The WordPress Shortcode
You are going to paste this into your ( functions.php ) file or wrap it up into a plug-in file. If you do not have a functions.php file in your theme just create one at the root level of your template with this code pasted inside of it. That will add the code into the WordPress runtime. Really there is no wrong way to do it.
I went ahead and added all the options for completeness.
function fb_like( $atts, $content=null ){
/* Author: Nicholas P. Iler
* URL: http://www.ilertech.com/2011/06/add-facebook-like-button-to-wordpress-3-0-with-a-simple-shortcode/
*/
extract(shortcode_atts(array(
'send' => 'false',
'layout' => 'standard',
'show_faces' => 'true',
'width' => '400px',
'action' => 'like',
'font' => '',
'colorscheme' => 'light',
'ref' => '',
'locale' => 'en_US',
'appId' => '' // Put your AppId here is you have one
), $atts));
$fb_like_code = <<<HTML
<div id="fb-root"></div><script src="http://connect.facebook.net/$locale/all.js#appId=$appId&xfbml=1"></script>
<fb:like ref="$ref" href="$content" layout="$layout" colorscheme="$colorscheme" action="$action" send="$send" width="$width" show_faces="$show_faces" font="$font"></fb:like>
HTML;
return $fb_like_code;
}
add_shortcode('fb', 'fb_like'); Note: you can wrap a URL around our shortcode for explicit setting of the URL to be liked or Recommended like this [fb]http://www.google.com[/fb].
2) PHP Code – Manual placement in theme file
For the most control adding code to your theme files will be the best way to go. You can add it to any pages in or out of the WordPress loop.
<!-- Facebook Like button-->
<?php echo do_shortcode("[fb]"); ?>
3) Shortcode usages – Examples
There are a few variations you can play with for different look. Here are just a few examples.
Standard Types – Default
[fb]
[fb send='true']
[fb action='recommend']
Button Count Types
[fb layout='button_count']
[fb send='true' layout='button_count']
[fb action='recommend' layout='button_count']
Box Count Types
[fb layout='box_count']
Complete List of Facebook Like Options
These are the perimeters that our shortcode will accept:
- Send – true, false
- Layout – button_count, …
- Show Faces – true, false
- Width – Default is 400px
- Action – like, recommendation
- Font – Check FaceBook API for Details
- Colorscheme – light, dark
- Ref - Check FaceBook API for Details
- Locale - Check FaceBook API for Details
- AppId – Add FaceBook AppId for FaceBook tracking
Conclusion
Well, that’s all. I hope this provides an easy way of adding Facebook like buttons to your themes.
Dont u need some sort of start and end in the function code??? when i create a functions.php file and paste the code its just all black and seems like it need a php start and end somewere??
Yes. The functions.php needs to be wrapped in php tags.
Hi Nicholas,
Thanks for your tip it works well.
Nevertheless, I have a problem with the button which I can’t align where I want : I get a huge top margin when adding a simple short code in my wordpress page.
I’m not an html/css specialist as you can guess. Any idea on how to control the button position ?
Thanks,
Paul
That’s really useful however it doesn’t validate. Any suggestions how to fix it?
Thank you so very much , I was able to use it and also changes the logo.
http://www.bestphotog.com/blog
Would it be possible to create similar button for
Facebook
google plus
and twitter?
NICE!
best thing i found on the web.
thanx man!
heyy…
this code is working well..
But i want to ask that can after clicking on Button data of that user like email & d.o.b saved into our site admin panel..
Or after Login The user Will be redirected to the Apps page Which i made..