BBcodes are a simple way of bringing added functionality to your forum in a user-friendly way while also protecting your site from vulnerabilities with general html/script access. I’m sure you’ve seen BBCodes before, they’re the little grey buttons above the new post window.
You can manually enter the BBCodes if you know them or just highlight text and click the button to have the desired effect. They allow you to make text bold, italicized, or underlined, make links, embed images, and more. Through my administrating a phpBB board, I’ve compiled a list of BBcodes that add great functionality in addition to the defaults.
In order to add more BBcodes, log into the Administration Control Panel. Under the ACP, go to the Posting tab, and then BBCodes. Click the ‘Add a new BBCode’ grey button to get to the next page where you can configure your new entries.
From this same page, you can edit the newly added BBcode or delete them. Click the green gear or the Red X, respectively, to perform these tasks.
BBcodes work simply by parsing a message and anywhere there is an already configured BBcode used, it will replace it with the code or HTML that it is configured. You can use different tokens with the BBcode in order to get different properties. The {TEXT} token is the most popular. Basically, this will copy the text between the BBcode tags into the specified location of the replacement code. At the bottom of the page where we will add new BBCodes, you can scroll down and read about the different tokens available. Once you’ve clicked the ‘Add a new BBCode’ button, you’ll see the form you’ll need to fill out.
Using the center code as an example, you can see in the screenshot above there are 4 areas to fill out. BBCode usage is just the syntax that people will see when they use the button in a new post. The HTML replacement code is what the message parser will replace the BBCode with. The Help line is the text you see when you hover your mouse over one of the buttons. Finally, the Display on posting page check tells you whether or not the button should appear on the new post page. You can have a BBCode enabled, but not listed on the page. Using this selectively can help your page from getting cluttered up.
There are 11 different BBCodes, you can add. The BBCode usage and HTML replacement code is important to get exactly right but you can change the help line and display on posting page setting to your preference.
center
Centers anything inside of the tags.
BBCode: [center]{TEXT}[/center]
HTML:
<div align="center">{TEXT}</div>Help line: Centers the text, [center]Your text here[/center]
mp3
Allows you to embed a Flash player for MP3 files. You’ll need to download a Flash player and put it on your server somewhere. Then update the HTML code to point to your location for the .swf file.
BBCode: [mp3]{URL}[/mp3]
HTML:
<object type="application/x-shockwave-flash" data="http://www.404techsupport.com/mp3player/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://www.404techsupport.com/mp3player/player.swf" />
<param name="FlashVars" value="playerID=1&soundFile={URL}" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="wmode" value="transparent" />
</object>Help line: [mp3]URL to file[/mp3]
note
Puts a comment in your post if you need to record anything, but don’t want it shown to everybody.
BBCode: [note]{TEXT}[/note]
HTML:
<!-- {TEXT} -->Help line: A note only visible when editing post
pre
Uses the formatting of the text instead of re-forming it in the parsing process (getting rid of additional spaces, etc.) This pre-format tag avoids the problem of changing the text font-face as well.
BBCode: [pre]{TEXT}[/pre]
HTML:
<pre style="font-family:'Lucida Grande','Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;display:inline;">{TEXT}</pre>Help line: Preformatted text, [pre]Your Text here[/pre]
reverse
Any text within the reverse tags will be reversed, letter-by-letter.
BBCode: [reverse]{TEXT}[/reverse]
HTML:
<bdo dir="rtl">{TEXT}</bdo>
Help line: Reverse text, right to left
spoiler
Uses a button to cover up anything that might be a spoiler. Individuals can choose to press the button to reveal the spoiler.
BBCode: [spoiler]{TEXT}[/spoiler]
HTML:
<div style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>
Help line: Spoiler warning! [spoiler]Your text[/spoiler]
strike
Puts a horizontal line right through the center of the text. Good for editting and updating information without just deleting the old.
BBCode: [strike]{TEXT}[/strike]
HTML:
<strike>{TEXT}</strike>Help line: Strike-through [strike]Crossed-out text[/strike]
sub
Makes text sub-script.
BBCode: [sub]{TEXT}[/sub]
HTML:
<sub>{TEXT}</sub>Help line: Subscript [sub]your text[/sub]
sup
Makes text super-script.
BBCode: [sup]{TEXT}[/sup]
HTML:
<sup>{TEXT}</sup>Help line: Superscript [sup]your text[/sup]
tab
Inserts 5 spaces, like a tab before a paragraph.
BBCode: [tab][/tab]
HTML:
Help line: Tab: [tab][/tab]
youtube
Allows you to embed YouTube videos on your forum. Just copy the video ID of the YouTube video.
BBCode: [Youtube]{TEXT}[/Youtube]
HTML:
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/{TEXT}"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/{TEXT}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>Help line: Embedded Youtube Video. [Youtube]Video ID[/Youtube]
A lot of these will extend the ability of your forum and make it a more convenient setup. Instead of linking to YouTube videos, you can just embed them within the post. You can upload an .mp3 and then use the URL to that file with the MP3 BBCode to have an embedded MP3 player for your attachments.
Any other BBCodes that help make phpBB more functional?