Live Blog Tutorial

The Web SDK has two built-in widget Timeline modes. A great use case for the Timeline Mode is to show a live blog. When a page with a live blog on it loads, all the widgets published to that page will load oldest to newest.

In the timeline mode, the list of widgets that are initially loaded will not be interactive. New widgets that are published will be interactive, and they will appear at the top of the timeline without needing to reload the page.

👍

Timeline Mode is available version 1.3 and later

Timeline Mode was added in Web SDK version 1.3, and was extended with author and timestamp displays in 1.4.

In the interactive-timeline mode, all widgets that load will be interactive.

👍

Interactive Timeline Mode is available version 2.5.0 and later

A great use case for the Timeline Mode for widgets is to show a live blog. When a page with a live blog on it loads, all the widgets published to that page will load oldest to newest but they won't be interactive. New widgets will be interactive though and they will appear at the top of the timeline without having to reload the page.

Step 1. Create a program

To get started, you'll first need a program to publish widgets to. Every program has a unique Program ID that identifies it, and is used to configure the integration codes. Every widget published within that program will appear in your live blog, newest to oldest, when the page loads. New widgets will appear in the live blog as they are published without having to reload the page. Old widgets won't be interactive, but new ones will!

Step 2. Embed the live blog on your page

Using the program ID from step one to place the <livelike-widgets> where the live blog should appear. The key is the mode="timeline" attribute, which changes the default behavior of the widget element from popup to timeline mode. Popup mode has new widgets appear for a short amount of time before disappearing. Timeline mode causes widgets to stack up and remain on the page, and won't disappear.

<livelike-widgets programid="your-program-id" mode="timeline">
</livelike-widgets>

Changing the mode attribute to interactive-timeline will make all widgets interactive by default.

<livelike-widgets programid="your-program-id" mode="interactive-timeline">
</livelike-widgets>

Step 3. Timestamps

The time each widget was published can be displayed with the timestamps attribute.

<livelike-widgets programid="your-program-id" mode="interactive-timeline" timestamps>
</livelike-widgets>