Display user's social follow buttons in profile

I’m pretty new to buddypress, so point me in the right direction if this request has already been dealt with.

I want the users of my site to be able to list their other social media accounts (twitter, facebook, google+, pinterest…) via a linked icon on their profile pages (preferably near the top by their name). Obviously I would want each user to be able to edit those links the same way they edit the other parts of their profile.

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.

$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.

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.

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.

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.

@jaxdestroyer This looks EXACTLY how I was hoping. I’ll look over the code you sent me tonight, and I’ll let you know if I have any questions. Thanks so much, you just saved me a ton of time figuring this out myself.

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.

The only way I know how to hide it currently is through css. BP will give your sub group a class name based on what you sub group is called. For example, my sub group is About Me. The class name is about-me.

To make sure you are getting the right class name I suggest you use Firefox firebug or chromes built in element inspector. You should also see another class name of bg-widget when using either tool.

To make the css specific for that particular snippet all you need to do in your Themes or BuddyPress child themes style.css

.bp-widget.about-me{
display: none;
}

This will hide the whole sub group when someone is viewing the profile. It makes sure it has both class names before making it no longer display so the user can still see it when editing their profile.

If you want to only get rid of specific rows that contain this information then BP still has you covered. They also make a class based on your input field name. Using Facebook as an example again the class is field_facebook. To be as specific as possible without going too overboard in your Themes or BuddyPress child themes style.css put in

table.profile-fields tr.field_facebook{
display:none;
}

This will only get rid of the one row, however, there is a caveat. If you alternate colors between rows it will still count the hidden field. I suggest that if you are going to use this make sure that the fields are at the bottom of the group so they no longer break flowof alternating colors.

If you want to do multiple fields just seperate them via a comma as shown below

This is a great Tutorial, thumbs up for giving this nice piece of code.
Social Media Button Plugins often stack a lot of scripting in your website. Lots of JavaScript and a other junk you’re not looking for while WordPress + BuddyPress is already pretty heavy because of all features.

This Tutorial is clean and very basic, it does what most people need, just simple links from their BuddyPress profile to the users Social Media pages.

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?

I love this tip I’m getting ready to start using it. I do have one question though how do I make it so that I can change the placement of the icons? Currently they are displayed below the profile image. Any help would be greatly appreciated thanks in advance!

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!

Without knowing the error itself I can only guess. In the example code I gave I open PHP <?php and close PHP ?> , however, if you already have it open it is unnecessary and can error out if you haven’t previously closed it.

As suggested by @noizeburger, if you make the bp-custom.php page in wp-content/plugins (the actual plugins root directory not the buddypress specific directory) and put the code in there it should work and will still work if you end up changing themes later on as long as you put the images in a directory outside of the theme.

I hope this helps.

Viewing 16 replies - 1 through 16 (of 16 total)

The topic ‘Display user's social follow buttons in profile’ is closed to new replies.