Add Social Media Links to BuddyPress Profiles

Similar to any social networking site, the BuddyPress profile displays information about the user, along with the user’s activity stream. The details particular to the user, that is the name and nice name, are obtained from the user’s profile on the site. These details are displayed in the header of each BuddyPress profile. To display additional details for a user, you can add functions on the ‘bp_before_member_header_meta’ or ‘bp_profile_header_meta’ filter.

As an example, we will display social media profiles’ links (Facebook, Twitter and Google+) of the user, below the user nice-name.

[space]

Adding Fields to User Profiles

If options for these fields are not present for the user profile, you can add input fields for these, using ‘Profile Fields’ option provided by BuddyPress, under ‘User’ menu in the dashboard. The name of the field will be used to retrieve the field value.

[space]

Displaying Links to User’s Social Media Profiles

As mentioned. an ideal place to display the social media links, would be in the profile header. There are two hooks which you can use. The ‘bp_before_member_header_meta’, displays information before the user’s activity stream. And the ‘bp_profile_header_meta’ filter, displays information after a user’s activity stream. You can use either of these to display additional information.

Instead of displaying links as such, we will display icons for links.

function wdm_add_social_icons(){
   // get the user id
   $user_id = $bp->displayed_user->id;
    
   // xprofile_get_field_data, gets value for user profile field.
   $fb_page = xprofile_get_field_data('Facebook Profile', $user_id);
   $twitter_profile = xprofile_get_field_data('Twitter', $user_id);
   $gplus_posts = xprofile_get_field_data('Google+', $user_id);

   echo '<div class="social-icons">';
   if ($fb_page) {
     ?>
     <a href="https://www.facebook.com/<?php echo $fb_page; ?>" title="Facebook Profile" target="_blank">
     <img class="bp-sc-icon" src="<?php echo plugin_dir_url( __FILE__ ); ?>images/facebook.png" /></a>
     <?php
   }
   if ($twitter_profile) {
     ?>
     <a href="https://twitter.com/<?php echo $twitter_profile; ?>" title="Twitter Profile" target="_blank">
     <img class="bp-sc-icon" src="<?php echo plugin_dir_url( __FILE__ ); ?>images/twitter.png" /></a>
     <?php
   }
   if ($gplus_posts) {
     ?>
     <a href="https://profiles.google.com/<?php echo $gplus_profile; ?>" title="Google+ Profile" target="_blank">
     <img class="bp-sc-icon" src="<?php echo plugin_dir_url( __FILE__ ); ?>images/google-plus.png" /></a>
     <?php
   }
   echo '</div>';
}
add_filter( 'bp_profile_header_meta', 'wdm_add_social_icons' );

[space]
The code provided above, should be placed in your custom plugin. You need to add images for icons in images folder of your plugin. If you wanted to place the code in your theme, you will need to replace plugin_dir_url( __FILE__ ), with, get_stylesheet_directory_uri() function, and place the code in functions.php of your theme. You can use the ‘social-icons’ and ‘bp-sc-icon’ classes, to style your link icons.
[space]
Remember, this code does not provide a like or share option, but rather only links to the user’s profile on other social networking sites. Similarly, you can add additional details, based on your requirement.