Tagboard Support

Embedding a Tagboard

Embedding a tagboard is easy and only takes a couple of minutes, provided you have access to your site's source files.

How to embed a tagboard

  1. Create a tagboard, or visit one of your existing tagboards
  2. Click on the Display dropdown
  3. Select Embed
  4. Toggle through the available options
  5. Copy the generated code snippet at the bottom
  6. Paste the code on the page you want your embedded tagboard

Responsive Design

Embedded tagboards are responsive and will resize to fit available horizontal space — for best results, allow the tagboard to use the full width of the page

Customizing an embedded tagboard

Customization options for your embed are available using the embed script parameters. Depending on the type of embed (Basic or Advanced), different customization options will be available to you.

Background Color

The background embedded tagboards is transparent, allowing you to set any background image or background color you would like via a(ny) containing page element.

Available parameters — Basic Embed

These parameters can be automatically generated using the embed code generator tool on tagboard.com, but if you want to manually toggle options for testing, use the following guide.

Attribute
Value Options
Description

tgb-slug

[hashtag]/[tagboard_id]

Tells the script which tagboard to load [Required]

tgb-post-count

Integer: 3-50

Limits the number of posts shown.

tgb-mobile-count

Integer: 3-50

Limits the number of posts shown on mobile.

tgb-fixed-height

true | false

Toggles whether or not the tagboard container attempts to grow to accommodate all the posts.

tgb-auto-load

true | false

Toggles automatic loading of new posts.

Available parameters — Advanced Embed

Enterprise Only

The "advanced" embed options are only available to Enterprise accounts.

Attribute
Value Options
Description

tgb-slug

[hashtag]/[tagboard_id]

Tells the script which tagboard to load [Required]

tgb-layout

waterfall | grid

Changes the type of layout for the embed. Waterfall is the traditional masonry/mosaic layout, grid sizes posts to a 1:1 aspect ratio.

tgb-inverted

true | false

Inverts post background and text colors.

tgb-feed-type

default | auto

Toggles whether or not new posts are automatically shown.

tgb-toolbar

light | dark | none

Sets the toolbar visual type.

tgb-animation-type

default | fade | flip | scale

Sets the post animation type (layout dependent).

tgb-post-count

Integer: 2-50

Sets the initial number of posts on the tagboard.

tgb-mobile-count

Integer: 2-50

Sets the initial number of posts on the tagboard when displayed on mobile.

tgb-gutter

Integer: 0-200

Size of a gutter (in pixels) to add between posts [grid layout only].

tgb-hashtag-color

Hexadecimal value (e.g. 00AEDE)

Color of links and hashtag.

tgb-font-color

Hexadecimal value (e.g. 00AEDE)

Color of main post text.

tgb-fixed-height

true | false

Toggles whether or not the tagboard container attempts to grow to accommodate all the posts.

tgb-rounded-corners

true | false

Toggles rounded corners on posts.

tgb-media-only

true | false

Toggles whether or not text posts are filtered out.

tgb-show-partial-rows

true | false

Whether to show the bottom row of the grid even if it has fewer posts than the current number of columns [grid layout only].

tgb-in-frame-modals

true | false

Whether to have post detail modals open within the tagboard embed iframe, or within the parent window.

Grid column guide

Embedded tagboards are responsive and will attempt to fit as many grid columns as possible using the available space.

1 Column

< 479 pixels

2 Column

< 767 pixels

3 Column

< 768 pixels

Embedding with a content management system (CMS)

The easiest way to get Tagboard running on your CMS is to copy and paste the embed code directly into a post or page. This results in a responsive view of your tagboard that will fit into whatever container you put it into. You can follow the same approach when/if embedding a tagboard into your sidebar.

It is possible that your theme or CMS may strip out the script tags. If this is the case, you can put the script portion of the embed code in your header or footer sections, and the rest in the location you wish to embed the tagboard.

Embedding with WordPress

We have two options for embedding a tagboard into WordPress. The first is our standard Tagboard Embed Code (see above). The second is our WordPress plugin.

Embedding with WIX

  1. In your page editor, click on the Add menu
  2. Click on the “Apps" menu item
  3. Then Choose “HTML" app
  4. Click into your new HTML app and then the settings menu
  5. Change Mode to “HTML Code"
  6. Then paste in the full embed code

Embedding a Tagboard