wbAMP custom embed tags

Dedicated embed tags

You can insert in your articles some wbAMP specific tags that will insert pictures and data from various sources. For instance, an image from Instagram or Facebook, a video from Youtube, or even a carousel of images from your own site.

The AMP specification requires that inserting such content in your pages is done through a specific markup, different from the standard embedding used in regular pages. wbAMP will create that specific markup, provided you insert tags (using your editor for instance) in places where you want the content to appear.

The general format is:

{wbamp-embed type="type_of_content" param1="xxxx" param2="yyyy" ...}

The params available depends on the type of tags, and are listed below.

As with most AMP element, you should specify a width and height of the final visible element. wbAMP will try to guess, or fallback to default, if no width/height is provided, and the result should be good for all local images. We cannot identify however the size of images residing on another server, so you must specify them if you use such images.

All width and height must be expressed in pixels only.

Embed tags reference

Currently wbAMP provides the following types of embed tags:

Carousel

An AMP carrousel is basically a slideshow of images, which you can navigate with arrows, or can advance automatically. There are 2 variations: carousel and slides.

{wbamp-embed type="carousel" subtype="carousel|slides"  width="123" height="456" controls="controls|<not set>" loop="loop|<not set>" autoplay="autoplay|<not set>" module_id="" layout="responsive|fixed"}

To list the images that must be part of the slideshow, we use a regular Joomla! Custom HTML module. Create such a module in Joomla! administration, and list the images you want to display in that module, as amp-img images link. For instance:

<amp-img src="/my-image1.png" width=300 height=400></amp-img>
<amp-img src="/my-image2.png" width=300 height=400></amp-img>
<amp-img src="/my-image3.png" width=300 height=400></amp-img>

You should take note of the module id, and then include the module id in your embed tags, in the module_id parameter.

Also, note that you can directly create AMP content there, using the specific AMP tags. You can also use any sort of HTML content (within the limits of AMP specs as usual), such as text, links, etc.

Please see the AMP Carousel documentation for more details.

Dailymotion Video

You only need a video ID (from any dailymotion URL) to embed it in your AMP page:

{wbamp-embed type="dailymotion" videoid="abcdef"  width="123" height="456"  layout="responsive|fixed"}

Please see the AMP Dailymotion documentation for more details.

Facebook image or video

You can display a Facebook post or video with this tag. If a video, include the subtype="videos" parameter. Including the user name and the post or video id is mandatory.

{wbamp-embed type="facebook" user="zuck" id="10102593740125791" subtype="videos|<not set >"  width="123" height="456"  layout="responsive|fixed"}

Please see the AMP Facebook documentation for more details.

Instagram picture

You only need the Instagram shortcode of an image to include it in your pages:

{wbamp-embed type="instagram" shortcode="123abcd"  width="123" height="456"  layout="responsive|fixed"}

Please see the AMP Instagram documentation for more details.

Just like Instagram, only a tweet id is required to display it. However, wbAMP let's you customize the Tweet appearance: optionally select a theme (dark or light) whether a full card should be displayed.

{wbamp-embed type="twitter" tweetid="123456789"  width="123|<not set>" height="456|<not set>" theme="dark|<not set>" cards="hidden|<not set>" layout="responsive|fixed"}

Please see the AMP Twitter documentation for more details.

Vine Video

You only need a video ID (from any Vine URL) to embed it in your AMP page:

{wbamp-embed type="vine" vineid="123456789"  width="123" height="456"  layout="responsive|fixed"}

Please see the AMP Vine documentation for more details.

Youtube Video

You only need a video ID (from any youtube URL) to embed it in your AMP page:

{wbamp-embed type="youtube" videoid="132456789"  width="123" height="456"  layout="responsive|fixed"}

Please see the AMP Youtube documentation for more details.

wbAmp 1 Documentation