CINXE.COM

<!DOCTYPE html><head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://dev.twitter.com/blog/tweets-and-buttons","20120106210844","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1325884124"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tweets and Buttons | Twitter Developers</title> <meta name="description" content="Today we’re launching a new version of Twitter that makes it even easier to stay close to everything that interests you. We're also excited to introduce new tools that bring Tweets to your website, and new ways to share with our Tweet buttons. Embedding a Tweet Every Tweet has a story that's more than just 140 characters."/> <script src="https://web.archive.org/web/20120106210844js_/https://platform.twitter.com/widgets.js" type="text/javascript"></script> <link rel="shortcut icon" href="/web/20120106210844im_/https://dev.twitter.com/sites/all/themes/twitter_commons/favicon.ico" type="image/x-icon"/> <link type="text/css" rel="stylesheet" media="all" href="/web/20120106210844cs_/https://dev.twitter.com/sites/default/files/css/css_91e4f0589ca2f54b69e1bcc7b8ec2ec6.css"/> <script type="text/javascript" src="/web/20120106210844js_/https://dev.twitter.com/sites/default/files/js/js_4870ac42b99702bd1788753db64fe1c1.js"></script> <script type="text/javascript"> <![CDATA[//><!]]> </script> </head> <body id="page-node" class="not-front not-logged-in node-type-blog"> <div id="page"> <a href="#content-main" class="skip">Skip to Main Content Area</a> <div id="header-outer"> <div id="header"> <a href="/web/20120106210844/https://dev.twitter.com/" id="logo" title="Home"> Developers </a> <form action="/web/20120106210844/https://dev.twitter.com/blog/tweets-and-buttons" accept-charset="UTF-8" method="post" id="search-theme-form"> <input id="search-q" name="search_theme_form" type="text" maxlength="128" size="15" value="Search" title="Enter search terms" placeholder="Search"/> <input id="search-submit" name="op" type="submit" value="Search"/> <input type="hidden" name="form_build_id" id="form-930caf7ba507b6d745649f253b28ef1e" value="form-930caf7ba507b6d745649f253b28ef1e"/> <input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form"/> </form> <ul id="title-nav"><li class="expanded first"><a href="/web/20120106210844/https://dev.twitter.com/status" title="">API Health</a><ul class="menu"><li class="leaf first"><a href="/web/20120106210844/https://dev.twitter.com/status" title="">API Status</a></li> <li class="leaf last"><a href="/web/20120106210844/https://dev.twitter.com/issues" title="">API Issues</a></li> </ul></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/blog" title="">Blog</a></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/discussions" title="">Discussions</a></li> <li class="expanded"><a href="/web/20120106210844/https://dev.twitter.com/docs" title="">Documentation</a><ul class="menu"><li class="leaf first"><a href="/web/20120106210844/https://dev.twitter.com/docs" title="">Overview</a></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/docs/api" title="">REST API</a></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/docs/streaming-api" title="Streaming API">Streaming API</a></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/docs/twitter-for-websites" title="">Twitter for Websites</a></li> <li class="leaf last"><a href="/web/20120106210844/https://dev.twitter.com/docs/recent" title="">Recently updated</a></li> </ul></li> <li class="leaf last"><a href="/web/20120106210844/https://dev.twitter.com/user/login?destination=node%2F4162" title="">Sign in</a></li> </ul> </div> </div> <div id="content-outer"> <div id="breadcrumbs"> <div class="breadcrumb"><a href="/web/20120106210844/https://dev.twitter.com/">Home</a> → <a href="/web/20120106210844/https://dev.twitter.com/blog">Blog</a> → <a href="/web/20120106210844/https://dev.twitter.com/blog/category/announcements">Announcements</a><div><a href="https://web.archive.org/web/20120106210844/http://twitter.com/share" data-count="horizontal" data-related="brianellin,twitterapi" class="twitter-share-button">Tweet</a></div></div> </div> <h1 id="title">Tweets and Buttons</h1> <div id="content-inner"> <div id="content-main"> <div class="blog-node-head"> <div class="avatar-box"> <a href="https://web.archive.org/web/20120106210844/http://twitter.com/intent/user?screen_name=brianellin"><img src="https://web.archive.org/web/20120106210844im_/https://si0.twimg.com/profile_images/1205784861/bce_normal.png" alt="brianellin" title="brianellin"/></a> </div> <div class="author-info">@<a href="https://web.archive.org/web/20120106210844/http://twitter.com/intent/user?screen_name=brianellin">brianellin</a> Brian Ellin</div> <div class="doc-updated">Posted on Thu, 2011-12-08 10:05</div> </div> <div> <p> Today we’re <a href="https://web.archive.org/web/20120106210844/http://blog.twitter.com/2011/12/lets-fly.html">launching a new version of Twitter</a> that makes it even easier to stay close to everything that interests you. We're also excited to introduce new tools that bring Tweets to your website, and new ways to share with our Tweet buttons. </p> <div class="section"> <h2> Embedding a Tweet </h2> <p> Every Tweet has a story that's more than just 140 characters. It has an author, mentions @people and #topics, contains media, and has actions you can use to share or join the conversation. It's a dynamic piece of media, and we believe that everyone should be able to view and interact with Tweets on the Web in the same ways you would from any Twitter client. </p> <p> Today, we're introducing embeddable Tweets, a new way to add any Tweet to your website just by copying and pasting a line of code. Your website visitors will see a Tweet that focuses on the content by surfacing the conversation and media. Visitors can follow the author with a single-click, and reply, retweet, or favorite the Tweet without leaving the page: </p> <p> <blockquote class="twitter-tweet"><p>Let's Fly! <a href="https://web.archive.org/web/20120106210844/http://t.co/lq0k4D1J" title="http://blog.twitter.com/2011/12/lets-fly.html">blog.twitter.com/2011/12/lets-f…</a></p>— Twitter (@twitter) <a href="https://web.archive.org/web/20120106210844/https://twitter.com/twitter/status/144834438176583680" data-datetime="2011-12-08T17:43:15+00:00">December8, 2011</a></blockquote> </p> <p> Try it on your website by clicking “Embed this Tweet” from any permalink page in the newly launched Twitter. If you use WordPress or Posterous Spaces, it's easier than ever to embed Tweets. </p> </div> <div class="section"> <div> <img src="https://web.archive.org/web/20120106210844im_/https://dev.twitter.com/sites/default/files/images_blog/wordpress-logo-hoz-rgb.png" width="175" height="40" alt="" title=""/> </div> <p> WordPress bloggers can embed Tweets directly into their posts by simply copying the Tweet URL or using a familiar shortcode. Once published, WordPress instantly turns that URL or shortcode into an embedded Tweet. WordPress.com and WordPress VIP blogs have this functionality immediately, and Jetpack users will get it with their next update. For more news about WordPress and Twitter, check out founder, <a href="https://web.archive.org/web/20120106210844/http://en.blog.wordpress.com/2011/12/08/the-long-and-short-of-it/">Matt Mullenweg’s blog post</a>. </p> </div> <div class="section"> <div> <img src="https://web.archive.org/web/20120106210844im_/https://dev.twitter.com/sites/default/files/images_blog/posterous.jpg" width="175" height="60" alt="" title=""/> </div> <p> Posterous Spaces has also enabled embedded Tweets. People can easily add Tweets using their existing workflows: Posterous’ browser bookmarklet, email, the Posterous Web Editor, or their iPhone or Android Apps. For more information, read Posterous Spaces' <a href="https://web.archive.org/web/20120106210844/http://blog.posterous.com/introducing-embeddable-tweets">announcement on their blog</a>. </p> <p> These great integrations are made possible by our new oEmbed API, which developers can start building with today. For a detailed technical overview, please see the <a href="https://web.archive.org/web/20120106210844/https://dev.twitter.com/docs/embedded-tweets">Embedded Tweets</a> documentation. </p> </div> <div class="section"> <h2> Enhancing the Tweet and Follow Button </h2> <p> Finally, last week we announced a visual refresh to the Tweet and Follow Buttons, and today we’re introducing new ways to share with these buttons. </p> <p> <a href="https://web.archive.org/web/20120106210844/https://twitter.com/intent/tweet?button_hashtag=LetsFly&source=tweetbutton&text=Discover%20a%20faster%2C%20simpler%20Twitter.&url=https%3A%2F%2Ffly.twitter.com%2F" class="twitter-hashtag-button" data-lang="en" data-related="benward,binder">Tweet #LetsFly</a> </p> <p> <a href="https://web.archive.org/web/20120106210844/https://twitter.com/intent/tweet?screen_name=twitterapi" class="twitter-mention-button" data-lang="en" data-related="chanian,fat">Tweet to @twitterapi</a> </p> <p> The new #hashtag button tells your visitors there’s an interesting conversation happening on Twitter, and lets them join in with just one click. The @mention button encourages visitors to Tweet to your account, driving public conversation directly from your website. Get started and configure your own button experiences on our new <a href="https://web.archive.org/web/20120106210844/https://twitter.com/about/resources/">Twitter Buttons</a> website. </p> <p> Many exciting things are happening at Twitter. With 2012 just around the corner, stay tuned for more features we intend to bring to websites everywhere in the new year. </p> </div></div> <ul class="book-links"> <li class="previous"> ← <a href="/web/20120106210844/https://dev.twitter.com/blog/whispers-are-true">Previous blog post</a> </li> <li class="up"> <a href="/web/20120106210844/https://dev.twitter.com/blog/category/announcements">Announcements</a> </li> <li class="next"> <a href="/web/20120106210844/https://dev.twitter.com/blog/resources-mobile-developers">Next blog post</a> → </li> </ul> </div> </div> </div> <div id="footer-outer"> <div id="footer"> <a href="https://web.archive.org/web/20120106210844/http://twitter.com/twitterapi" data-show-count="false" class="twitter-follow-button" data-text-color="999999" data-link-color="0080A6">Follow @twitterapi</a><ul class="menu"><li class="leaf first"><a href="/web/20120106210844/https://dev.twitter.com/terms/api-terms" title="Developer Rules of the Road">API Terms</a></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/status" title="Twitter API Status">API Status</a></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/blog" title="Twitter Developer blog">Blog</a></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/discussions" title="Twitter Development discussions">Discussions</a></li> <li class="leaf"><a href="/web/20120106210844/https://dev.twitter.com/docs" title="Twitter development documentation">Documentation</a></li> <li class="leaf last"><a href="https://web.archive.org/web/20120106210844/http://www.acquia.com/" title="Acquia">A Drupal community site supported by Acquia</a></li> </ul> </div> </div> </div><script type="text/javascript"> <![CDATA[//><!]]> </script> </body> </html>