Pimp Your Thesis Blog with Facebook Social Plugins

by on April 22, 2010 · 33 comments

Facebook announced a ton of new technology at their F8 Developers Conference yesterday in San Francisco. At the conference they unveiled a ton of new technologies that I think could reshape the web.

This is a “gloves off” move between Facebook and Google. Facebook is claiming they have a better way of determining the relevance of web pages, based on social interactions online rather than by ranking pages based on back links. They call it the Open Graph.

Facebook for Websites

There are a bunch of new Facebook social plugins you can add to your website. One of the things that you can do immediately is allow your visitors to “Like” any web page or blog post on your site by adding a few simple lines of code. You can literally treat URL on your website like a Facebook page!

Here’s an example of a button that shows your visitor who else in their social network “Liked” this page, and allows them to “Like” your page with a comment too.

It’s dynamic – go ahead – Click It!

Adding Facebook Social Plugins to Your Blog (or Website)

Adding one of these to your website is super easy. Just go to the Like Button plugin page at Facebook, and they have a tool that helps you get the code.

facebook-like-button-code-generator

Enter in the URL of your page and push the Get Code button and you’ll get the code you can embed on your website. You need to use the iFrame version of the code unless you’ve added the Facebook JavaScript SDK to your site.

facebook-like-button-code

What if I want to Add it to ALL my Blog Posts?

That’s cool for an individual page or post on your site, but what if you want to include this on all your blog posts?

Well, if you are using the Thesis WordPress Theme you can use “hooks” and a little WordPress code to easily add this to all your blog posts automatically.

Here’s how to do it.

Thesis conveniently provides a hook called thesis_hook_after_post that allows you to add anything you want after every post on your site. Here’s the code you need to add to that hook to get this new Facebook Like Button to show up at the bottom of every post:


/* Facebook Plugin After Post Hook */
function add_social_media () {
if (is_single()) {
?>
<?php
echo '<iframe src="http://www.facebook.com/widgets/like.php?href=';
echo the_permalink();
echo ' "scrolling="no" frameborder="0" style="border:none; width:450px;height:30px"></iframe>'
?>
<?php
}
}
add_action('thesis_hook_after_post', 'add_social_media');

The WordPress function the_permalink(); gives you the URL of your blog post so that the likes are unique to the particular post instead of your whole blog.

You can add this hook to your custom_functions.php file like this, or using the Rick Beckman’s excellent OpenHook plugin.

If you use OpenHook to do this, you’ll want to leave out the function wrapper and add_action. So the code you paste in the after_post_hook box will look like this:

<?php
echo '<iframe src="http://www.facebook.com/widgets/like.php?href=';
echo the_permalink();
echo ' "scrolling="no" frameborder="0" style="border:none; width:450px;height:30px"></iframe>'
?>

Give it a try and let me know what you think in the comments below!

You can Get Thesis here. I recommend BlueHost for WordPress hosting.

Article by »

Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog, and the GetFiveStars Customer Feedback and Reviews service.

Don has written 313 articles on Expand2Web

Author Connect » Twitter | | Facebook |

See my disclosure about advertising and affiliate links

{ 33 comments… read them below or add one }

Aaron April 22, 2010 at 10:23 am

I added the code into the “thesis_hook_after_post” just like you said but it’s not working and killing the layout of my homepage.

Reply

Don Campbell April 22, 2010 at 10:26 am

Hi Aaron,
How did you add it – did you use OpenHook or edit your custom functions file? If you used OpenHook, you’ll need to check the “execute PHP” checkbox for it to work. If you did it in custom_functions.php, did you add it at the end?

The code that I’ve included here is working on this blog, so I know it is good. We need to figure out if something got left out in the PHP code in your custom_functions.php file…

Reply

Aaron April 22, 2010 at 3:34 pm

The new update you just posted fixed the problem.

Thanks a bunch Don, as always you’re always cutting edge and I love that.

Best Aaron.

Reply

eileen April 22, 2010 at 5:06 pm

This literally took me 1 minute to do!!! Thank you so much, your tips are always so valuable. Aaron, excellent question (and Don thanks for the quick answer), I would not have known to check the “execute PHP” button.

Reply

Don Campbell April 22, 2010 at 10:36 pm

@Aaron, @Eileen, great – I’m glad you got it working!

It’s pretty cool to play with. Next step, I’m working on getting the more advanced one that shows pictures and allows you to leave a comment. Stay tuned!

Reply

Jimmy Dillon April 23, 2010 at 5:53 am

Your post has made my day! First, I was unaware of the OpenHook plugin so, it’s refreshing to know how much time will be saved by using it. Installing the like button for all posts via OpenHook was ridiculously simple and took about 30 seconds to have it working on my site.

It’s very exciting, what’s going on with the semantic web. Being able to implement it with facebook so quickly and easily is awesome! Don, thanks for your great posts. I’m certainly not going to waste any time trying to install any other new facebook functions, so I’m looking forward to your next post on adding advanced functions and more.

Reply

Don Campbell April 23, 2010 at 6:55 am

@Jimmy – Awesome!
I’ve got a new tip in the works now…

Reply

Dean Carlson April 23, 2010 at 12:39 pm

Hi Don, thanks for the tip. I was playing around with the width and height and changed them to 900 and 60 respectively. Also put the like button at the top of the post. Pretty cool result, I think!

Reply

Don Campbell April 23, 2010 at 8:34 pm

Hey Dean – I checked out your site and it looks great!

Reply

Dean Carlson April 24, 2010 at 4:33 am

Thanks Don – Keep the great stuff coming!

Reply

Kiwi April 24, 2010 at 8:37 am

Hey Don, how do we add in the comments field to this also? I just saw it on this site … http://www.people.com/people/article/0,,20363839,00.html

Thanks Kiwi.

Reply

Kevin April 26, 2010 at 11:54 am

The like button seems to not be working in IE 7. Can anyone else confirm? I get an “error on page” message. “Env is undefined”.

This would be great if it would work properly. Seems buggy and clunky so far (typical facebook).

In addition, one issue I see with this button is a new way for people to spam. After you click the like button it just posts the link to your profile without warning. The user wouldn’t know if they are recommending something undesirable until they view their facebook account. (may be too late by then). I wonder why they wouldn’t give the user a preview of what will display in their profile first. …..Not good thinking facebook

Just my 2 cents

Reply

Don Campbell April 26, 2010 at 12:49 pm

Hi Kevin,
Can you give me a link to your site? I tested another site in IE and the Share Link worked. But I did find that it conflicts with the Facebook Fan Box widget though. It is definitely rough at this point.

Also, I agree with your point about the preview before posting your FB profile. They should absolutely do that.

Reply

Kevin April 26, 2010 at 2:03 pm

Hi Don,

Thanks for the reply.

I was actually getting it from clicking on the “like” button on this post and others on your blog. I’m not getting it anymore though. May have been a conflict with another page I had open? Seems to be working fine now.

Definately a few bugs to work out but lots of opportunity I think.

Reply

eileen April 26, 2010 at 2:12 pm

Kevin thanks for the reminder to check Explorer, I always forget. My site looks okay and seems to be working fine, but I am using 8.0 (http://eileenlonergan.com)

Reply

Pete April 26, 2010 at 11:02 pm

I would like to exempt some of my pages from this button.

Any suggestions as to how I might be able to do this

Thanks

Reply

Sapitt April 27, 2010 at 9:40 pm

It’s work very well.. great! Thanks Don Campbell 🙂

Syafiq Zainal

Reply

Esteve Graells May 4, 2010 at 11:54 am

I think instead of the trackback URL could be better to use the_permalink() function to get the real URL of the post. That way can boost the SEO for this post, as Google and Facebook will realize loves that post (like the ones you write Don).

What do u think?
All the best.

Reply

Don Campbell May 4, 2010 at 12:15 pm

@Sapitt – you’re very welcome!

@Esteve – I agree with you and updated the post. the_permalink() is better. 😉

Reply

Don Campbell May 4, 2010 at 12:17 pm

@Pete – well, to add it to only select pages, you can just cut and paste the iframe code you get from Facebook.

If you want it to be added automatically but not show up for certain pages, which pages do you want it to NOT show up for?

All pages in a certain category? Pages and not posts? You could do that with conditional logic. But I would have to know more about what your “exclude” criteria are.

Reply

david July 31, 2010 at 7:07 am

This worked like a dream using the openhooks plugin. Much appreciated.

Reply

SomeGirl August 16, 2010 at 8:00 pm

Thank you! I’m a new Thesis theme owner setting up my blog and your tutorial worked well… easy enough for a beginner like me! Thanks for sharing it! – Michelle

Reply

Marinos August 26, 2010 at 4:26 am

You’re the man!

Thank you for your post. It was so helpful for me!

Reply

james November 28, 2010 at 8:45 am

Wow that is the coolest integration of facebook like count box + twitter count box + email icon I have seen! Would you mind sharing how you did the email icon? Thanks!

Reply

Don Campbell November 28, 2010 at 8:52 am

Hi James,
Thank you. I just used an e-mail icon and used the mailto: href tag to create an email when someone clicks on it. Then some CSS to line things up properly.
I got the idea from: http://litemind.com/

Reply

Mark March 25, 2011 at 6:38 am

Hello Don,

Like always your tips work out great for me! I was wondering, how do I get my blog entries that show up on my fan page to link to my website? I was told to link my blog through the notes app on FB but if someone were to visit my fan page and click on the blog entry in the status updates it takes them back to my notes page on FB instead of the blog. Is there a plugin that could link all this together so that I can have traffic going back and forth? Thanks Don

Reply

Don Campbell March 25, 2011 at 8:27 am

Hi Mark,
You ran into the exact reason I don’t use the Facebook Notes app for this. There are several Facebook Apps developed by third parties that you can use. Dlvr.it is a good one. Here’s an article that will get you started: http://www.eileenlonergan.com/how-to-change-the-default-image-in-dlvr-it

Reply

Mark March 25, 2011 at 7:45 pm

Thanks so much for your help Don!

Reply

Eileen lonergan March 25, 2011 at 3:57 pm

@Don, thank you for the shout out. Mark if I can answer any questions about dlvr.it please let me know!

Reply

Mark March 25, 2011 at 7:44 pm

Thank you Eileen! I’ll take a look at it this weekend and let you know how it goes.

Reply

Alan April 3, 2011 at 12:41 am

Thank you! I’m a new Thesis theme owner setting up my blog and your tutorial worked well… easy enough for a beginner like me!

Reply

Storm June 27, 2011 at 4:20 am

Thanks for this! Been having problems with Facebook/social plugins and Thesis. How do I add Like/Send/Tweet/Google+1 and have them aligned nicely like yours? Are you using a separate plugin for the Tweet/+1?

Whenever I use plugins, the alignment seems to be off(when Google +1 is used). I’m thinking it might be better to just use coding and OpenHook.
Any advice?
Thanks

Reply

Juan July 21, 2012 at 10:18 pm

Thanks for your help! How can I post the FB like bottom to each post on the front page and the post page at the same time?

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: