WordPress links to social icons not linking

Question

I'm attempting to add social follow icons to a BuddyPress site using a section of code that I found here: https://buddypress.org/support/topic/display-users-social-follow-buttons-in-profile/

I followed the suggestion downthread and added the code to a bp-custom.php file in my plugins directory and the icons are showing up where they should but the link to the social profile is showing as text and when I click on the link it returns a 404 page.

I'm sure I have something wrong but I'm just too clueless new to spot it.

<?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"><a href="https://www.facebook.com/<?php echo $fb_info; ?>"  title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/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/family-openstrap-child/images/googleplus.png" /></a></span>
<?php
}
    ?>
    <?php
    if ($linkedin_info) {
    ?>
    <span class="linkedin-info"><a href="https://www.linkedin.com/<?php echo $linkedin_info; ?>" title="My LinkedIn" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/linkedin.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/family-openstrap-child/images/twitter.png" /></a></span>
<?php
}
echo '</div>';
}
add_filter( 'bp_before_member_header_meta', 'member_social_extend' );
?>

Thanks!

Answer 1

Looks like xprofile_get_field_data() creates its own <a> tag, so you don't have to write one out like you've done there. Try this instead:

$fb_info = xprofile_get_field_data(
    '<img src="' . bloginfo('wpurl') . '/wp-content/themes/family-openstrap-child/images/facebook.png" />',
    $dmember_id
);
...
<span class="fb-info"><?php echo $fb_info; ?></span>

Not sure if xprofile_get_field_data() will let you pass HTML in the first parameter there, so if that doesn't work quite right, you could fall back to something simpler (no image) like:

$fb_info = xprofile_get_field_data('Facebook', $dmember_id);