Scribd Logo
Upload

Welcome to Scribd!

  • Tweet Button Docs

    Uploaded by

    mashabledocs
    22K views3 pages
    Tweet Button is a small widget which allows users to easily share your website with their followers. There are three ways you can add the Tweet Button to your webpage. Javascript Tweet Button requires adding a line of javascript and an HTML anchor to your webpage. Tweet iframe Tweet Button allows you to add a Tweet Button using an iframe.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Tweet Button is a small widget which allows users to easily share your website with their followers. There are three ways you can add the Tweet Button to your webpage. Javascript Tweet Button requires adding a line of javascript and an HTML anchor to your webpage. Tweet iframe Tweet Button allows you to add a Tweet Button using an iframe.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22K views3 pages

    Tweet Button Docs

    Uploaded by

    mashabledocs
    Tweet Button is a small widget which allows users to easily share your website with their followers. There are three ways you can add the Tweet Button to your webpage. Javascript Tweet Button requires adding a line of javascript and an HTML anchor to your webpage. Tweet iframe Tweet Button allows you to add a Tweet Button using an iframe.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    Tweet Button

    Overview
    The Tweet Button is a small widget which allows users to easily share your website with their followers. This
    page is for developers and users who wish to build their own Tweet Buttons. If you are looking for a quick way
    to build a Tweet Button for your website you can visit our Tweet Button Goodies Page.

    Ways to add the Tweet Button to your website


    There are three ways you can add the Tweet Button to your webpage.

    Javascript Tweet Button

    The easiest way to add the Tweet Button to your website is to use Javascript. This method requires adding a
    line of Javascript and an HTML anchor to your webpage. Using this method you can customise the Tweet
    Button using data attributes and query string parameters.

    Notice how the anchor element has a class of twitter-share-button. This is required for the Tweet
    Button javascript to know which anchor elements to convert to buttons.

    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>


    <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

    iFrame Tweet Button

    If you prefer you can add a Tweet Button using an iFrame. When using this method you have to use query
    string parameters to customise the Tweet Button’s behavior.

    <iframe allowtransparency="true" frameborder="0" scrolling="no"


    src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fdev.twitter.com"
    style="width:130px; height:50px;"></iframe>

    Custom Tweet Button

    If you want to be able to customise the way the Tweet Button looks you will want to use this basic format. When
    using this method you have to use query string parameters to customise the Tweet Button’s behavior.

    <a href="http://twitter.com/share" target="_blank" rel="external">Tweet</a>

    Properties
    There are several properties for the Tweet Button which allow you to customise it’s behavior. If the query string,
    data source or link source are not provided the Tweet Button will use the default values available from the web
    page and referrer information.

    To learn more about each property and to see ways you can use them check the examples further down this
    page.

    Properties which can be used by all types of Tweet Button

    The properties in this table can be used by the javascript, iframe and custom types of Tweet Button. Each
    property is a query string parameter for the http://twitter.com/share URL.

    Query String Parameter Description


    url URL of the page to share
    via Screen name of the user to attribute the Tweet to
    text Default Tweet text
    related Related accounts
    count Count box position

    Properties which can be used by the Javascript Tweet Button

    The properties in this table can only be used by the javascript Tweet Button. When used they provide additional
    places the Tweet Button can look for information on what to pre fill the Tweet with. The Tweet Button looks for
    property values in the preference order given in the table. For example when looking for the URL to use, the
    Tweet Button will:

    1. Look for url in the share link query string.


    2. If not found, look for the data-url attribute of the a tag
    3. If not found, look for the rel="canonical" link tag
    4. If not found use the URL of the webpage

    Data Source Preference Order URL to Tweet Screen name of Default Tweet text Related accounts Count box
    the user to position
    attribute the Tweet
    to
    Share query string 1 url via text related count
    data- attribute of 2 data-url data-via data-text data-related data-count
    a tag
    rel= attribute of a 3 rel="canonical" rel="me"
    link tag
    Default 4 Webpage URL Content of the horizontal
    <title> tag

    Positioning the count box


    The count box shows how many times the URL has been Tweeted. You can choose to display or hide the
    count box, or place it above or next to the Tweet Button.

    For the iFrame Tweet Button the position of the count box is controlled by setting the value of the count
    property in the sharing URL.

    For the javascript Tweet Button you can use the data-count property instead of adding count to the URL.
    The values for the property remain the same.

    When no value is given for the count box the Tweet Button will default to horizontal.

    count value none horizontal vertical

    Examples
    The examples that follow show different ways you can use the Tweet Button. The code to produce the example
    is also given so you can copy and paste.

    These examples are real Tweet Buttons. If you press the button you will see a real Tweet Box.

    Default Tweet Button

    The default Tweet Button works without any configuration or parameters. In this example the Tweet Button will
    use the URL of the current webpage and the content of the <title> element.

    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>


    <div>
    <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
    </div>

    Tweet Button configured using query string parameter

    Query string configuration can be used in the javascript, iframe and custom types of the Tweet Button. For each
    property you should URL encode the value you are sending.

    In this example we’ll be setting the following values. Notice how the url and text properties are URL
    encoded:

    url: http%3A%2F%2Fdev.twitter.com
    via: twitterapi
    text: Checking%20out%20this%20page%20about%20Tweet%20Buttons
    related: twitter,anywhere:The Javascript API

    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>


    <div>
    <a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com&amp;via=twitterapi&amp;text=Checking%20out%20this%20page%20
    </div>

    Tweet Button configured using data attributes

    Whilst query string parameters are a convenient way to share your webpage they can make your anchor tag
    very long. A long URL is difficult to maintain, especially when you have to URL encode the parameters.

    To make things easier the javascript Tweet Button allows you to supply data attributes to your URL. These
    data attributes take the same values and cause the same Tweet Button behaviour as the query string
    parameters. The difference is they are attributes of the anchor tag, not the URL.

    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>


    <div>
    <a href="http://twitter.com/share" class="twitter-share-button"
    data-url="http://dev.twitter.com"
    data-via="twitterapi"
    data-text="Checking out this page about Tweet Buttons"
    data-related="twitter,anywhere"
    data-count="vertical">Tweet</a>
    </div>

    Build Your Own Tweet Button

    <style type="text/css" media="screen">


    #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    background: url('http://a0.twimg.com/images/favicon.gif') left center no-repeat;
    border: 1px solid #ccc;
    }
    </style>
    <div id="custom-tweet-button">
    <a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com"
    rel="external"
    target="_blank">Tweet</a>
    </div>

    You might also like