BuddyPress.org

I have Actually done this on my own site that I am developing. I at first Used Buddypress Facebook, Buddypress Googleplus and Buddypress Twitter and they work well enough but I wanted to be able to add some other sites as well as use my own icons. So I figured out what they did and updated it for my needs.
Here is what I came up with. The following code will go into your themes functions.php.

<?php
//Social Media Icons based on the profile user info
function member_social_extend(){
		$dmember_id = $bp->displayed_user->id;
		$fb_info = xprofile_get_field_data('facebook', $dmember_id);
		$google_info = xprofile_get_field_data('googleplus', $dmember_id);
		$twitch_info = xprofile_get_field_data('twitch', $dmember_id);
		$twitter_info = xprofile_get_field_data('twitter', $dmember_id);
		echo '<div class="member-social">';
		if($fb_info||$google_info||$twitch_info||$twitter_info){
			echo 'My Social: ';
		}

		if ($fb_info) {
		?>
		<span class="fb-info"><a href="https://www.facebook.com/<?php echo $fb_info; ?>"  title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/facebook.png" /></a></span>
	<?php
	}
		?>
		<?php
		if ($google_info) {
		?>
		<span class="google-info"><a href="https://profiles.google.com/<?php echo $google_info; ?>" title="My Googleplus" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/google-plus.png" /></a></span>
	<?php
	}
		?>
		<?php
		if ($twitch_info) {
		?>
		<span class="twitch-info"><a href="http://www.twitch.tv/<?php echo $twitch_info; ?>" title="My Twitch" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/twitch.png" /></a></span>
	<?php
	}
		?>
		<?php
		if ($twitter_info) {
		?>
		<span class="twitter-info"><a href="https://twitter.com/<?php echo $twitter_info; ?>" title="My Twitter" target="_blank" class="twitter-follow-button""><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/twitter.png" /></a></span>
	<?php
	}
	echo '</div>';
}
add_filter( 'bp_before_member_header_meta', 'member_social_extend' ); ?>

I will explain the code to you so that you can use it for more than just these 4 sites.
First the Variables

$dmember_id = $bp->displayed_user->id;
$fb_info = xprofile_get_field_data('facebook', $dmember_id);

$dmember_id grabs the currently displayed user id.
$fb_info gets the data that was placed the facebook text box I created in extended users profiles.
The same goes for $google_info, $twitch_info, and $twitter_info all you need to do is change 2 simple things.
$your_variablename_here = xprofile_get_field_data('your_textbox_field_name_here', $dmember_id);

That textbox field name can be anything you want it to be as long as it is the same as the extended profile field name. For each different site you will need to do that line.

echo '<div class="member-social">'; All this does is start a div with a class of member-social so you can box all the different icons in one place.

The below code is optional but may be important if you want to prefix the icons with something.

if($fb_info||$google_info||$twitch_info||$twitter_info){
			echo 'My Social: ';
		}

This asks if any of the variables have data in them. If so then prefix the icons with “My Social: ” if not then show nothing. You will need to add your new variables each seperated with the horizontal bars as shown. So that it will show as long as any of them have one field filled in.

if ($fb_info) {
		?>
		<span class="fb-info"><a href="https://www.facebook.com/<?php echo $fb_info; ?>"  title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/facebook.png" /></a></span>
	<?php
	}
		?>

This asks if $fb_info has any data then show the icon.

The Below code can differ based on your preference.
<span class="fb-info"><a href="https://www.facebook.com/<?php echo $fb_info; ?>" title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name/images/facebook.png" /></a></span>
I wrapped each icon in its own span HTML tag. Then create the link.
<a href="https://www.facebook.com/<?php echo $fb_info; ?>" title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name/images/facebook.png" /></a>
In this example I am linking to facebook.com with the $fb_info data. Here is where the preference comes in if you want them to just put their whole social profile link in the profile field then all it needs to look like is
<a href="<?php echo $fb_info; ?>" title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name/images/facebook.png" /></a>
the title=”put_hover_text_here” is what you want to show when hovering over the link the target= “_blank” makes the link open in a new tab.

<img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/facebook.png" />
This is where you placed the image of the icon. Currently this will point to the images folder of your theme and the image name of facebook.png as long as you updated the theme name.

<?php
	}
	echo '</div>';
}
add_filter( 'bp_before_member_header_meta', 'member_social_extend' ); ?>

this closes the if statement and closes the div that I made earlier. Then adds the function to the buddypress profile.

here is an image of the results:

The Twitch icon I made myself but the others are free here http://icondock.com/free/vector-social-media-icons along with many more social sites. I used the 32px images.

If you have any questions or need some extra explanation of this or want to add these social icons to the group header,or even add them to a users authorbox(this will require you to change your themes code) just PM Me or reply. I hope this helps anyone else looking to do something similar Note this will only send people to their respective social media profiles not allow them to follow or friend straight from your site.

Great tutorial, works like a charm. Thank you!

Now, that your code makes it possible to show icons in my profile header, is there a way to hide the profile group that helds my input fields? Main reason is, that my youtube and twitter links won’t show in the fieldgroup as a result of the use of a snippet to use oembed-code in my profiles.

its better to use social button plugin

Edit. nvm lol

Thank You! I would like to add member defined sort order of the social icons. A priority drag and drop sort or sort text field within the member->profile->view tab or member->profile->edit tab. I was wondering where is the best place to start?

Thanks for the tutorial @jaxdestroyer.

I’ve extended it a bit in this gist: https://gist.github.com/pragmatic-web/9352466 to make it quicker and neater to add more profiles.

So now you can create a default icon, then simply change an array of profile field names to loop through each and display the link (if it’s entered) and a custom icon (if there is one).

More explanation on the gist. Hope it’s helpful to someone and thanks again.

Hi all, I like this idea and it seems to work, but after importing the code into my theme functions.php, when I go to “theme options” and try to save, the SAVE button no longer works and gives back an error. Then when I delete to code from functions.php, the theme options save button works again. Very odd. Any ideas? Thanks!