CMSTemplateZ
08-25-2010, 10:00 PM
https://vborg.vbsupport.ru/external/2010/08/13.png
Add-on Name: Open Inviter (vBulletin 4x implementation)
Add-on Demo: Click Here (http://battlefield3forums.com/invite/) (Please Test & Invite your contacts to view my site in return for me sharing this guide)
Add-on Description: Basically this is your All-in-One email client / social networking contact inviter. Using this script on your website will enhance your traffic & sign up's, ive used other scripts like "Open Inviter" in the past and this is by far the most "User Friendly" version i have come across and best of all it's Free!! openinviter.com does have a vBulletin package for this however it does not work as it's not been updated / their package updates / general support is well very slack to say the least.
Let's get this baby installed:
What you will need: (to implement this the way i have on Battlefield 3 (http://battlefield3forums.com))
- Open Inviter (http://openinviter.com/download.php) (General Package, not the vBulletin version as it DOES NOT WORK) [NOTE: you need to register an account / domain to be used with them 110% Free, no email confirmation required ;) ]
Install open inviter to this path EXAMPLE.COM/OpenInviter/ <--- notice the caps !!, the folder in the download is already like this, just be sure to upload the folder to your domain root.
- vBulletin 4 Tab Mod (https://vborg.vbsupport.ru/showthread.php?t=233629&highlight=vbSoporte) (or you can make your own tabs using this guide: HERE (https://vborg.vbsupport.ru/showthread.php?t=226914))
Now Install the above requirements, you can find the OpenInviter installation guide within the download package, it's very simple to install.
STEP: #1
Add the below code to the END of your "HEADERINCLUDE" template. (this is a dynamic iframe script, this enables clean iframes for scripts like this that have several pages / steps within the process in which may use different sized pages.)
<script type="text/javascript">
/***********************************************
* IFrame SSI script II- ? Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"
var getFFVersion=navigator.userAgent.substring(navigat or.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextr aHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>
STEP: #2
Create a New "TEMPLATE" with your Style or Master Style we are going to call this Template "inviter" <--- NO CAPS !!
HERE IS THE CODE FOR THE TEMPLATE: (be sure to change EXAMPLE.COM to your domain)
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
<title>{vb:raw vboptions.bbtitle} - {vb:raw pagetitle}</title>
{vb:raw headinclude}
{vb:raw headinclude_bottom}
</head>
<body>
{vb:raw header}
{vb:raw navbar}
<div id="pagetitle">
<h1>{vb:raw pagetitle}</h1>
</div>
<h2 class="blockhead">Contact Inviter</h2>
<div class="blockbody">
<div class="blockrow"><p><center><b>Invite your contacts using our new Contact Invite</b> PLEASE NOTE!! We do not see or store your username or password</center></p><br>
<center><img src="http://i36.tinypic.com/9i9zwl.png"/></center><br>
<iframe id="myframe" src="http://EXAMPLE.COM/OpenInviter/invite.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:98%; display:none"></iframe>
</div>
</div>
{vb:raw footer}
</body>
</html>
STEP: #3
Download the attachment: "invite.php" you need to upload this to the OpenInviter Folder: EXAMPLE.COM/OpenInviter/ This is a modified version of the original / main OpenInviter trigger file (just a better layout then the default one).
STEP: #4
Download the attachment: "inviter.php" <-- INVITER.PHP not INVITE.PHP..... Upload this to your Domain Root Directory: EXAMPLE.COM
Now you should be able to visit: EXAMPLE.COM/invite.php and have a fully working version of OpenInviter within a vBulletin 4 page.
STEP: #5
All that is left to do now is simply create a new tab in your vbulletin installation (you don't have to, but the more people who see the tab the more people who will use this feature). You can use the vBulletin 4 tab mod posted above to create a new tab.
This tab should point to EXAMPLE.COM/inviter.php
NOTE: Replace EXAMPLE.COM with your own domain.
TEXT COLOR WITH THE IFRAME:
To change the text color:
Open "INVITE.php" you will see the following script at the very top of the page:
<style type="text/css">body {color: #ffffff;
}</style>
Change #FFF to the color you needs
I am awaiting confirmation from OpenInviter.com to package this as a .XML install, this will be updated shorlty once i hear back from them.
ENJOY (don't forget to say thanks, and mark as installed for support).
Add-on Name: Open Inviter (vBulletin 4x implementation)
Add-on Demo: Click Here (http://battlefield3forums.com/invite/) (Please Test & Invite your contacts to view my site in return for me sharing this guide)
Add-on Description: Basically this is your All-in-One email client / social networking contact inviter. Using this script on your website will enhance your traffic & sign up's, ive used other scripts like "Open Inviter" in the past and this is by far the most "User Friendly" version i have come across and best of all it's Free!! openinviter.com does have a vBulletin package for this however it does not work as it's not been updated / their package updates / general support is well very slack to say the least.
Let's get this baby installed:
What you will need: (to implement this the way i have on Battlefield 3 (http://battlefield3forums.com))
- Open Inviter (http://openinviter.com/download.php) (General Package, not the vBulletin version as it DOES NOT WORK) [NOTE: you need to register an account / domain to be used with them 110% Free, no email confirmation required ;) ]
Install open inviter to this path EXAMPLE.COM/OpenInviter/ <--- notice the caps !!, the folder in the download is already like this, just be sure to upload the folder to your domain root.
- vBulletin 4 Tab Mod (https://vborg.vbsupport.ru/showthread.php?t=233629&highlight=vbSoporte) (or you can make your own tabs using this guide: HERE (https://vborg.vbsupport.ru/showthread.php?t=226914))
Now Install the above requirements, you can find the OpenInviter installation guide within the download package, it's very simple to install.
STEP: #1
Add the below code to the END of your "HEADERINCLUDE" template. (this is a dynamic iframe script, this enables clean iframes for scripts like this that have several pages / steps within the process in which may use different sized pages.)
<script type="text/javascript">
/***********************************************
* IFrame SSI script II- ? Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"
var getFFVersion=navigator.userAgent.substring(navigat or.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextr aHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>
STEP: #2
Create a New "TEMPLATE" with your Style or Master Style we are going to call this Template "inviter" <--- NO CAPS !!
HERE IS THE CODE FOR THE TEMPLATE: (be sure to change EXAMPLE.COM to your domain)
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
<title>{vb:raw vboptions.bbtitle} - {vb:raw pagetitle}</title>
{vb:raw headinclude}
{vb:raw headinclude_bottom}
</head>
<body>
{vb:raw header}
{vb:raw navbar}
<div id="pagetitle">
<h1>{vb:raw pagetitle}</h1>
</div>
<h2 class="blockhead">Contact Inviter</h2>
<div class="blockbody">
<div class="blockrow"><p><center><b>Invite your contacts using our new Contact Invite</b> PLEASE NOTE!! We do not see or store your username or password</center></p><br>
<center><img src="http://i36.tinypic.com/9i9zwl.png"/></center><br>
<iframe id="myframe" src="http://EXAMPLE.COM/OpenInviter/invite.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:98%; display:none"></iframe>
</div>
</div>
{vb:raw footer}
</body>
</html>
STEP: #3
Download the attachment: "invite.php" you need to upload this to the OpenInviter Folder: EXAMPLE.COM/OpenInviter/ This is a modified version of the original / main OpenInviter trigger file (just a better layout then the default one).
STEP: #4
Download the attachment: "inviter.php" <-- INVITER.PHP not INVITE.PHP..... Upload this to your Domain Root Directory: EXAMPLE.COM
Now you should be able to visit: EXAMPLE.COM/invite.php and have a fully working version of OpenInviter within a vBulletin 4 page.
STEP: #5
All that is left to do now is simply create a new tab in your vbulletin installation (you don't have to, but the more people who see the tab the more people who will use this feature). You can use the vBulletin 4 tab mod posted above to create a new tab.
This tab should point to EXAMPLE.COM/inviter.php
NOTE: Replace EXAMPLE.COM with your own domain.
TEXT COLOR WITH THE IFRAME:
To change the text color:
Open "INVITE.php" you will see the following script at the very top of the page:
<style type="text/css">body {color: #ffffff;
}</style>
Change #FFF to the color you needs
I am awaiting confirmation from OpenInviter.com to package this as a .XML install, this will be updated shorlty once i hear back from them.
ENJOY (don't forget to say thanks, and mark as installed for support).