Live Blog Tutorial
Using Timeline Mode to implement a live blog
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.
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.
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>
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
<livelike-widgets programid="your-program-id" mode="interactive-timeline" timestamps> </livelike-widgets>
Updated over 1 year ago