Add Multiple Social Network Icons in Mini Profile

[wildgoosespeeder]

Browser Tested: Internet Explorer 7/8, Firefox 4, Opera 10, Google Chrome, and Safari
Placement: Global Footer

Detailed discription later because this code is rather complicated. What this code will do is allow you to add any social network to mini profiles. Just modify your profile and you will see the options. Five are available right now: Facebook, MySpace, Twitter, YouTube, and Skype. More can be added, just follow the example social networks in red and details on how to add profiles in lime green.

<script language="javascript">
/*
Add Multiple Social Network Icons in Mini Profile By wildgoosespeeder
Based off of the Code "Facebook Icon in Mini Profile" By iAlex
*/
function iSaFa()
{
   if(!iPerTe.value.match(/\s$/))
   {
       iPerTe.value += " ";
   }
   for(i = 0; i < iShortHandAll.length; i++)
   {
       if(document.getElementById('i' + iFaceInp[i] + 'Inp').value != "")
       {
           iPerTe.value += '[' + iShortHandAll[i] + ':' + document.getElementById('i' + iFaceInp[i] + 'Inp').value + ']';
       }
   }
}
if(document.modifyForm)
{
   var iFaceInp = [];
   var iShortHandAll = [];
   var iAim = document.modifyForm.aim.parentNode.parentNode.parentNode;
   var iPerTe = document.modifyForm.personaltext;
   if(document.addEventListener)
   {
       document.modifyForm.addEventListener('submit', iSaFa, false);
   }
   else
   {
       document.modifyForm.attachEvent('onsubmit', iSaFa);
   }
}
var iViewNewTemp = null;
var checkForIM = true;
function addSocialNetwork(iNetwork,iIcon,iShortHand,iURL,iLength,iType)
{
   var iShortHandReg = new RegExp("\\[" + iShortHand + ":(.+?)\\]");
   if(document.modifyForm)
   {
       var iFaceTr = iAim.cloneNode(true);
       iFaceTr.childNodes[0].firstChild.innerHTML = iNetwork + ':';
       iFaceTr.childNodes[1].firstChild.innerHTML = '<input type="text" size="35" maxlength="' + iLength + '" id="i' + iNetwork + 'Inp" />';
       iFaceTr.childNodes[2].firstChild.innerHTML = 'Your ' + iNetwork + ' account.';
       iAim.parentNode.insertBefore(iFaceTr, iAim);
       iFaceInp[iFaceInp.length] = iNetwork;
       iShortHandAll[iShortHandAll.length] = iShortHand;
       if(iPerTe.value.match(iShortHandReg))
       {
           document.getElementById('i' + iNetwork + 'Inp').value = RegExp.$1;
           iPerTe.value = iPerTe.value.replace(iShortHandReg,'');
       }
   }
   if(location.href.match(/action=(display|(user)?recent|viewprofile|calendarview|search2|pmview)/) || location.href.match(/index.cgi$/) && document.title.match(/Preview/) && document.postForm)
   {
       var iTd = document.getElementsByTagName('td');
       var i = iTd.length;
       while(--i)
       {
           if(iTd[i].width == "20%" && iTd[i].vAlign == "top" && iTd[i].className.match(/windowbg(2)?/) && iTd[i].innerHTML.replace(/\s/g,'').match(iShortHandReg))
           {
               var iCentre = iTd[i].getElementsByTagName('center');
               var iFaSpan = document.createElement('a');
               iFaSpan.href = iCentre[iCentre.length-1].innerHTML.replace(/\s/g,'').match(iShortHandReg)[0].replace(iShortHandReg,iURL);
               iFaSpan.innerHTML = '<img src="' + iCentre[iCentre.length-1].innerHTML.replace(/\s/g,'').match(iShortHandReg)[0].replace(iShortHandReg,iIcon) + '" border="0" alt="' + iNetwork + '" title="' + iNetwork + '" />';
               var iBreak = iCentre[iCentre.length-1].getElementsByTagName("br");
               var iMessenger = document.createElement('span');
               if(pb_action == "viewprofile")
               {
                   var iView = iTd[i+1].getElementsByTagName("tr");
                   for(ii = 0; ii < iView.length; ii++)
                   {
                       if(checkForIM && iView[ii].getElementsByTagName("b")[0] && iView[ii].getElementsByTagName("b")[0].innerHTML == "Instant Messengers")
                       {
                           checkForIM = false;
                           break;
                       }
                   }
                   if(checkForIM)
                   {
                       var iIMAdder1 = document.createElement("tr");
                       iIMAdder1.innerHTML = '<td colspan="2"><font size="2"><b>Instant Messengers</b><hr size="1"></font></td>';
                       var iIMAdder2 = document.createElement("tr");
                       iIMAdder2.innerHTML = '<td width="25%"><font size="2">' + iNetwork + ':</font></td><td><font size="2"> <a href="' + iCentre[iCentre.length-1].innerHTML.replace(/\s/g,'').match(iShortHandReg)[0].replace(iShortHandReg,iURL) + '">' + RegExp.$1 + '</a></font></td>';
                       for(ii = 0; ii < iView.length; ii++)
                       {
                           if(iView[ii].getElementsByTagName("b")[0] && iView[ii].getElementsByTagName("b")[0].innerHTML == "Recent Activity")
                           {
                               iView[ii].parentNode.insertBefore(iIMAdder2,iView[ii]);
                               iView[ii].parentNode.insertBefore(iIMAdder1,iView[ii]);
                               break;
                           }
                       }
                       checkForIM = false;
                   }
                   else
                   {
                       for(ii = 0; ii < iView.length; ii++)
                       {
                           if(iView[ii].getElementsByTagName("b")[0] && iView[ii].getElementsByTagName("b")[0].innerHTML == "Instant Messengers")
                           {
                               if(!iViewNewTemp)
                               {
                                   iViewNewTemp = iView[ii+1];
                               }
                               var iViewNew = iViewNewTemp.cloneNode(true);
                               iViewNew.getElementsByTagName("font")[0].innerHTML = iNetwork + ":";
                               iViewNew.getElementsByTagName("a")[0].href = iCentre[iCentre.length-1].innerHTML.replace(/\s/g,'').match(iShortHandReg)[0].replace(iShortHandReg,iURL);
                               iViewNew.getElementsByTagName("a")[0].innerHTML = RegExp.$1;
                               if(iType)
                               {
                                   iViewNew.getElementsByTagName("a")[0].target = '_blank';
                               }
                               iViewNewTemp.parentNode.insertBefore(iViewNew,iViewNewTemp);
                               break;
                           }
                       }
                   }
               }
               if(iType)
               {
                   iFaSpan.target = '_blank';
                   iMessenger.appendChild(iFaSpan);
                   iMessenger.appendChild(document.createTextNode(" "));
                   iBreak[iBreak.length-1].parentNode.insertBefore(iMessenger,iBreak[iBreak.length-1].nextSibling);
               }
               else
               {
                   iMessenger.appendChild(document.createTextNode(" "));
                   iMessenger.appendChild(iFaSpan);
                   iBreak[iBreak.length-1].parentNode.insertBefore(iMessenger,iBreak[iBreak.length-1]);
               }
               iCentre[iCentre.length-1].innerHTML = iCentre[iCentre.length-1].innerHTML.replace(iShortHandReg,'');
           }
       }
   }
}
//addSocialNetwork(Social Network, Icon, Initials, URL and change your account name to $1, Max Character Length When Creating a New User, true for website/false for instant messenger);
addSocialNetwork("Facebook","http://i56.tinypic.com/jkf1bo.png","FB","http://www.facebook.com/profile.php?id=$1",15,true);
addSocialNetwork("MySpace","http://i56.tinypic.com/eun62s.png","MS","http://www.myspace.com/$1",15,true);
addSocialNetwork("Twitter","http://i53.tinypic.com/12360i8.png","TW","http://www.twitter.com/$1",20,true);
addSocialNetwork("YouTube","http://i54.tinypic.com/316sosx.png","YT","http://www.youtube.com/$1",20,true);
addSocialNetwork("Skype","http://mystatus.skype.com/smallicon/$1.png","SKB","skype:$1?chat",32,false);
</script>

//addSocialNetwork(Social Network, Icon, Initials, URL and change your account name to $1, Max Character Length When Creating a New User, true for website/false for instant messenger);
addSocialNetwork("Facebook","http://i56.tinypic.com/jkf1bo.png","FB","http://www.facebook.com/profile.php?id=$1",15,true);
addSocialNetwork("MySpace","http://i56.tinypic.com/eun62s.png","MS","http://www.myspace.com/$1",15,true);
addSocialNetwork("Twitter","http://i53.tinypic.com/12360i8.png","TW","http://www.twitter.com/$1",20,true);
addSocialNetwork("YouTube","http://i54.tinypic.com/316sosx.png","YT","http://www.youtube.com/$1",20,true);
addSocialNetwork("Skype","http://mystatus.skype.com/smallicon/$1.png","SKB","skype:$1?chat",32,false);

[wildgoosespeeder]

Hey Wormo! Can you put these codes to use on your forum to have other members test it?

[Wormopolis]

I can do that. but Im going to put the code into a code box so it stops stretching my page.

[wildgoosespeeder]

I hate ProBoards spacing. My only guess to override it is to use  ?

[Wormopolis]

I dont know.. I never checked to see if pre tags could have CSS applied to them...

but I extracted the colored stuff you were trying to example out after the code box anyways, so its a compromise.

code installed

[wildgoosespeeder]

I forgot to mention and fix, the images are hotlink-protected so it won't show here but only my board. Updated with TinyPic images instead.

[Wormopolis]

I was just about to post something about that too...

[wildgoosespeeder]

Can you make this an announcement (not Cbox) and/or put it in the news fader?

[wildgoosespeeder]

Well I noticed a problem:


Click to enlarge.

...and I coded a fix. Then I noticed another problem, no "Instant Messengers" in between "Member's Bio" and "Recent Activity" just like the previous image:


Click to enlarge.

...and I coded a fix but this fix works for all browsers except Internet Explorer. Internet Explorer keeps giving me an unknown runtime error. I think it is lines 90-91. Any ideas how to fix this? I just updated the code.

[Wormopolis]

does user test on this forum give you the same error? I am not seeing an error in IE.

[wildgoosespeeder]

Dec 24, 2010 0:56:57 GMT -8 Wormopolis said:

does user test on this forum give you the same error? I am not seeing an error in IE.

Well the error occurs when someone only enters one or more of the social networks added by the code. Also make sure you don't have anything entered for the IM clients ProBoards supports (AIM, ICQ, MSN, and YIM) as described in the picture:


Click to enlarge.

[Wormopolis]

ok. let me reproduce that then.

[Dare Jordan]

Hi,
can you take a look and see what is preventing me from changing the values of the networks?
tmproductions.proboards.com/index.cgi

[wildgoosespeeder]

Dec 26, 2010 15:48:27 GMT -8 Dare Jordan said:

Hi,
can you take a look and see what is preventing me from changing the values of the networks?
tmproductions.proboards.com

You mean entering the networks when modifying the profile or actually adding/removing/modifying the code in red?

[Dare Jordan]

won't let me edit profiles.