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

[Sean Herman]

Good idea. I will do that.

[Sean Herman]

Thanks, SP I got worked out with a Ning Staff member and now it's working wonderfully. Time to add these to my site! 

[Hat Academy]

Awesome tip! I do get issues when people paste in there twitter address with https the link fails, have put note next to the question title to try prevent this.

[SweetPotato]

sadly it does rely on people putting the right url in

[Jay Ferrari]

Very nicely done!  I suggested this along with several other product ideas in December of last year. I'm glad that someone was smart enough to come up with a way to accomplish this. 

This is very nice of you to share. see my original post here 

http://creators.ning.com/forum/topics/roadmap-2012

[SweetPotato]

you are welcome Jay

[Alex wood]

H SweetPotato,

Ive just put this code into my site and everything looks good, however in the bottom left i am getting;

Twitter Facebook LinkedIn Google Plus Pinterest written in black along the bottom right above the ning footer, should this be happening and is there any way to make this text transparent?

[SweetPotato]

Hi,
Don't include the word twitter as in black above, it's not needed. It's only in the discussion to show which is which
:-)
SP

[Alex wood]

Thank you, clearly im more tired than i thought!

I just copied it without thinking.

 

Thanks  again

[Patrick Chappelle]

This tip is AWESOME! I don't suppose it's possible to make one for ReverbNation, eh?

[Adina]

thanks for another great tip!

[Damien Hannah]

This is Excellent! Thank you very much. I am using this now on my network. THANK YOU SO MUCH!!!