Skip to:
Content
Pages
Categories
Search
Top
Bottom

Display user's social follow buttons in profile

  • Avatar of cyndimarie
    cyndimarie
    Participant

    @cyndimarie

    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.

    Is there a plugin that accomplishes this?

    wordpress 3.6.1
    buddypress 1.8.1

Viewing 16 replies - 1 through 16 (of 16 total)
  • Avatar of jaxdestroyer
    jaxdestroyer
    Participant

    @jaxdestroyer

    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:
    social 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.

    Avatar of cyndimarie
    cyndimarie
    Participant

    @cyndimarie

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

    Avatar of noizeburger
    noizeburger
    Participant

    @noizeburger

    Great tutorial, works like a charm. Thank you!

    Avatar of noizeburger
    noizeburger
    Participant

    @noizeburger

    Btw: I put this code in my bp-custom.php (leaving the opening <?php and the closing ?> away) and choose a path for the pictures in my rootpath. So I can use it with another theme too.

    Avatar of noizeburger
    noizeburger
    Participant

    @noizeburger

    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.

    Avatar of jaxdestroyer
    jaxdestroyer
    Participant

    @jaxdestroyer

    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

    table.profile-fields tr.field_facebook,
    table.profile-fields tr.field_twiitter{
       display:none;
    }
    Avatar of samm8158
    samm8158
    Participant

    @samm8158

    its better to use social button plugin

    Avatar of Thunderpeel
    Thunderpeel
    Participant

    @thunderpeel

    Do you have a link for this plugin?

    Avatar of Thunderpeel
    Thunderpeel
    Participant

    @thunderpeel

    Edit. nvm lol

    Avatar of Shmoo
    Shmoo
    Participant

    @macpresss

    its better to use social button plugin

    No it’s not..

    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.

    Avatar of dimensions23
    dimensions23
    Participant

    @dimensions23

    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?

    Avatar of scenikc
    scenikc
    Participant

    @scenikc

    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!

    Avatar of divydovy
    divydovy
    Participant

    @divydovy

    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.

    Avatar of IM Academy
    IM Academy
    Participant

    @im-academy

    I have tried to add this to my website and used the shared code from here:

    https://gist.github.com/pragmatic-web/9352466

    My problem is that it only recognizes the default image I upload, not the social specific ones.

    Anyone having any ideas on why that is?

    Avatar of Joe
    Joe
    Participant

    @josephfrio13yahoocom

    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!

    Avatar of jaxdestroyer
    jaxdestroyer
    Participant

    @jaxdestroyer

    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)

You must be logged in to reply to this topic.