Shoutbox (Build B)

Build B shoutbox is out! With alot more featers!

Features on Build B
-Only on the Index
-Allow guests to view or not view shouts.(Guests can't shout) (Firefix Shoutbox Only)
-Either Allow all members to view the Info section, or just certain Members
-Hide The Board for the Shoutbox topic.
-Add the shoutbox to the bottom or top of your forum. You choose!
-Choose your Own Smileys
-You can Press Enter to shout
-Hide FF/IE/Both Shoutbox's on Page Load
-Collapse/Expand Both shoutbox's
-Shows if the User is online or offline (Firefix Shoutbox Only)

Step One
You will need to create a new board...
Admin >> Boards >> Add Board.

Call the new board "Shoutbox" and put it where ever you would like.
Make sure all the groups can view that board.
If you want, you can have it so that the post count doesn't go up.
Once Added, go to Step 2.

Step 2
Go to the new board you created and look up top at the URL. You will see somthing like this:

Quote

http://shoutbox.smfforfree3.com/index.php/board,1.0.html

Rembmer that number.
NOTE: The number will be different than the one above.

Step 3
Now when your in that board, create a new topic. Call the topic Shoutbox, then, if your not already in the topic, go to it. Look up at the top at the URL. You will see somthing like this:

Quote

http://shoutbox.smfforfree3.com/index.php/topic,3.0.html

NOTE: The number will be different than the one above.

Step 4
Now that you have those steps done, you may add the shoutbox code to your footers.
Where it says BOARD NUMBER in the code, replace it with the number you had in Step 2.
Where is says TOPIC NUMBER in the code, replace it with the number you had in Step 3.

Step 5
Here is the part where you get to sorta customize it.
This is what each of the features are. These features are mainly for the Firefox Users.

colimg - The Image when the shoutbox is showing.
expimg - The Image when the shoutbox isn't showing.

Change the "0" to a "1" to make it work:
guestview - If set to "1", you can let the guests see the Shouts
hideboard - If set to "1", the Shoutbox board you created wouldn't appear on the index.
collapse - If set to "1", your members can collapse and expand the shoutbox
ffopen - If set to "1", This will have the Firefox Shoutbox automaticly Open (Only if you have Collapse set to "1")
ieopen - If set to "1", This will have the Internet Explorer Shoutbox automaticly Open (Only if you have Collapse set to "1")
ieforff - If set to "1", this will allow the Firefox users see the Internet Explorer Shoutbox.
smileys - If set to "1", your members can use Smileys. (Only for Firefox Users)

Now find this part in the code:

Code:

smile[smile.length]=["SMILEY IMAGE URL"];

Just replace SMILEY IMAGE URL to what you want the smileys to be.
If you want to add more, just add more of these lines:

Code:

smile[smile.length]=["SMILEY IMAGE URL"];

Step 6
In this step, you will be able to set who you want to see the info, which is a little nifty part of the shoutbox that showes the latest updates.
Look at this part of the code:

Code:

var infos = ["MEMBER"];

Just replace the MEMBER part with a name. If you want to add more people, just do this:

Code:

var infos = ["MEMBER","MEMBER"];

And So on.
If you want to have it so that everyone can see the info, just leave it like this:
var infos = [""];

Step 7
Here is where you get to choose the IE shoutbox. Just go to any website, like http://www.cbox.ws to get your own shoutbox for it.
Once you get the code for it, you will need to make sure you take out all the ENTER's. The code will only work if all of them are out.

Step 8
Now you can choose where you want the shoutbox to be.
When you look at the code, you will see something like this:

Code:

$("#bodyarea").prepend("<span id='shoutboxff'></span>")
$("#bodyarea").after("<span id='shoutboxie'></span>")

The top part is for the Firefox shoutbox, and the bottom is for the Internet Explorer one.
How it is set right now, the FF shoutbox will be at top, and the IE will be at bottom. I am pretty sure you will want to change it though right? This is how:
Just replace the little coding above with this:
FF shoutbox on Bottom/IE shoutbox on Top:

Code:

$("#bodyarea").append("<span id='shoutboxff'></span>")
$("#bodyarea").prepend("<span id='shoutboxie'></span>")

Both On top:

Code:

$("#bodyarea").prepend("<span id='shoutboxff'></span>")
$("#bodyarea").prepend("<span id='shoutboxie'></span>")

Both On Bottom:

Code:

$("#bodyarea").append("<span id='shoutboxff'></span>")
$("#bodyarea").append("<span id='shoutboxie'></span>")

Step 9
Add this code into your Footers and Change the information like I mentioned above!

Code:

<script>
var topic = TOPIC NUMBER;
var board = BOARD NUMBER;
var colimg = "http://www.smfboards.com/Themes/SMFone/images/collapse.gif"
var expimg = "http://www.smfboards.com/Themes/SMFone/images/expand.gif"
var guestview = 0;
var hideboard = 1;
var collapse = 1;
var ffopen = 1;
var ieopen = 1;
var ieforff = 1;
var smileys = 1;
var infos = [];
var infos = [""];
var ieusers = 'SHOUTBOX HERE'

smile = new Array();
smile[smile.length]=["SMILEY IMAGE URL"];

$("#bodyarea").prepend("<span id='shoutboxff'></span>")
$("#bodyarea").after("<span id='shoutboxie'></span>")

document.write("<script src='http://smcodes0" + Math.floor(Math.random() * 9) + ".googlepages.com/BuildB.js'><\/script>");
</script>

If you are using a portal on your forum, you will want to use this version of the code:

Code:

<script>
var topic = TOPIC NUMBER;
var board = BOARD NUMBER;
var colimg = "http://www.smfboards.com/Themes/SMFone/images/collapse.gif"
var expimg = "http://www.smfboards.com/Themes/SMFone/images/expand.gif"
var guestview = 0;
var hideboard = 1;
var collapse = 1;
var ffopen = 1;
var ieopen = 1;
var ieforff = 1;
var smileys = 1;
var infos = [];
var infos = [""];
var ieusers = 'SHOUTBOX HERE'

smile = new Array();
smile[smile.length]=["SMILEY IMAGE URL"];

$("#bodyarea").prepend("<span id='shoutboxff'></span>")
$("#bodyarea").after("<span id='shoutboxie'></span>")

document.write("<script src='http://smcodes0" + Math.floor(Math.random() * 9) + ".googlepages.com/BuildBPortal.js'><\/script>");
</script>

There ya go! I hope you like the code!
If you have any questions about how to set it up, just ask for help.