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.
8 Responses
Thank you for this post. Works great on Firefox, however with chrome, the icons are displayed but they aren’t linked. Please help
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.
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
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?
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.
I tried using your code but it’s not showing on my website right. It’s showing up as this when I inspect the element:
<a href="http://www.facebook.com
” title=”Facebook Profile” target=”_blank”>
<a href="http://www.twitter.com
” title=”Twitter Profile” target=”_blank”>
<a href="http://www.google.com
” title=”Google+ Profile” target=”_blank”>
Sorry, I forgot to make it show as a code in the previous comment:
<a href="www.facebook.com
" title="Facebook Profile" target="_blank">
<a href="www.twitter.com
" title="Twitter Profile" target="_blank">
<a href="www.google.com
" title="Google+ Profile" target="_blank">
Sorry here it is:
<a href="http://www.facebook.com
” title=”Facebook Profile” target=”_blank”>
<a href="http://www.twitter.com
” title=”Twitter Profile” target=”_blank”>
<a href="http://www.google.com
” title=”Google+ Profile” target=”_blank”>