Wednesday

embeeds twitter ( 3 )


Embedded Tweets for Developers

While the copy and paste code is useful for content authors, some applications may wish to render these embedded Tweets programmatically. Fortunately, Twitter now supports an oEmbed endpoint which makes this possible.
To render a Tweet using oEmbed, the embedding site must:
  1. Obtain an URL to or ID number of the Tweet it wants to render.
  2. Make a request to the GET statuses/oembed endpoint, passing the Tweet URL or ID as a query parameter.
Editing systems can also find the API URL for a Tweet using oEmbed auto-discovery, by parsing the <head> of the permalink page. Refer to the oEmbed Discovery documentation for more information.
The oEmbed standard allows a website to embed a representation of the contents of an URL into its own markup. The specification supports representing an URL as an image, a video, or even a snippet of rich HTML content. Twitter's implementation uses the rich HTML functionality to render a widget view of a Tweet.
Obtaining an URL to a Tweet and requesting Twitter's oEmbed endpoint are straightforward. Your code must pass either an ID or URL for the Tweet it wishes to embed to GET statuses/oembed, along with any additional querystring parameters it needs to render the Tweet appropriately. The response will encode enough data to embed the Tweet. For example, the response to https://api.twitter.com/1/statuses/oembed.json?id=133640144317198338&align=center is:
{
  "type": "rich",
  "author_name": "Twitter API",
  "cache_age": "31536000000",
  "height": null,
  "html": "

\"

twitter-tweet tw-align-center\">Search API will now always return \"real\" Twitter user IDs. The with_twitter_user_id parameter is no longer necessary. An era has ended. ^TS

— Twitter API (@twitterapi) \"
https://twitter.com/twitterapi/status/133640144317198338\" data-datetime=\"2011-11-07T20:21:07+00:00\">November7, 2011\n", "author_url": "https://twitter.com/twitterapi", "provider_name": "Twitter", "version": "1.0", "provider_url": "http://twitter.com", "url": "https://twitter.com/twitterapi/status/133640144317198338", "width": 550 }
You should cache this response and use the cached data instead of making a request per page load.
The response contains HTML markup which, when rendered along with the //platform.twitter.com/widgets.jsscript, will produce the embedded Tweet widget in your website. To do this, output the html portion of the response into your site template. If you are using a templating library, make sure to disable HTML entity encoding and sanitization for this piece of output, or else the HTML may not render correctly.

widgets.js

The HTML content from the copy & paste dialog or the oEmbed endpoint contains a 
Only one copy of widgets.js needs to be included per rendered page. If you already include a copy (for a Tweet button, for example) or need to render more than one Tweet, you can opt to remove the script reference from the oEmbed response by including the omit_script=true querystring parameter. The example URL becomeshttps://api.twitter.com/1/statuses/oembed.json?id=133640144317198338&omit_script=true, with the following response:
<blockquote class="twitter-tweet"><p>Search API will now always return "real" Twitter user IDs. The with_twitter_user_id parameter is no longer necessary. An era has ended. ^TS</p>— Twitter API (@twitterapi) <a href="https://twitter.com/twitterapi/status/133640144317198338" data-datetime="2011-11-07T20:21:07+00:00">November 7, 2011</a></blockquote>
To remove the script reference from the copy & paste code, just delete the

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)