phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

Advanced BBCode Box

Awesome Custom BBCodes - Advanced BBCode Box

Awesome Custom BBCodes

by MattF » Tue Nov 25, 2014 7:03 am

Here are some useful custom BBCodes you can add to your board and to ABBC3!

Go to the ACP's Posting tab and click the Add a New BBcode button to get started.

Some of these have icons included for use with ABBC3's toolbar. Download them from here, and drop them into the ext/vse/abbc3/images/icons folder.

Enjoy!

######################################################################

Spotify

Embed Spotify Tracks
ex-spotify.jpg
ex-spotify.jpg (13.55 KiB) Viewed 6507 times


BBCODE USAGE:

Code: Select all

[spotify]{IDENTIFIER}[/spotify]

HTML REPLACEMENT:

Code: Select all

<iframe src="https://embed.spotify.com/?uri=spotify:track:{IDENTIFIER}" width="300" height="80" frameborder="0" allowtransparency="true"></iframe>

HELP LINE:

Code: Select all

[spotify]4th1RQAelzqgY7wL53UGQt[/spotify]

ICON:
spotify.gif
spotify.gif (685 Bytes) Viewed 6092 times

Notes:
1. You can change the height to 380 if you prefer the large album image artwork under the player.
2. Spotify player is not really a player. It launches a Spotify media player for the user, and of course the user needs to be a Spotify member and signed in to actually hear anything.
3. Users must get the code at the end of a Spotify track URL.

######################################################################

Kickstarter Widget

Embed Kickstarter Widgets
ex-kickstarterwidget.png
ex-kickstarterwidget.png (67.21 KiB) Viewed 6382 times


BBCODE USAGE:

Code: Select all

[kickstarter]https://www.kickstarter.com/projects/{IDENTIFIER1}/{IDENTIFIER2}[/kickstarter]

HTML REPLACEMENT:

Code: Select all

<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/{IDENTIFIER1}/{IDENTIFIER2}/widget/card.html?v=2" width="220"></iframe>

HELP LINE:

Code: Select all

[kickstarter]https://www.kickstarter.com/projects/xxx/xxx[/kickstarter]

ICON:
kickstarter.gif
kickstarter.gif (614 Bytes) Viewed 6040 times

######################################################################

In-Line Code

Use for displaying in-line code
ex-inlinecode.jpg


BBCODE USAGE:

Code: Select all

[c]{TEXT}[/c]

HTML REPLACEMENT:

Code: Select all

<code style="font:Monaco, 'Andale Mono', 'Courier New', Courier, monospace 0.9em normal;line-height:1.3em;background-color:#fff;color:#2E8B57;border:1px solid #C9D2D8;padding:0 3px;display:inline;">{TEXT}</code>

HELP LINE:

Code: Select all

In-Line Code: [c]your code[/c]


######################################################################

GIST

Embed Gist code in posts!
ex-gist.jpg


BBCODE USAGE:

Code: Select all

[gist]{URL}[/gist]

HTML REPLACEMENT:

Code: Select all

<script src="{URL}.js"> </script>

HELP LINE:

Code: Select all

[gist]URL to GIST page[/gist] Example: https://gist.github.com/1343518

ICON:
gist.gif
gist.gif (397 Bytes) Viewed 6024 times

######################################################################

Pastebin

Embed Pstebin code in posts!
ex-pastebin.jpg


BBCODE USAGE:

Code: Select all

[pastebin]{IDENTIFIER}[/pastebin]

HTML REPLACEMENT:

Code: Select all

<script src="http://pastebin.com/embed_js.php?i={IDENTIFIER}"></script>

HELP LINE:

Code: Select all

[pastebin]ID from your code[/pastebin]

ICON:
pastebin.gif
pastebin.gif (644 Bytes) Viewed 6031 times

######################################################################

jsFiddle

Embed jsFiddle code in posts!
ex-jsfiddle.jpg


BBCODE USAGE:

Code: Select all

[jsfiddle]{URL}[/jsfiddle]

HTML REPLACEMENT:

Code: Select all

<iframe style="width: 100%; height: 300px" src="{URL}embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

HELP LINE:

Code: Select all

[jsfiddle]http://jsfiddle.net/pborreli/pJgyu/[/jsfiddle]

ICON:
jsfiddle.gif
jsfiddle.gif (388 Bytes) Viewed 6029 times

######################################################################

CodePen

Embed CodePen Pens in posts!
ex-codepen.jpg


BBCODE USAGE:

Code: Select all

[codepen]{SIMPLETEXT}[/codepen]

HTML REPLACEMENT:

Code: Select all

<p data-height="268" data-theme-id="0" data-slug-hash="{SIMPLETEXT}" data-default-tab="result" class='codepen'></p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

HELP LINE:

Code: Select all

[codepen]slug[/codepen] Example (at end of url): http://codepen.io/username/pen/slug

ICON:
codepen.gif
codepen.gif (391 Bytes) Viewed 6034 times

######################################################################

Website Thumbnails

Shows a thumbnail of the linked site
ex-webthumb.jpg


BBCODE USAGE:

Code: Select all

[web_thumb]{URL}[/web_thumb]

HTML REPLACEMENT:

Code: Select all

<a href="{URL}" title="{URL}" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="http://open.thumbshots.org/image.pxf?url={URL}" width="120" height="90" alt="" style="border:1px solid #C9D2D8;" /><br />{URL}</a>

HELP LINE:

Code: Select all

Web Site Thumbnail: [web_thumb]URL[/web_thumb]

ICON:
web_thumb.gif
web_thumb.gif (381 Bytes) Viewed 6019 times
Formerly known as VSE • My Extensions • Please do not PM me for support.
User avatar
MattF
Extensions Development Coordinator
Extensions Development Coordinator
Posts: 5979
Joined: Sat Jan 17, 2009 9:37 am
Location: Los Angeles, CA
Name: Matt Friedman
Top

Re: Awesome Custom BBCodes

by MastaSukeh » Sat Feb 21, 2015 9:01 pm

3 cool and simple audio codes if someone may want to use:

Autoplay audio on loop
BBCode:

Code: Select all

[audioloop]{URL}[/audioloop]

HTML:

Code: Select all

<audio autoplay loop>
      <source src="{URL}">
</audio>


Autoplay audio no loop
BBcode:

Code: Select all

[audioauto]{URL}[/audioauto]

HTML:

Code: Select all

<audio autoplay>
      <source src="{URL}">
</audio>


Audio player
BBCode:

Code: Select all

[audioplayer={URL}]{COLOR}[/audioplayer]
or

Code: Select all

[audioplayer={COLOR}]{URL}[/audioplayer]

HTML:

Code: Select all

<audio style="background-color:{COLOR};" src="{URL}" controls></audio>


*NOTE: These won't work (properly) on a browser that doesn't fully support HTML5. Almost all browsers now do.
MastaSukeh
Registered User
Posts: 12
Joined: Mon Feb 02, 2015 9:29 am
Top

Re: Awesome Custom BBCodes

by Raul [ThE KuKa] » Fri Feb 27, 2015 7:22 pm

VSE wrote:Go to the ACP's Posting tab and click the Add a New BBcode button to get started.

Some of these have icons included for use with ABBC3's toolbar. Download them from here, and drop them into the ext/vse/abbc3/images/icons folder.

TED Talks

Embed TED Talks Videos
ted_talks .png
Capture TED Talks

BBCODE USAGE:

Code: Select all

[ted]{TEXT}talks/{IDENTIFIER}.{TEXT2}[/ted]

HTML REPLACEMENT:

Code: Select all

<iframe src="http://embed.ted.com/talks/{IDENTIFIER}.html" width="560" height="315" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

HELP LINE:

Code: Select all

[ted]Full link to TED video[/ted]

ICON:
ted.gif
TED Icon
ted.gif (704 Bytes) Viewed 5792 times

Notes:
You can change the height to 380 if you prefer the large video..

Best Regards. ;)
All unsolicited PMs will be ignored.
:warning: Knowledge Base | Documentation | Board rules | phpBB Styles Rules & Policies | Styles Queue Stats :warning:

If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate.
:flag_es: phpBB Spain - Online Since 2003 :heart:


User avatar
Raul [ThE KuKa]
Style Customisations
Style Customisations
Posts: 11137
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Top

Re: Awesome Custom BBCodes

by Raul [ThE KuKa] » Sat Nov 28, 2015 8:40 pm

VSE wrote:Go to the ACP's Posting tab and click the Add a New BBcode button to get started.

Some of these have icons included for use with ABBC3's toolbar. Download them from here, and drop them into the ext/vse/abbc3/images/icons folder.

Travis BBCode

Add a new BBcode for Travis Build Status.
travis_bbcode.png
Capture Travis BBCode

BBCODE USAGE:

Code: Select all

[travis]{IDENTIFIER1}/{IDENTIFIER2}[/travis]

HTML REPLACEMENT:

Code: Select all

<div><a href="https://travis-ci.org/{IDENTIFIER1}/{IDENTIFIER2}" title="{IDENTIFIER1}/{IDENTIFIER2}"><img src="https://travis-ci.org/{IDENTIFIER1}/{IDENTIFIER2}.svg?branch=master" alt="" style="margin-bottom: -5px;" /></a></div>

HELP LINE:

Code: Select all

[travis]yourvendor/yourextension[/travis]

ICON:
travis.gif
Icon Travis BBCode
travis.gif (1.1 KiB) Viewed 4996 times

Best Regards. ;)
All unsolicited PMs will be ignored.
:warning: Knowledge Base | Documentation | Board rules | phpBB Styles Rules & Policies | Styles Queue Stats :warning:

If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate.
:flag_es: phpBB Spain - Online Since 2003 :heart:


User avatar
Raul [ThE KuKa]
Style Customisations
Style Customisations
Posts: 11137
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Top

Pastebin BBCode Stop Working

by FreeBooter » Wed Sep 14, 2016 8:41 pm

Hi everyone,

I have created Pastebin BBCode it was working but for some reason Pastebin BBCode stop working i have recreated the Pastebin BBCode and configure forums group permissions and every other permissions all BBCodes can be use except for Pastebin BBCode, if anyone have a idea or suggestion for resolving my issue please share with me.
I have test the Pastebin BBCode more then one Pastebin embed codes i have included one pastebin address and PasteBin code.


http://pastebin.com/Br9BcPi4

Embed Codes For Paste ID: Br9BcPi4


i have same Pastebin HTML replacement as of below Advanced BBCode Box 3.1 tutorial. I have Advanced BBCode Box version 3.1.3 extension installed.

https://www.phpbb.com/customise/db/extension/advanced_bbcode_box/support/topic/133141
User avatar
FreeBooter
Registered User
Posts: 67
Joined: Tue Aug 23, 2016 3:15 am
Name: FreeBooter
Top

Re: Awesome Custom BBCodes

by FreeBooter » Fri Sep 16, 2016 7:06 pm

Hi everyone,


I have resolved the Pastebin BBCode issue, as my forums using SSL Certificate to initiate a secure session with browsers. I have to modified the original HTML Replacement i have change below code by adding HTTPS to Pastebin url address.


Original HTML Replacement:

Code: Select all

<script src="http://pastebin.com/embed_js.php?i={IDENTIFIER}"></script>




After editing the HTML Replacement:

Code: Select all

<script src="https://pastebin.com/embed_js.php?i={IDENTIFIER}"></script>
User avatar
FreeBooter
Registered User
Posts: 67
Joined: Tue Aug 23, 2016 3:15 am
Name: FreeBooter
Top

Re: Awesome Custom BBCodes

by MattF » Fri Sep 16, 2016 8:16 pm

FreeBooter wrote:Hi everyone,


I have resolved the Pastebin BBCode issue, as my forums using SSL Certificate to initiate a secure session with browsers. I have to modified the original HTML Replacement i have change below code by adding HTTPS to Pastebin url address.


Original HTML Replacement:

Code: Select all

<script src="http://pastebin.com/embed_js.php?i={IDENTIFIER}"></script>




After editing the HTML Replacement:

Code: Select all

<script src="https://pastebin.com/embed_js.php?i={IDENTIFIER}"></script>

Remove the https: so it just starts with the slashes.
Formerly known as VSE • My Extensions • Please do not PM me for support.
User avatar
MattF
Extensions Development Coordinator
Extensions Development Coordinator
Posts: 5979
Joined: Sat Jan 17, 2009 9:37 am
Location: Los Angeles, CA
Name: Matt Friedman
Top

Re: Awesome Custom BBCodes

by lopoto » Thu Oct 24, 2019 11:12 pm

Website Thumbnails

does not show a small picture of the website , someone will confirm that it works for him ? thx.
User avatar
lopoto
Registered User
Posts: 111
Joined: Thu Feb 12, 2015 3:13 pm
Top

Re: Awesome Custom BBCodes

by cxmanTRDTURBO » Sat Dec 24, 2022 10:55 pm

hello, here is a BBcode for automatic playback of videos

I advise you to limit the use to the admin in order to avoid that all the videos are played simultaneously.

I still have to take care of the code to resize the video

Structure du BBCode

Code: Select all

[videoauto]{URL}[/videoauto]
Code HTML

Code: Select all

<video autoplay width="850">
      <source src="{URL}">
</video>
Ligne d’aide

Code: Select all

 ABBC3_BBVIDEOAUTO_HELPLINE
Edit of February 12, 2023: Update of the perfectly functional code with the desired display size.

to change the size of the media, change the number 850 to your liking (width="850")
cxmanTRDTURBO
Registered User
Posts: 10
Joined: Mon Oct 24, 2016 8:23 pm
Top

Re: Awesome Custom BBCodes

by damirb » Sun Mar 26, 2023 5:54 pm

for audio player <audio style="background-color:{COLOR};" src="{URL}" controls></audio>
Is it posible to show file name of m3 ? like Song: autor-song.mp3
damirb
Registered User
Posts: 15
Joined: Mon Feb 24, 2020 8:44 am
Top