WordPress links to social icons not linking - php

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"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/facebook.png" /></span>
<?php
}
?>
<?php
if ($google_info) {
?>
<span class="google-info"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/googleplus.png" /></span>
<?php
}
?>
<?php
if ($linkedin_info) {
?>
<span class="linkedin-info"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/linkedin.png" /></span>
<?php
}
?>
<?php
if ($twitter_info) {
?>
<span class="twitter-info"><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' );
?>
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);