Tip: Add 'Follow' Social Icons to Member Account Modules

[SweetPotato]

Hi All

Here is a little tip that will allow members to display Follow buttons for their other social profiles on their Ning profile page.

It works based on Profile Questions and the answers that members give, so, if you set a profile question to be "Twitter Page" and the answer contains the phrase Twitter.com (which it will have to) then the question and url link are removed and replaced with an icon that links to the member's Twitter page. 

The result looks something like this:

I have written solutions for Twitter, Facebook, LinkedIn, Pinterest and Google+ but you can probably work out how to add others should you so choose.

So, here is what you need to do.

1) Set up your profile questions to ask for members' social accounts. Ensure that each question contains the sitename of each account, eg. For Twitter you might ask "What is your Twitter account?" or simply "Twitter page", but it must contain the word Twitter. Set your answers to Website Address.

Here's how I've set mine up on my test site:

2. Once that is done, then place the relevant code (depending on what questions you've asked) as below in your Custom Code. I've also attached a txt file with this snippets included (image urls often get mangled if too long on Ning forums):

Twitter

<script type="text/javascript">
x$(document).ready(function() {  
    if (x$('.module_about_user dl dd:contains("twitter.com")').length > 0) {
        x$('.module_about_user dt:contains("Twitter")').css('display', 'none');
        x$('.module_about_user dl dd a:contains("twitter.com")').css({'background':'url(http://api.ning.com:80/files/GemyPf3dH93k**eR8dJanK5Y80EZR5yFfumXlE1XO1gLnYy-0sDyngXZ09PIZT2Xd5Ju1vfAzehAA9KgFor7hIXCJX0WxL-Y/Twitter.png) no-repeat','color':'transparent','padding-bottom':'6px','margin-left':'-3px'});
    }
});
</script>

Facebook

<script type="text/javascript">
x$(document).ready(function() {  
    if (x$('.module_about_user dl dd:contains("facebook.com")').length > 0) {
        x$('.module_about_user dt:contains("Facebook")').css('display', 'none');
        x$('.module_about_user dl dd a:contains("facebook.com")').css({'background':'url(http://api.ning.com:80/files/wZwY6fPAXFsKEJHO1jxBpceQs17P1WvHPZFHmI...) no-repeat','color':'transparent','padding-bottom':'6px','margin-left':'-3px'});
    }
});
</script>

LinkedIn

<script type="text/javascript">
x$(document).ready(function() {  
    if (x$('.module_about_user dl dd:contains("Linkedin.com")').length > 0) {
        x$('.module_about_user dt:contains("LinkedIn")').css('display', 'none');
        x$('.module_about_user dl dd a:contains("LinkedIn.com")').css({'background':'url(http://api.ning.com:80/files/berK5G2qOY3mjCQBu9EvZP7*x1qfQhamrLTulpxhXUSubdsSiuPwNuMmVk2xTSskrEoO1ibvFOx8pxS8bBo9MHq7Y*fk3Ohr/LinkedIn.png) no-repeat','color':'transparent','padding-bottom':'6px','margin-left':'-3px'});
    }
});
</script>

Google Plus

<script type="text/javascript">
x$(document).ready(function() {  
    if (x$('.module_about_user dl dd:contains("plus.google.com")').length > 0) {
        x$('.module_about_user dt:contains("Google")').css('display', 'none');
        x$('.module_about_user dl dd a:contains("plus.google.com")').css({'background':'url(http://api.ning.com:80/files/iYhZXwnd4BSnrrfTLorJUL-48Xq3Os-RchyHHC...) no-repeat','color':'transparent','padding-bottom':'6px','margin-left':'-3px'});
    }
});
</script>

Pinterest

<script type="text/javascript">
x$(document).ready(function() {  
    if (x$('.module_about_user dl dd:contains("pinterest.com")').length > 0) {
        x$('.module_about_user dt:contains("Pinterest")').css('display', 'none');
        x$('.module_about_user dl dd a:contains("Pinterest.com")').css({'background':'url(http://api.ning.com:80/files/O2zGJrlzJ5b9MF3BIEvVLM*wXOehSZ-doUM*U0chyzJFSfT0MawqEUxkX00z5GBbIsmsOxYdZbe8rWDZHmQIswAV0Ogs7yZS/pinterest.png) no-repeat','color':'transparent','padding-bottom':'6px','margin-left':'-3px'});
    }
});
</script>

If you think you'll be using all of them and want to refer to an external .js file then upload the attached script to your server and place in your Custom Code, eg.

<script type="text/javascript" src="http://yoururl.com/accounticons.js"></script>

3) One final thing. The spacing on the Profile questions needs to be a bit better - we need to close those line spaces as in my previous tip, so you might want to add this to your advanced css section:

/* MEMBER PROFILE INFO*/
#xg_layout_column_2.xg_2col .module_about_user dl {
    background: #F9F8F8;
    border:solid 1px #F2F1F1;
    clear: both;
    display: block;
    padding: 3px 0px 3px 5px;
margin-bottom:1px;
}

#xg_layout_column_2.xg_2col .module_about_user dt {
    display: inline;
    font-weight: bold;
}

#xg_layout_column_2.xg_2col .module_about_user dl dd {
    display: inline;
    margin-left: 2px;
}

Please note that i have designed these Follow buttons myself but you could easily play around with the code and insert different images if you wanted.

Enjoy

SP

more tips

[Bill]

Yes, you are correct, I just saw that too. SweetPotato, you may wish to update the text attachment, as it looks like the </script> fell off at the end of the Pinterest script. I've added it and it now works.

Thanks Social.Ning.com, appreciate you pointing this out.

[SweetPotato]

oops, my bad

[mobile.ning.com]

Very Good Tip. 

Already implemented using the .txt data

The Icons saves a lot of space and also incentives other members to register their own Social Profiles to get more Fans/Followers

[Seth Regan]

I understand and agree this is a great tool to add and it would probably work out quite well as new members sign up. We presently have over 2200 members on Second Friends (http://www.second-friends.com). How can this work for pre-existing members?

What I mean is, how do I get existing members to get back to the signup area to insert the criteria for their Facebook, Twitter, etc, accounts?

Thanks.

[conner]

I agree and I love this tip Seth!!!  I did finally get the 3 (twitter, facebook and google +) working on my site... but still not totally working right, and I can't figure out whats wrong.   If you log into the site and go to the members pages that have added their twitter and facebook links the social icons are there and working.  However, if you are logged off the site and go to members pages with these links the social icon isn't showing up... all you see is the url links.  I've tried everything suggested from cleaning out cache, cookies, temporary internet files and even checking them on different browsers and it's the same.

I'm leaving them up and using them.... but hate it that they don't show up to visitors.  Hope I get this figured out!... or someone has a tip to help.

[SweetPotato]

other than sending out a broadcast message, you could always try Jen's message members tip here

SP

[Planeta Balada]

Congratulations!
How do I get links to target to a new page (blank)?
Thank you!

[Greg Johnston]

Me too please...:)

[SweetPotato]

add

$('.module_about_user dl dd a').attr('target', '_blank');

to each bit of script.

so Twitter would look like this:

x$(document).ready(function() {  
    if (x$('.module_about_user dl dd:contains("twitter.com")').length > 0) {
        x$('.module_about_user dt:contains("Twitter")').css('display', 'none');
        x$('.module_about_user dl dd a:contains("twitter.com")').css({'background':'url(http://api.ning.com:80/files/GemyPf3dH93k**eR8dJanK5Y80EZR5yFfumXlE1XO1gLnYy-0sDyngXZ09PIZT2Xd5Ju1vfAzehAA9KgFor7hIXCJX0WxL-Y/Twitter.png) no-repeat','color':'transparent','padding-bottom':'6px','margin-left':'-3px'});
$('.module_about_user dl dd a').attr('target', '_blank');
    }
});

SP

[Greg Johnston]

SP it's not working and when I add that bit of script I aslo lose the button. See attached.

[SweetPotato]

if you simply add that line of code then it will.

don't copy the code above because as always this stupid editor has mangled the image url.

make sure you use the code in the attached .tx file with the line

$('.module_about_user dl dd a').attr('target', '_blank');

added as demonstrated above. also, make sure you've opened and closed the script

SP

[Planeta Balada]

I could not.

I tried putting the code in several places in the middle of other code, but could not.