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

[SweetPotato]

You're welcome
SP

[Mandy P.]

wow, I can't believe I didn't come across this sooner..been looking for something like this! thanks!

[SweetPotato]

No worries, the title of the discussion is maybe not the most intuitive. :-)
SP