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

[Glenn Lynch]

awesome thanks Sweet potato!!!!

[classic]

can you show me online example 

[Armani Rouse]

for some reason this doesnt work for me, I've tried a few things and its a blank space where the icon would be, now when I hover over this blank space I can see it reading it off my facebook account but theres no icon???

[SweetPotato]

Hi Armani,
You need to use the attachment as mentioned in this reply
http://creators.ning.com/xn/detail/4244211:Comment:1096217
Thanks
SP

[Eric Suesz]

Wow! This sounds pretty awesome. Thanks!

[SweetPotato]

Thanks, Eric.
One thing I noticed when posting is that .JS files no longer run when posted as attachments to discussions, ie the only option is to download and save. I can understand why but it does make posting solutions for all to use (without hosting script on their own servers) a little bit harder.
Cheers
SP

[Amanda Bears]

SP, 

 You are wonderful once again... I am sending a screenshot of my profile of what it looks like. I have members profiles private (you have to be a member to see) content is visible though. Here it is: 

 

[SweetPotato]

glad it's working. thanks amanda

[Amanda Bears]

 This is crazy SP! Suddenly it stopped working? I am not sure what happened either? Now it just shows the links :(

EDIT: SOLVED! Issue was, I had a code conflicting with it. All solved :)

[Troy D. Bertrand]

Hey Amanda,

I edited the code to include the "Website (other)". As you can see from the screen shot I also changed the social icons. Here's the code to include the other websites.

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

Big Shouts to Sweet Potato for doing this. My network has become more polished and it's mostly because of SP. Keep up the good work...well appreciated.

[Abel I. Arenivar]

Me encanto el post, pude hacerlo y agregue también el youtube, Gracias por compartir los conocimientos

[conner]

I can only get the twitter to work on my site.  I would like to get the Facebook also, but I've tried and for some reason the Facebook won't work.   Any thoughts or suggestions on what I may be doing wrong ?

Another thing the twitter is working, but only shows up when logged into site.  If logged out all you see is the twitter link.  This twitter button should show up even when logged off site shouldn't it?

Hope someone has some help here..... thanks!