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:

1
2
3
<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:

1
2
3
4
<span class="highlight">Share This Profile: <a onclick='window.open("http://www.facebook.com/sharer.php?u=<?php bp_user_link() ?>&amp;t=<?php bp_displayed_user_fullname() ?>", "facebook", "toolbar=no, width=550, height=550"); return false;' href='http://www.facebook.com/sharer.php?u=<?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='http://button.topsy.com/retweet?nick=<?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.