I don’t really know but that’s 3 years old and Tested up to: WP 3.2.1, BP 1.5.1. What Versions are you using?
Hi @danbp
I tried the way you suggested and it works.
I would like to ask if there is any way the social media icons to follow the privacy rules of the related custom profile fields.
Thank you!
Ok, I finally put out enough fires on other projects to get back to this one…
I installed Font Awesome but I don’t like the icons, I have set that I can upload. I’m guessing I create a folder in my child theme for images and drop them there?
How do I reference my added images in this line of code:
<a href="http://facebook.com/<?php echo xprofile_get_field_data( 'Facebook', bp_displayed_user_id() );?>/" target="_blank" title="Facebook"><i class="icon-facebook"></i>FB</a>
Thanks
Depending the font service you want to use, you have to create a font folder in your child-theme to use it.
In snippet, the CSS code who generate the icon is <i class="icon-facebook"></i>
This code is specific to FontAwesome.
You have to read the documentation of the choosed service to get yours.
If usage is unclear to you, read this tutorial.
Is there any way to make the icons following the privacy rules of the related profile fields?
Ok, I created the font folder in my child theme and changed some of the icons to ones I like better but they still aren’t showing up on the profile.
Here is what is showing up under my name:
twitter.com/SandyFischler/" target="_blank" title="Twitter">Twitter www.facebook.com/sandy.fischler/" target="_blank" title="Facebook">Facebook"
Here is my code in functions.php
function bpfr_socialize_profile () {
echo '<br>'; // don't remove !
if ( $data = bp_get_profile_field_data( 'field=Twitter ' ) ) :
?>
<a href="http://twitter.com/<?php echo xprofile_get_field_data( 'Twitter', bp_displayed_user_id() );?>/" target="_blank" title="Twitter"><i class="fa fa-twitter-square"></i>Twitter</a>
<?php endif;
if ( $data = bp_get_profile_field_data( 'field=Facebook ' ) ) :
?>
<a href="http://facebook.com/<?php echo xprofile_get_field_data( 'Facebook', bp_displayed_user_id() );?>/" target="_blank" title="Facebook"><i class="fa fa-facebook-square"></i>Facebook</a>
<?php
endif;
}
add_filter( 'bp_before_member_header_meta', 'bpfr_socialize_profile' );
Can you try this ?
<i class=” icon-facebook-sign icon-large”>
Also if you want a square around the F, you have to use 2 icons as stacked.
Examples here:
http://fontawesome.info/website-lists-and-examples-using-font-awesome-icon-css/icon-facebook-sign
http://fortawesome.github.io/Font-Awesome/examples/
That partly worked. I have the correct icon now, but it has no link and the code for the link is showing up as text.
I double checked the snippet in twenty thirteen functions and also in bp-custom and it works !
– wp 4.0.1 – bp 2.1.1
– font awesome 4.0.1
– font awesome css files in /twentythirteen/css/
– font files in /twentythirteen/font/
– class names are .icon-twitter and .icon-facebook
function bpfr_socialize_profile () {
echo '<br>'; // don't remove !
if ( $data = bp_get_profile_field_data( 'field=Twitter' ) ) :
?>
<a href="http://twitter.com/<?php echo xprofile_get_field_data( 'Twitter', bp_displayed_user_id() );?>/" target="_blank" title="Twitter"><i class="icon-twitter"></i> Twitter</a>
<?php endif;
if ( $data = bp_get_profile_field_data( 'field=Facebook' ) ) :
?>
<a href="http://facebook.com/<?php echo xprofile_get_field_data( 'Facebook', bp_displayed_user_id() );?>/" target="_blank" title="Facebook"><i class="icon-facebook"></i> Facebook</a>
<?php
endif;
}
add_filter( 'bp_before_member_header_meta', 'bpfr_socialize_profile' );
I have problem like sandyfischler. There is icon near on the profile page, but it is not “clickable” and there is a code “target=”_blank” title=”Facebook”>” next to it.
@amic58 I think the code referenced above doesn’t work with WP 4. I have it partly working now but I still have text links instead of icons that link. Help I’ve gotten elsewhere indicates that xprofile_get_field_data() works differently in the current version of WP. I’ve tested in both my child theme and TwentyFourteen and get the same result, so I’m sure it has something to do with the current version of WP and not the theme.
Anyway, here is where I’m at now with trying to make this work (I have this code in a file called bp-custom.php that sits in my root Plugins folder). I used the code sample I found here:
https://buddypress.org/support/topic/display-users-social-follow-buttons-in-profile/
<?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);
$linkedin_info = xprofile_get_field_data('linkedin', $dmember_id);
$twitter_info = xprofile_get_field_data('twitter', $dmember_id);
echo '<div class="member-social">';
if($fb_info||$google_info||$linkedin_info||$twitter_info){
echo 'My Social: ';
}
if ($fb_info) {
?>
<span class="fb-info"><?php echo $fb_info; ?>" title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/facebook.png" /></span>
<?php
}
?>
<?php
if ($google_info) {
?>
<span class="google-info"><?php echo $google_info; ?>" title="My Googleplus" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/googleplus.png" /></span>
<?php
}
?>
<?php
if ($linkedin_info) {
?>
<span class="linkedin-info"><?php echo $linkedin_info; ?>" title="My LinkedIn" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/linkedin.png" /></span>
<?php
}
?>
<?php
if ($twitter_info) {
?>
<span class="twitter-info"><?php echo $twitter_info; ?>" title="My Twitter" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/twitter.png" /></span>
<?php
}
echo '</div>';
}
add_filter( 'bp_before_member_header_meta', 'member_social_extend' );
?>
I have been adjusting this as new information comes in. One thing that seems wrong to me is putting the social icons in a theme dependent folder. If the point is to have this work with ANY theme, those image files need to live in more static location.
When I figure out more I’ll post here (hopefully later today).
This is my profile page in the current project…
http://stewartvillage.com/members/sandy/
@sandyfischler,
your html is not correct ! The opening href tag is missing…
Use this:
<span class="fb-info"><a href="<?php echo $fb_info; ?>" title="....
And again, my previous snippet is working with WP 4.01/BP 2.1.1 😉
@danbp, nope that doesn’t work. All that does is turns the link nonfunctional, which was why I took it out in the first place. I left the page with your code addition up (Facebook link now doesn’t work).
Since I’m not the only one with this issue, there has to be something more. I had the exact same issue with your snippet – the icons show up but they aren’t links and the text that shouldn’t show up does (and I tried it in two different themes with the same result).
This is a simple fix. Same thing was happening to me. However has nothing to do with the code. This has to do with extended Profile plugin. You got to change the Facebook to a “text box” not a URL box. Worked for me
AHA! @nscycwa that was it! I’m going to name my first plug-in after you.
I’m sure both solutions had the same issue – the field incorrectly set up for URL instead of text.
I’m going to do a separate post for the sake of posterity with both code snippet solutions and some basic instructions.
Best practices questions:
1. If one would like to be able to change themes easily, the ideal is to use the bp-custom.php snippet in the plugins folder, but the images should also live independently of the theme folder, no? Where is the ideal location for those? An “images” folder in “themes”?
2. The actual data that fills out that field in an extended profile can be either a full URL (www.linkedin.com/in/sandyfischler) or it can be just the account and the URL is part of the code (user just inputs sandyfischler). I’m thinking that for my older user base, it would be easier for them to just copy/paste a full URL. Any one have experience one way or another?
