The tweet button allows a user to tweet about the specific content on the page - usually sending some sample text and the url for twitter to then interpret into a twitter card.


This can be invoked via a button or through JavaScript

  • twttr.widgets.createTweet
  • twttr.widgets.createShareButton

If we use the default .twitter-share-button class then the Twitter JS will override the control and add the Twitter button and suck elements from data- attributes.

To style the button replace .twitter-share-button with .twitter


= codeBlender "tweet-button", "social/twitter/tweet-button"
<a class='twitter' data-lang='translation missing: en.twitter.locale' data-size='default' data-url='' href=';lang=translation missing: en.twitter.locale' ng-click='root.twitterShare()'>
<span class='fa fa-twitter-square fa-fw'></span>


Tweet through JavaScript

= codeBlender "tweet-button", "social/twitter/tweet-button", { id: "twitterShare", url: "", text: "Tweet", type: "javascript" }
<a href="javascript:;" class="twitterShareButton" data-url="" data-text="Tweet"><span class='fa fa-twitter-square fa-fw fa-3x'></span>


Tweet through JavaScript

= codeBlender "tweet-button", "social/twitter/tweet-button", { url: "", text: "Tweet", type: "link" }
<a href=""><span class='fa fa-twitter-square fa-fw fa-3x'></span>


Resources Useful websites and tutorials


Task Date
Provide a sample of the JS version - using the promises
Complete with the full set of parameters