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

[Alex 小正正]

WOW! I like this. Simple button better then URL.

[SweetPotato]

you're welcome

[John Valentine]

It's a fantastic addition to my site.

 

[soaringeagle]

awesome tip but works better without the css on mine

[SweetPotato]

cool. yes, the css won't be for everyone. depends on your network I guess
sp

[Greg Johnston]

Is it possible that when the Twitter or linkedin button is clicked it goes to a new page?

[SweetPotato]

I'll investigate and come back to you

[Nederlander]

Fabulous work SP - thank you for this!!!

Could you give an example of a script where the a string of text ("follow me on Twitter") is linked, not an image-button?

[Bill]

Hi SweetPotato, this is great. I'm trying to implement on my site, and all the buttons appear except for Pinterest. Any ideas? Below is a screenshot.

[SweetPotato]

Did you use the script in the txt attachment?

[Bill]

Yes, I used script in the txt attachment

[mobile.ning.com]

You may be missing the </script> in the case of Pinterest.