Custom BBCodes

[Marshalrusty]

Below are the popular custom BBCodes that are frequently asked for on this board. All in one place with descriptions and screenshots for your convenience

To use any of the following custom BBCodes, navigate to the Posting => BBCodes section of the phpBB3 administration panel and click the "Add a new BBCode" button. Enter the respective code from below into the "BBCode usage" and "HTML replacement" boxes.

If you are using phpBB2, you can find compatible BBCode MODs in the BBCode section of the MOD database.

Index

• Youtube
  • Using the full URI
  • Using only the video ID
• Google Video
  • Using the full URI
  • Using only the video ID
• Align (center, right, left)
  • Center
  • Right
  • Left
• Horizontal Rule
• Spoiler

Youtube (embed video in post)

Using the full URI

Description: Allows you to embed Youtube videos in your posts using the full URI of the video.
Demo:


BBCode usage:


Code: Select all

[youtube]http://www.youtube.com/watch?v={SIMPLETEXT}[/youtube]


HTML Replacement:


Code: Select all

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/{SIMPLETEXT}"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/{SIMPLETEXT}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>



Using only the video ID

Description: Allows you to embed Youtube videos in your posts using only the video id.
Demo:


BBCode usage:


Code: Select all

[youtube]{SIMPLETEXT}[/youtube]


HTML Replacement:


Code: Select all

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/{SIMPLETEXT}"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/{SIMPLETEXT}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

Google Video (embed video in post)

Using the full URI

Description: Allows you to embed Google videos in your posts using the full URI of the video.
Demo:


BBCode usage:


Code: Select all

[googlevid]http://video.google.com/videoplay?docid=-{NUMBER}[/googlevid]


HTML Replacement:


Code: Select all

<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId={NUMBER}&hl=en" flashvars=""></embed>



Using only the video ID

Description: Allows you to embed Google videos in your posts using only the video id.
Demo:


BBCode usage:


Code: Select all

[googlevid]{NUMBER}[/googlevid]


HTML Replacement:


Code: Select all

<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId={NUMBER}&hl=en" flashvars=""></embed>

Align (left, center, right)

Description: Allows you to align text/images to the left/right/center.
Demo:


Center

BBCode usage:


Code: Select all

[center]{TEXT}[/center]


HTML Replacement:


Code: Select all

<div align="center">{TEXT}</div>



Right

BBCode usage:


Code: Select all

[right]{TEXT}[/right]


HTML Replacement:


Code: Select all

<div align="right">{TEXT}</div>



Left

BBCode usage:


Code: Select all

[left]{TEXT}[/left]


HTML Replacement:


Code: Select all

<div align="left">{TEXT}</div>


Hint: Unless you use a RTL (right to left) language, everything will align to the left by default anyway.

Horizontal rule

Description: Inserts a horizontal rule (line) into a post.
Demo:


BBCode usage:


Code: Select all

[hr]{IDENTIFIER}[/hr]


HTML Replacement:


Code: Select all

<hr title="{IDENTIFIER}" />

Spoiler

Description: Adds a black background color to the text between the tags, making it unreadable unless higlighted. Unlike the other methods of going about this, this code does not use Javascript (which some users disable) and is therefore, at least in my opinion, the best way to do it.
Demo:


BBCode usage:


Code: Select all

[spoiler]{TEXT}[/spoiler]


HTML Replacement:


Code: Select all

<span style="background:#000000">{TEXT}</span>

To be added soon:
- background color
- <strike>
- <sub>
- <sup>
- rtl text
- font
- etc.

If you have any suggestions or find an error in the above article, please do not hesitate to PM me.

For more BBCodes see this knowledge base article: Adding Custom BBCodes in phpBB3

[dumdum1974]

Maybe this is stupid question but I tought:
Is it possible to have media media player embedded in forum lets say like you have external link for your movie than you add BBcode and player starting like with those 2 of google and youtube?

btw: GREAT POST M8

[RedTrinity]

Marshalrusty, I think the You Tube codes are mixed up?

[youtube]http://youtube.com/watch?v={TEXT}[/youtube] = option using just video ID

[youtube]{TEXT}[/youtube] = option using full URL

Just thought I would let you know as you appear to have them back to front

Otherwise this is a fantastic thread, thanks for the assistance with BBCodes!

[jnhrtmn]

Is it possible to indent the first line of a paragraph with a custom bbcode?

[jnhrtmn]

I figured out a way to indent the first line of a paragraph. In the Posting/bbcodes panel:

Code: Select all

[Tab]{TEXT}[/Tab]

Code: Select all

<span style="margin-left: {TEXT}px;"></span>

You get this,
[Tab][/Tab]
Enter a number between them that will be a margin measured in pixels.
[Tab]35[/Tab] Creates a normal indent. I'm not sure about other browsers' style issues (other than IE).

[Marshalrusty]

Marshalrusty, I think the You Tube codes are mixed up?

[youtube]http://youtube.com/watch?v={TEXT}[/youtube] = option using just video ID

[youtube]{TEXT}[/youtube] = option using full URL

Just thought I would let you know as you appear to have them back to front

I believe you are mistaken

Note my HTML replacement.

I figured out a way to indent the first line of a paragraph. In the Posting/bbcodes panel:

Code: Select all

[Tab]{TEXT}[/Tab]

Code: Select all

<span style="margin-left: {TEXT}px;"></span>

You get this,
[Tab][/Tab]
Enter a number between them that will be a margin measured in pixels.
[Tab]35[/Tab] Creates a normal indent. I'm not sure about other browsers' style issues (other than IE).

If you're going to do that, then change the {TEXT} to {NUMBER}. It's a good idea to keep tags as tight as possible.

[N.emesis]

Ive added the BBcode but nothing happens when i post. I dont see the video.

I used this:

Code: Select all

[youtube]http://youtube.com/watch?v={SIMPLETEXT}[/youtube]

And this for the html right:

Code: Select all

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/{SIMPLETEXT}"></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>

Well ive done that and nothing happens. One note to is the video still able to work when the url changes to htt://nl.youtube.com/watch?v=32DF3e3 Because its automatically being added by youtube because i live in The Netherlands.

so what could possibly been wrong?

[N.emesis]

I found the problem that was causing that it was this:

Code: Select all

[youtube]http://youtube.com/watch?v={SIMPLETEXT}[/youtube]

The SIMPLETEXT code was somehow not the good one and i changed it to:

Code: Select all

[youtube]http://youtube.com/watch?v={TEXT}[/youtube]

So works perfectly,good job for these mods keep up the good work.

[Marshalrusty]

There was an error in the above code. I had accidentally left {TEXT} in one place and put {SIMPLETEXT] in another. Please grab the updated code above.

[kidgeon]

First off, beautiful post Just one note, at first I couldnt get the youtube url code to work, but after adding the "www" in the code it made the difference.

[youtube]http://youtube.com/watch?v={SIMPLETEXT}[/youtube]

I changed it to

[youtube]http://www.youtube.com/watch?v={SIMPLETEXT}[/youtube]


Thanks a million

[N.emesis]

Marshalrusty,

one question i got is when im viewing a video on youtube and click and copy the wacth link this is included:

Code: Select all

http://nl.youtube.com/watch?v=0BDyqwwEdt4

You see the nl is being included so you have to manually remove it when you try let it work so it be like this:

Code: Select all

http://youtube.com/watch?v=0BDyqwwEdt4

Is there a way to add some thing in the code without having to remove the nl ?

[Marshalrusty]

Depending on the domain name you enter to view Youtube, it will show videos using a different subdomain (http://www.youtube.com, uk.youtube.com, etc.). In this case, the BBCode would only work with the domain that you configure. So if you have http://www.youtube.com, then everyone would need to change the URI to that to get it to work.

If you have an international site where people might be viewing Youtube from different domains, then you might want to use the second method that only asks for the id: viewtopic.php?f=46&t=579376#youtube2

[Brian_RTL]

Great job getting these all in one locatinon Marshalrusty! I'm bookmarking this thread.

Does anyone else need a non-breaking space (&nbsp;)? That's the only other BBCode I've added.

I've been messing around with adding form tags with BBCode. Has great scorn already been heaped on this idea in a different thread that someone could point me to? I assume the security risks might be too high, even in a private forum but it would be nice to have a simpler creation method for small forms.

[Gunnar]

i reccomend updating the first post with all fixes and such


MSN Soapbox:

BBCode usage:

Code: Select all

[soapbox]http://soapbox.msn.com/video.aspx?vid={SIMPLETEXT}[/soapbox]

HTML Replacement:

Code: Select all

<embed src="http://images.soapbox.msn.com/flash/soapbox1_1.swf" quality="high" width="432" height="364" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://macromedia.com/go/getflashplayer" flashvars="c=v&v={SIMPLETEXT}" ></embed>

[the_nanobreaker]

Thanx to all.