March 17, 2010 
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='window.open("http://www.facebook.com/sharer.php?u=<?php bp_user_link() ?>&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() ?>&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.
This is great. Can you also provide the images to use for these buttons?
Sarah,
Is this the part to replace with the image url?
/_inc/images/facebook.png”
Also…if we need to find our own button images, what size should they be?
Sara,
This is gr8!
Although I still think that tweetsteam, which you discussed in one of the early blogposts http://wpmu.org/?s=tweetstream, 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!!
http://buddypress.org/forums/topic/facestream-facebook-plugin
I’ll eagerly wait for you to announce it in this forum! :-)
For share, bookmark, email, there’s always “AddtoAny” plugin….http://wordpress.org/extend/plugins/add-to-any/,
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='window.open("http://www.facebook.com/sharer.php?u=&t=“, “facebook”, “toolbar=no, width=550, height=550″); return false;’ href=’http://www.facebook.com/sharer.php?u=&t=’ class=’facebookShare’>
<img src="/_inc/images/facebook.png”>
<a href='http://button.topsy.com/retweet?nick=&title=&url='><img src="/_inc/images/twitter.png”>
What am I doing wrong?
Greg-
Sorry I should have mentioned about the images … the ones I’m using are 16px squares from: http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/ 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.
Great! I’ve written a tutorial for this a while back on BP-Tricks.com, but since this one is better and BP-Tricks is still down for a few days, this is good info :)
Ow wait you’ve already mentioned me.. you never miss anything Sarah.. lol :)
I’m glad you found my article useful. Thanks for linking to it.
Thanks Sarah…I got it working. The icons aren’t centered though…they are are the top.
Also, any thoughts on what it would take to add a LinkedIn share?
this is great!
also, is there a way you could share activity updates from your bp site to facebook or twitter the same way.what code could you use for that??
http://wordpress.org/extend/plugins/add-to-any/
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.
Thanks
Arezki
Sarah,
How can I adjust the padding for my icons? for some reason they are floating to the top of the highlighted box…
-Greg
Greg – You will need to adjust them with CSS – maybe try adding this to the image tag: style=”padding-left: 5px; padding-right: 5px; margin-bottom: -4px;”
I don’t have an image tag in my css….just an img.avatar
Is there a way to reference just these images?
img.facebookshare {
padding-left: 5px;
padding-right: 5px;
margin-bottom: -4px’
}
Sure just add the class to your image tags … c/images/facebook.png” class=”facebookshare”> and add the modifications to your CSS.
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!
James.