How to Add the Global Facebook Like Button to BuddyPress Profiles and Activity Stream Items

Big news this week is that Facebook has launched its global Like button feature. This is an excellent way to increase the exposure of your BuddyPress site and activity within your community.

Nobody can deny the power of Facebook and if Facebook users see this liked item on Facebook, they are more likely to click through to check out your site simply because of their relationship with that person. This is a great way to boost your traffic if your BuddyPress users are also strong Facebook users.

My post was inspired by this one over at Geekosystem.com about how to add the Like button to WordPress posts and pages. Check it out if you want to know how to do that. This post will focus on using it with BuddyPress.

This is what the Like Button does:

The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.

Facebook’s developer docs outline the basics of how to use the button on other websites. So, let’s have some fun putting it to use with BuddyPress:

How to Add the Facebook Like Button to the BuddyPress Activity Stream

The default Like button code is set up to add the button to static pages, so we’re going to add a parameter to it to make our URL dynamic, the way BuddyPress handles activity items. You’ll be adding this to the href= part of the code:

<?php bp_activity_thread_permalink() ?>

So this is what you’ll paste into your child theme’s activity/entry.php file:

<iframe style="border: none; overflow: hidden; width: 450px; height: px;" src="https://www.facebook.com/plugins/like.php?href=<?php bp_activity_thread_permalink() ?>&layout=standard&show-faces=true&width=450&action=like&font=arial&colorscheme=light" width="320" height="240" frameborder="0" scrolling="no"></iframe>

Add it anywhere you want. I think the place it makes the most sense is next to the favorite button inside the activity-meta div, but you can put it wherever you think it looks best. You will also need to add some style to make it sit right with your custom theme. Here’s a screenshot of how it looks in the activity stream after some styling:

Then if you click on the like button, it will show up on a Facebook wall like so:

The link will point back to the permalink of that particular activity item. The great thing about this is that users who are logged into Facebook will be able to see others of their friends who also liked the item, along with their avatars:

How to Add the Facebook Like Button to BuddyPress Profiles

Open your members/single/member-header.php file and add the following:

<iframe style="border: none; overflow: hidden; width: 450px; height: px;" src="https://www.facebook.com/plugins/like.php?href=<?php bp_user_link() ?>&layout=standard&show-faces=true&width=450&action=like&font=arial&colorscheme=light" width="320" height="240" frameborder="0" scrolling="no"></iframe>

I would add it in the #item-header-content div, depending on how much prominence you want to give it. That’s just a recommendation, of course; you can place it wherever you want. It will look something like this:

A Few Extra Notes:

If you want to change the button to say “Recommend” instead, you can do that. Just check out the dev docs on Facebook. Also, there are a few more style options to the button, as well as the choice to include faces or not. The basic Like button is available via a simple iframe you can drop into your page easily. A fuller-featured Like button is available via the XFBML tag and requires you use the JavaScript SDK. The XFBML version allows users to add a comment to their Like as it is posted back to Facebook.

This tutorial is based on the Facebook developer documentation for adding the Like button. If you know of a better way to do this, please leave a note in the comments.

Tags:

• Facebook