How to Add Facebook and Twitter Share Buttons to BuddyPress Profiles

Optimizing your BuddyPress site for sharing on other social networks is a solid strategy for being able to attract new members. It also helps to kick up your SEO with more direct links to your site surfacing on other networks.

This little code snippet utilizes the Topsy otter API for the Twitter link so it loads super fast. It adds a couple of icons to the user’s profile next to his avatar, as seen here. When you click on the Facebook icon, it pops up a window for the user to login and automatically adds a thumbnail and link to the profile. The Twitter button automatically sends the user’s name and link to his profile to text box on Twitter for easy tweeting.

This post was inspired by a tutorial by Bowe Frankema at BP-Tricks, but it uses a slightly different technique. The code for these buttons was taken from a tutorial at WP Splash, and I have modified it here for BuddyPress profiles. I removed the portion that shows how many times it has been shared, because that seems more relevant for posts and less for BP profiles. By following the steps below, you should be able to easily copy and paste to your templates to start showing the share buttons.

Step 1: Open members/single/member-header.php and locate the following lines:

<h2 class="fn"><a href="<?php bp_user_link() ?>"><?php bp_displayed_user_fullname() ?></a> 
<span class="highlight">@<?php bp_displayed_user_username() ?> <span>?</span></span></h2>
<span class="activity"><?php bp_last_activity( bp_displayed_user_id() ) ?></span>

Step 2: Directly under that, paste this code for both the buttons:

Make sure to replace the links to the social networking images with paths to their locations within your BuddyPress child template. Of course you can always further customize this with CSS or add it into a different area of the profile. This is just for starters:

<span class="highlight">Share This Profile: <a onclick='"<?php bp_user_link() ?>&amp;t=<?php bp_displayed_user_fullname() ?>", "facebook", "toolbar=no, width=550, height=550"); return false;' href='<?php bp_user_link() ?>&amp;t=<?php bp_displayed_user_username() ?>'  class='facebookShare'>
<img src="<?php bloginfo('template_url'); ?>/_inc/images/facebook.png"></a>

<a href='<?php echo $retweetNick; ?>&title=<?php bp_displayed_user_fullname() ?>&url=<?php bp_user_link() ?>'><img src="<?php bloginfo('template_url'); ?>/_inc/images/twitter.png"></a></span>

Step 3: Save and Upload the file to your site.

You’re finished! Now you can easily share profiles from your site to the two most important social networks currently in use. Several BuddyPress users have requested a badge feature to be added where the user can embed a BuddyPress profile widget on other websites. This is a fantastic idea and I’ll see if we can work something like this up in the future. In the meantime, adding these buttons is a quick and simple way to start boosting the sharing on your BuddyPress network.

Comments (19)

  1. Sara,

    This is gr8!

    Although I still think that tweetsteam, which you discussed in one of the early blogposts, is simply the best :-) to synchronize a user’s tweets with buddypress activity. I think with BP, people want to do more than just share the links and tweetstream is simply the best.

    And if that wasn’t enough, Peter Hofman, who developed Tweetstream, is working on similar plugin for Facebook!!

    I’ll eagerly wait for you to announce it in this forum! :-)

  2. Sarah,

    I can’t get the icons to show. I’ve created _inc and images folders in my child theme and loaded the images, then done this:

    Share This Profile: <a onclick='"“, “facebook”, “toolbar=no, width=550, height=550″); return false;’ href=’’ class=’facebookShare’>
    <img src="/_inc/images/facebook.png”>
    <a href=''><img src="/_inc/images/twitter.png”>

    What am I doing wrong?

  3. Greg-
    Sorry I should have mentioned about the images … the ones I’m using are 16px squares from: and yes this is where the image url should be replaced: /_inc/images/facebook.png … you need to put the path to your images in there, based on where you have them located in your child theme. Do you get a broken image on there? If so then it’s a problem with the path you’ve given it. Let me know.

  4. Thanks for sharing. Basic question on my side is where is actually..

    ” members/single/member-header.php ”

    Just spent 15 minutes looking and going blind.


  5. Greg,

    You have an apostrophe instead on semi colon by your -4, that could be messing it up?

    Greg, great little CSS snip though, worked for me once I added the class as per Sarah’s suggestion.

    Thanks to both!