how to display social networks to buddypress member profile

[Norman]

I like to display social media links of my buddypress members in the buddypress profile page of each member next to the avatar. Facebook, twitter, tumblr, ameblo (would be enough)

User should enter the full URL during the registration process as custom fields for each social network,
than it should appear next to his headshot.

Looking for a solution that works with child theme.

[sharmstr]

https://archived.seventhqueen.com/forums/topic/social-media-added-to-profile

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Somehow the sweetdate topic showed up when I searched kleo. In any case, its going to be similar. The main difference being the the file you need to copy to your child theme is

kleo\members\single\member-header.php

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[giannisff]

If you want something like the photo…
i put a piece of code to member-header.php (wp-content/themes/kleo-child/buddypress/members/single/…)
about line 55

`<?php if ( $data = bp_get_profile_field_data( ‘field=***name’ ) ) : ?>
<a href=”<?php bp_profile_field_data(‘field=***name’);?>” target=”_blank”> <img src=”http://yoursite.com/wp-content/images/icons/***nameimage.png&#8221; alt=”***name”></a>
<?php endif; ?>`

***name = your custom field name
***nameimage+the name of icon

This way works for me, fine.

Attachments:

You must be logged in to view attached files.

[webmaster-sw]

Hi there @giannisff

I modded your code to use usernames instead of full html URLs and to use the existing CSS from the top menu, but I don’t know enough about php to get the syntax correct. Can you comment with the correct syntax?

<?php if ( $data = bp_get_profile_field_data( ‘field=facebook’ ) ) : ?>
” target=”_blank”>
<i class=”icon-facebook”>
<?php endif; ?>

[webmaster-sw]

Let’s try that again:

COPY CODE

<?php if ( $data = bp_get_profile_field_data( ‘field=facebook’ ) ) : ?>
			<a href=”http://facebook.com/<?php bp_profile_field_data(‘field=facebook’);?>” target=”_blank”>
			<i class="icon-facebook"> </a>
		<?php endif; ?>

[sharmstr]

You have fancy single quotes (the ones that lean left or right) instead of regular single quotes. Try fixing those. If you still receive an error please tell us what the error says.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[webmaster-sw]

As an added bonus, I’ve also hidden the entire text link area on profiles using

COPY CODE

.bp-widget.name-of-the-profile-group {
    display: none;
}

@sharmstr I haven’t been able to get any of the child theme php files to be read, so I’ve had to deprioritize the task for now. When I complete work on that, then I will update this thread with my results.

[webmaster-sw]

@sharmstr I have begun working on integrating the social icons onto member profiles.

I have coded the member-header.php file appropriately.

Are you able to list the specific procedures required to replace the existing member-header.php file using the child theme? Simply copying member-header.php into the /kleo-child directory has no effect, nor into kleo-child/buddypress/members/single/

[sharmstr]

In order for files to work in the child theme, you need two things

1 – The child theme must be enabled

2 – You must have the same directory structure. So /kleo-child/buddypress/members/single/member-header.php is correct in this case.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[webmaster-sw]

@sharmstr Thank you sir, I will give that a shot.

Okay, I have confirmed that the code posted by @giannisff does not work, and not just because of the quotation marks.

The issue is that the <?php bp_profile_field_data(‘field=***name’);?> appears to already carry with it the a href attribute, meaning that typing a href=”<?php bp_profile_field_data(‘field=***name’);?>” target=”_blank” gives you a fully functioning link ( a link to path/a href), plus a target=”_blank” text string at the end. And then of course the img or icon tag are not at all tied to the link.

For example, it is necessary to remove the a href and /a sections of the code, as below, to eliminate the text strings:

COPY CODE

<?php if ( $data = bp_get_profile_field_data( 'field=facebook' ) ) : ?>
			<?php bp_profile_field_data('field=facebook');?><img src="your-image.png">
		<?php endif; ?>

This gives me a fully functioning link sitting beside the icon. Unfortunately based on my limited familiarity with php, I have no idea how to style the link or apply any sort of target attribute.

[sharmstr]

I’m not a man. 🙂

bp_profile_field_data returns it with a link
bp_get_profile_field_data does not

Try the original code but use gp_get_profile_field_data the the link instead.

I havent tried any of this code. Just a guess from experience.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[webmaster-sw]

Here’s the HTML generated by the original php provided by giannisff

COPY CODE

<a rel="nofollow" sitename"="" www.facebook.com="" http:="" href="<a href=">www.facebook.com/username</a>
" target="_blank">
<img alt="***name" src="http://yoursite.com/wp-content/images/icons/***nameimage.png">

and here’s the result posted by the html:

http://www.facebook.com/username ” target=”_blank”>

The first string is linked to “a href” and the second is pure text.

[sharmstr]

Actually, are you having users just input their facebook name or the entire URL? For his code to work, I think it should only be the name and not the full link to facebook. Make sense?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[webmaster-sw]

@sharmstr Your response was half-way to the solution.

Similar to having the users only enter their facebook name, the original @giannisff code only works if the Field Type is set to Text Box, NOT to URL.

This is the key component that was missing from this thread.

[sharmstr]

Yeah, I made the assumption that you would know I meant a text field when I asked since a url field wouldn’t make sense. Sorry for not being clear. So, you’re all set now?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[webmaster-sw]

@sharmstr – New development

Setting the field to URL automatically adds http:// to all links
Setting the field to Text does not
But the links don’t work without http://,
So users must be notified to add http:// to the beginning of all links

[sharmstr]

edit: arrg

Let me do it. Hold on.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[webmaster-sw]

Here is my final code, inserted on line 23.
The field=name is the name of the Profile Field, and can be customized. The icon name cannot.

COPY CODE

<?php if ( $data = bp_get_profile_field_data( 'field=facebook' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=facebook');?>" target="_blank">
			<i class="icon-facebook"></i></a>
		<?php endif; ?>
		<?php if ( $data = bp_get_profile_field_data( 'field=twitter' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=twitter');?>" target="_blank">
			<i class="icon-twitter"></i></a>
		<?php endif; ?>
		<?php if ( $data = bp_get_profile_field_data( 'field=instagram' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=instagram');?>" target="_blank">
			<i class="icon-instagramm"></i></a>
		<?php endif; ?>
		<?php if ( $data = bp_get_profile_field_data( 'field=tumblr' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=tumblr');?>" target="_blank">
			<i class="icon-tumblr"></i></a>
		<?php endif; ?>
		<?php if ( $data = bp_get_profile_field_data( 'field=youtube' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=youtube');?>" target="_blank">
			<i class="icon-youtube"></i></a>
		<?php endif; ?>
		<?php if ( $data = bp_get_profile_field_data( 'field=flickr' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=flickr');?>" target="_blank">
			<i class="icon-flickr"></i></a>
		<?php endif; ?>
		<?php if ( $data = bp_get_profile_field_data( 'field=pinterest' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=pinterest');?>" target="_blank">
			<i class="icon-pinterest-circled"></i></a>
		<?php endif; ?>
		<?php if ( $data = bp_get_profile_field_data( 'field=vimeo' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=vimeo');?>" target="_blank">
			<i class="icon-vimeo"></i></a>
		<?php endif; ?>
		<?php if ( $data = bp_get_profile_field_data( 'field=googleplus' ) ) : ?>
			<a href="<?php bp_profile_field_data('field=googleplus');?>" target="_blank">
			<i class="icon-gplus"></i></a>
		<?php endif; ?>

[sharmstr]

Sorry it took so long to get back to you. Glad you figured out a solution. I went a different route and decided to hook into the ‘bp_profile_header_meta’ action that allows you to inject information into the members header without using a child copy of members_header.php. That way you dont have to worry about making sure that the file has updated kleo changes. Also, instead of verbosely coding every link, I created an array of social links, then loop through them.

For anyone wanted to do it my way, just pop the attached code into your childs function.php file and add/remove the names of the social sites in the array. In order for it to work properly, the text field name and icon name must be the same.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[marceltj]

@sharmstr
Thank you so much for everyone’s effort on this!
I pasted the code into my function file and only see “” target=”_blank”> ” target=”_blank”>” under the profile picture.

Any ideas?

[marceltj]

Also, this is without any links in the custom fields. So really nothing should show I would think.

[sharmstr]

double check it. Make sure it didn’t paste with fancy quotes… one that slant left and right. You an see here that it works as expected.

http://dev.sharmstr.com/members/sharmstr/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[marceltj]

`function social_links_in_header () {
$social_links = array(‘facebook’,’twitter’,’linkedin’);
foreach( $social_links as $link ) {
if ( $data = bp_get_profile_field_data( array(‘user_id’=>bp_displayed_user_id(), ‘field’=>$link )) ) : ?>
<a href=”<?php echo bp_get_profile_field_data( array(‘user_id’=>bp_displayed_user_id(), ‘field’=>$link)); ?>” target=”_blank”><i class=”icon-<?php echo $link; ?>”></i></a>
<?php endif;
}

}

[marceltj]

COPY CODE

function social_links_in_header () {
	$social_links = array('facebook','twitter','linkedin');
	foreach( $social_links as $link ) {
		if ( $data = bp_get_profile_field_data( array('user_id'=>bp_displayed_user_id(), 'field'=>$link )) ) : ?>
			<a href="<?php echo bp_get_profile_field_data( array('user_id'=>bp_displayed_user_id(), 'field'=>$link)); ?>" target="_blank"><i class="icon-<?php echo $link; ?>"></i></a>
		<?php endif;
	}
	
}

[marceltj]

The below is how it shows.

Attachments:

You must be logged in to view attached files.

[marceltj]

Got it working. Thought the field was supposed to be set as URL not Text but vice versa fixed it

[webmaster-sw]

@sharmstr The Buddypress cover photo knocks out the social icons on Buddypress profiles, and I haven’t been able to solve it using z-index

I am still using my original verbose code.

Let me know if you have the same problem.

[webmaster-sw]

@sharmstr I can confirm that it’s the “profile-cover-inner” class that interferes will all links in the buddypress profile meta.

[sharmstr]

@webmaster-sw I can confirm that its not an issue on my sites. No problems here.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[Kieran]

Just spotted this thread, tried the code, and works great with the new header.

Thanks for your hard work as ever 🙂

[Kieran]

Some quick feedback;

I noticed this does not respect the privacy set on the field by the user. As in a friends only privacy setting for that field will still allow the icon/link to be shown in the header to a non-friend.

Not a big issue for me, but something others might want to think about before using.

[nusolutions]

I see the text file left by sharmstr but don’t follow the steps. Can someone post them for me?

1. Create custom profile field(s)?
2. Paste into child theme ???
3.

tia

[sharmstr]

Create the fields: Wp Admin > Users > Profile Fields
Paste into child theme: Paste the code into your child theme functions.php file.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[webmaster-sw]

@webmaster-sw I can confirm that its not an issue on my sites. No problems here.

@Sharmstr my icons were displaying, but the links were not working, and z-index could not put the links in front of the “profile-cover-inner” class.

I looked through the css for the other displayed fields and found out that they all had a position: relative property. Adding the position: relative property caused the social icons z-index to be respected with the new cover photo.

I’m still using my original code because I don’t want user fields labeled “instagramm” or “pinterest-circled”, which are the icon names.

[joy]

I’ve been successful with part of this code. But for some reason only 4 of my icons show even though the URL’s are complete. Does anyone have any idea what I’m doing wrong here? This is the code I’m using:

COPY CODE

add_action('bp_profile_header_meta','social_links_in_header');

function social_links_in_header () {
	$social_links = array('facebook','twitter','google+','instagram','linkedin','youtube','pinterest');
	foreach( $social_links as $link ) {
		if ( $data = bp_get_profile_field_data( array('user_id'=>bp_displayed_user_id(), 'field'=>$link )) ) : ?>
			<a href="<?php echo bp_get_profile_field_data( array('user_id'=>bp_displayed_user_id(), 'field'=>$link)); ?>" target="_blank"><i class="icon-<?php echo $link; ?>"></i></a>
		<?php endif;
	}
	
}

The only icons that appear are Facebook, Twitter, Linkedin, and YouTube.

Thanks in advance for any help.

[sharmstr]

The problem is that the pinterest icons are called pinterest-circled or pinterest-squared. And the google+ one is called gplus. Your field names will never match the icon names.

I wrote this change off the top of my head. Havent tested it. Give it a go.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[joy]

Perfect! Thank you so much for your help with that.

[sharmstr]

No problem.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[tonyw]

Yes this code works perfectly: https://archived.seventhqueen.com/wp-content/uploads/2015/05/social-icons.txt
Just need to name the xprofile links as LinkedIn, Facebook, etc and ensure that you’re using text fields not URL

[Author]

Posts