This is an old revision of the document!


Friendica BBCode tags reference

Friendica is using the BBCode markup language to format postings and comments. Alternatively the admin of a Friendica node can activate an addon to also support Markdown. How a rich text formatted posting or comment will be displayed in other projects of the Fediverse depends on their capabilities. Some will just present a plain text version of the postings, others might display all or only a part of the formatting.

Purpose BBCode Tag Resulting HTML Code
Bold Text [b]bold[/b] <strong>bold</strong>
Italic Text [i]italic[/i] <em>italic</em>
Underlined Text [u]underlined[/u] <u>underlined</u>
Striked Text [s]strike[/s] <strike>strike</strike>
Overlined Text [o]overline[/o] <span class="overline">overline</span>
Colored Text [color=red]red[/color] <span style="color: red;">red</span>
Linked Text [url=http://friendi.ca]Friendica[/url] <a href="http://friendi.ca" target="external-link">Friendica</a>
Purpose BBCode Tag
embed an image [img]https://raw.githubusercontent.com/friendica/friendica/stable/images/friendica-32.jpg[/img]
embed an image and specify width and height of the image [img=64x32]https://raw.githubusercontent.com/friendica/friendica/stable/images/friendica-32.jpg[/img]
embed an image and provide an ALT text (description) for it [img=https://raw.githubusercontent.com/friendica/friendica/stable/images/friendica-32.jpg]The Friendica Logo[/img]

You can specify the font size either by providing the numerical value of the size in pixel

[size=20]exact size[/size] (size can be any number, in pixels)

or by providing textual aliases like xx-small for small text, or xx-large big text.

To choose a different font for a text passage, you can specify the name of the font.

[font=serif]Serif font[/font]

The font has to be present on the viewers system to be used.

Purpose BBCode
Set a link to a page on the internet [url]http://friendi.ca[/url]
Use some text as label for the link [url=http://friendi.ca]Friendica[/url]
Add a relative link to a posting identified by the GUID [url=/posts/f16d77b0630f0134740c0cc47a0ea02a]Diaspora post with GUID[/url]
Set a hashtag1) #Friendica
Mention one of your contacts or a participant in the current discussion @Mention
Explicitely mention a Webfinger acct:account@friendica.host.com (WebFinger)
Set an email link [mail]user@mail.example.com[/mail]
Use some text as label for the email link

<table class=“bbcodes”> <tr>

<th>BBCode</th>
<th>Result</th>

</tr> <tr>

<td>[p]A paragraph of text[/p]</td>
<td><p>A paragraph of text</p></td>

</tr> <tr>

<td>Inline [code]code[/code] in a paragraph</td>
<td>Inline <key>code</key> in a paragraph</td>

</tr> <tr>

<td>[code]Multi<br>line<br>code[/code]</td>
<td><code>Multi

line code</code></td> </tr> <tr>

<td>[code=php]function text_highlight($s,$lang)[/code]<sup><a href="#supported-code">1</a></sup></td>
<td><code><div class="hl-main"><ol class="hl-main"><li><span class="hl-code">&nbsp;</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">text_highlight</span><span class="hl-brackets">(</span><span class="hl-var">$s</span><span class="hl-code">,</span><span class="hl-var">$lang</span><span class="hl-brackets">)</span></li></ol></div></code></td>

</tr> <tr>

<td>[quote]quote[/quote]</td>
<td><blockquote>quote</blockquote></td>

</tr> <tr>

<td>[quote=Author]Author? Me? No, no, no...[/quote]</td>
<td><strong class="author">Author wrote:</strong><blockquote>Author? Me? No, no, no...</blockquote></td>

</tr> <tr>

<td>[center]Centered text[/center]</td>
<td><div style="text-align:center;">Centered text</div></td>

</tr> <tr>

<td>You should not read any further if you want to be surprised.[spoiler]There is a happy end.[/spoiler]</td>
<td>
  <div class="wall-item-container">
    You should not read any further if you want to be surprised.<br>
    <span id="spoiler-wrap-0716e642" class="spoiler-wrap fakelink" onclick="openClose('spoiler-0716e642');">Click to open/close</span>
    <blockquote class="spoiler" id="spoiler-0716e642" style="display: none;">There is a happy end.</blockquote>
    <div class="body-attach"><div class="clear"></div></div>
  </div>
</td>

</tr> <tr>

<td>[spoiler=Author]Spoiler quote[/spoiler]</td>
<td>
  <div class="wall-item-container">
    <strong class="spoiler">Author wrote:</strong><br>
    <span id="spoiler-wrap-a893765a" class="spoiler-wrap fakelink" onclick="openClose('spoiler-a893765a');">Click to open/close</span>
    <blockquote class="spoiler" id="spoiler-a893765a" style="display: none;">Spoiler quote</blockquote>
    <div class="body-attach"><div class="clear"></div></div>
  </div>
</td>

</tr> <tr>

<td>[hr] (horizontal line)</td>
<td><hr></td>

</tr> </table>

<a name=“supported-code”>1</a>: Supported language parameter values for code highlighting: - abap - avrc - cpp - css - diff - dtd - html - java - javascript - js - mysql - perl - php - python - ruby - sh - sql - vbscript - xml

You can set heading with descending order by using [h1] to [h6] tags. [h1] is the main header, displayed with the largest font size, while [h6] is the lowest header.

If you set a title for the posting you are composing, it is displayed as level 2 header. To keep the hierarchical order of section titles, you should stick to the [h3] and lower titles.

To use a table in your posting, you can use the following BBCode

[table]
  [tr]
    [th]Header 1[/th]
    [th]Header 2[/th]
    [th]Header 3[/th]
  [/tr]
  [tr]
    [td]Cell 1[/td]
    [td]Cell 2[/td]
    [td]Cell 3[/td]
  [/tr]
  [tr]
    [td]Cell 4[/td]
    [td]Cell 5[/td]
    [td]Cell 6[/td]
  [/tr]
[/table]

Which will render a table.

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

If you want to change the width of the tables borders, you can do so by providing a border parameter in the [table] tag. E.g.

[table border=1]
  [tr]
    [th]Kopfzeile 1[/th]
    [th]Kopfzeile 2[/th]
    [th]Kopfzeile 2[/th]
  [/tr]
  [tr]
    [td]Zelle 1[/td]
    [td]Zelle 2[/td]
    [td]Zelle 3[/td]
  [/tr]
  [tr]
    [td]Zelle 4[/td]
    [td]Zelle 5[/td]
    [td]Zelle 6[/td]
  [/tr]
[/table]

You can use ordered and unordered lists. An unordered is written by using the [ul] BBCode tag.

[ul]
* Item 1
* Item 2
* Item 3
[/ul]

This will result in a list like

  • Item 1
  • Item 2
  • Item 3

To write an ordered list, use the [ol] tag instead. E.g.

[ol]
* Item 1
* Item 2
* Item 3
[/ol]

will produce

  1. Item 1
  2. Item 2
  3. Item 3

With ordered lists, you can also specify a parameter that controls what kind of numeration you want to use. This parameter is passed along when opening the list. [ol=a] will use lowercase letters for numeration. Possible parameters are: a, A for lower- or uppercase letters, 1 for numbers and i, I for roman numbers either using lowercase letters or uppercase letters.

You can embed video, audio and more in a message.

<table class=“bbcodes”> <tr>

<th>BBCode</th>
<th>Result</th>

</tr> <tr>

<td>[video]url[/video]</td>
<td>Where *url* can be an url to youtube, vimeo, soundcloud, or other sites wich supports oembed or opengraph specifications.</td>

</tr> <tr>

<td>[video]Video file url[/video]

[audio]Audio file url[/audio]</td>

<td>Full URL to an ogg/ogv/oga/ogm/webm/mp4/mp3 file. An HTML5 player will be used to show it.</td>

</tr> <tr>

<td>[youtube]Youtube URL[/youtube]</td>
<td>Youtube video OEmbed display. May not embed an actual player.</td>

</tr> <tr>

<td>[youtube]Youtube video ID[/youtube]</td>
<td>Youtube player iframe embed.</td>

</tr> <tr>

<td>[vimeo]Vimeo URL[/vimeo]</td>
<td>Vimeo video OEmbed display. May not embed an actual player.</td>

</tr> <tr>

<td>[vimeo]Vimeo video ID[/vimeo]</td>
<td>Vimeo player iframe embed.</td>

</tr> <tr>

<td>[embed]URL[/embed]</td>
<td>Embed OEmbed rich content.</td>

</tr> <tr>

<td>[iframe]URL[/iframe]</td>
<td>General embed, iframe size is limited by the theme size for video players.</td>

</tr> <tr>

<td>[url]*url*[/url]</td>
<td>If *url* supports oembed or opengraph specifications the embedded object will be shown (eg, documents from scribd).

Page title with a link to *url* will be shown.</td> </tr> </table>

This requires “openstreetmap” or “Google Maps” addon version 1.3 or newer. If the addon isn't activated, the raw coordinates are shown instead. The mapping provider has to be added by the nodes admin to the trusted server list for embeds.

BBCode Result
[map]address[/map] Embeds a map centered on this address.
[map=lat,long] Embeds a map centered on those coordinates.
[map] Embeds a map centered on the post's location.

If you want to spread your post to several third party networks you may have the problem that these networks have a length limitation like on Twitter.

Friendica uses a semi-intelligent mechanism to generate a fitting abstract. But it can be useful to define a custom abstract that will only be displayed on the external network. This is done with the [abstract]-element.

[abstract]Totally interesting! A must-see! Please click the link![/abstract]
I want to tell you a really boring story that you really never wanted to hear.

Twitter would display the text

Totally interesting! A must-see! Please click the link!

On Friendica you would only see the text after

I want to tell you a really …

It is even possible to define abstracts for separate networks:

[abstract]Hi friends Here are my newest pictures![/abstract]<br>
[abstract=twit]Hi my dear Twitter followers. Do you want to see my new
pictures?[/abstract]<br>
[abstract=apdn]Helly my dear followers on ADN. I made sone new pictures
that I wanted to share with you.[/abstract]<br>
Today I was in the woods and took some real cool pictures ...

For Twitter and App.net the system will use the defined abstracts.

For other networks (e.g. when you are using the “statusnet” connector that is used to post to your GNU Social account) the general abstract element will be used.

If you use (for example) the “buffer” connector to post to Facebook or Google+ you can use this element to define an abstract for a longer blogpost that you don't want to post completely to these networks.

Networks like Facebook or Google+ aren't length limited. For this reason the [abstract] element isn't used. Instead you have to name the explicit network:

[abstract]These days I had a strange encounter...[/abstract]
[abstract=goog]Hello my dear Google+ followers. You have to read my newest blog post![/abstract]<br>
[abstract=face]Hello my Facebook friends. These days happened something really cool.[/abstract]<br>
While taking pictures in the woods I had a really strange encounter...

Google and Facebook will show the respective abstracts while the other networks will show the default one. Meanwhile, Friendica wont show any of the abstracts.

The [abstract] element is not working with connectors where we post HTML directly, like Tumblr, Wordpress or Pump.io. For the native connections–that is to e.g. Friendica, Hubzilla, Diaspora or GNU Social–the full posting is used and the contacts instance will display the posting as desired.

For postings that are delivered via ActivityPub, the text from the abstract is placed in the summary field. On Mastodon this field is used for the content warning.

Prevent parsing of posting parts

If you need to put literal BBCode in a message, [noparse], [nobb] or [pre] blocks prevent BBCode conversion:

  • [noparse][b]bold[/b][/noparse]
  • [nobb][b]bold[/b][/nobb]
  • [pre][b]bold[/b][/pre]

will all literally show [b]bold[/b].

Note: [code] has priority over [noparse], [nobb] and [pre] which makes them display as BBCode tags in code blocks instead of being removed. [code] blocks inside [noparse] will still be converted to a code block.

Additionally, [noparse] and [pre] blocks prevent mention and hashtag conversion to links:

  • [noparse]@user@domain.tld[/noparse]
  • [pre]@user@domain.tldg[/pre]

will display @user@domain.tld without linking either the user account.

Finally, [pre] blocks preserve spaces.

If you need to disable smilies on a post by post basis, you can do so using [nosmile] in a posting. This will disable the conversion of ASCII smilie sequences to images [nosmile] ;-) :-O will stay ;-) :-O and not be converted to 😉 😮.

Custom inline styles

You can apply custom CSS styling of part of your postings by applying the [style] tag to those parts.

[style=text-shadow: 0 0 4px #CC0000;]You can change all the CSS properties of this block.[/style]

The above will add a red shadow to the text.

screenshot showing the added text shadow by using the style BBCode tag

Custom class block

You can also apply any existing CSS classes to a block using the [class] BBCode tag.

[class=custom]If the class exists, this block will have the custom class style applied.[/class]

1)
which is a shortcut to the local search for the given term
  • Last modified: 2022-06-08 13:41