Search

Add Social Media Links to BuddyPress Profiles

    Akshaya Rane
Listen to this article

Social Media IconsSimilar 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.

BuddyPress Add New Profile Fields
[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.

Social Media Icons BuddyPress

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.

Picture of Akshaya Rane

Akshaya Rane

8 Responses

  1. Thank you for this post. Works great on Firefox, however with chrome, the icons are displayed but they aren’t linked. Please help

    1. Hi Ricky,
      There is no reason for the links to disappear. Kindly try basic troubleshooting. For example, are you checking the profile of the same person in both the browsers? Or try replacing the links (in the code) to some static link on your site, and check if that works.

      1. I checked it on a newer version of ios and it work. so I suppose its either the machine or the version of ios that’s outdate, causing it not to work

  2. Hi thank you for the tutorial!

    Does this code work with field visibility setting for profiles? i.e. if the user sets the field to hide from public, etc., does this show the icons only for those set by the user?

    1. Hi Frank,

      The icons will not be hidden by default. You will have to wrap them around a div, with the field-visibility-settings class.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads