Periscope¶
The Periscope card brings live video from Periscope into your article or website. Broadcasts can be shared on Twitter and embedded as Tweets or in timelines. Broadcasters can use the On Air Button to show the world when you’re live, right inside your website.
Embedded Tweets¶
Everywhere on the web a Tweet can go, Periscope can go, too! When embedding a Tweet with a Periscope broadcast, the full video is included as a card. The Periscope broadcast will update in real-time when the broadcast is live, and viewers can replay the broadcast after it’s ended.
LIVE on #Periscope: 50 Artist talk on Larry Sultan at SFMOMA https://t.co/mcHsOUghhp
— SFMOMA (@SFMOMA) July 15, 2016
Embedding a Periscope broadcast from a Tweet works the same way as embedding any other Tweet. You may copy-and-paste embedded Tweet markup from a Tweet menu on Twitter.com and TweetDeck, via publish.twitter.com, pass a URL to a supporting CMS, or inject a Tweet dynamically using a JavaScript factory function. For more detail, view the documentation for embedded Tweets.
Embedded Timeline¶
An embedded timeline displays Tweets from a specific Twitter profile, a list, a search query, or a curated collection of Tweets. A full Periscope broadcast will appear for Tweets with links to a Periscope broadcast.
Share your latest Periscope broadcasts with an embedded search timeline. The filter:periscope
search operator will restrict search results to Tweets containing a Periscope broadcast, while from:your_name
will query just your own Tweets.
On Air Button¶
Similar to the Follow Button, the On Air Button lets you include your Periscope broadcaster profile anywhere on the web. The On Air Button displays a broadcaster’s live status and username. The button changes automatically to indicate when you go live!
Clicking the button will open a new window showing the Periscope user’s profile. If the broadcaster is live when visiting the page, their broadcast will automatically start playing.
Embed the On Air Button by visiting periscope.tv/embed, or by programmatically adding it to a page using the JavaScript factory function.
On Air Button JavaScript Factory Function¶
The Twitter for Websites JavaScript library supports dynamic insertion of the Periscope On Air Button using the twttr.widgets.createPeriscopeOnAirButton
function. Pass a Periscope username, target parent element, and any custom options.
The code snippets on this page assume Twitter’s widgets.js
has successfully loaded on your page. Include an asynchronous script loader on your page while initializing window.twttr
as described in our JavaScript loader documentation. All JavaScript code depending on widgets.js
should execute on or after twttr.ready
.
Parameter | Description | Example |
---|---|---|
username | The username of the broadcaster on Periscope. | KatmaiNPS |
targetEl | DOM node of the desired insertion point. | document.getElementById('container') |
options | Override default widget options. Size can be set to ‘large’ or ‘small’ (default). | large |
Example¶
An element with a DOM ID of container
exists on the page.
<div id="container"></div>
The code snippet below will insert Periscope user @KatmaiNPS into a page inside an element with a unique ID of container. The options object specifies a large size customization.
twttr.widgets.createPeriscopeOnAirButton(
'KatmaiNPS',
document.getElementById('container'),
{
size: 'large'
}
);
Promises¶
The twttr.widgets.createPeriscopeOnAirButton
function returns a Promise. You can execute code after a widget has been inserted onto your page by passing a callback to the resulting promise’s then
function.
twttr.widgets.createPeriscopeOnAirButton(...)
.then( function( el ) {
console.log('On Air Button added.');
});