Development of Twitter Application #2 - Twitter for Websites

Linked Data &Semantic WebTechnology

Development of Twitter Applica-

tionsPart 2. Twitter for Websites

Dr. Myungjin Lee

2Linked Data & Semantic Web Technology

Twitter for Websites

• Twitter Buttons– the Tweet Button– the Follow Button

• Embedded Tweets


Tweet Button

• a small widget which allows users to easily share your website with their followers

• User Interaction1. The user clicks the Tweet Button

2. The user is asked to login to Twitter if they aren't already. If the user is new to Twitter they can also create an account.

3. The Share Box appears already completed with the information pro-vided in the properties of the Tweet Button. The user can change the content if they wish.

4. Posting of the Tweet is confirmed and the user is suggested a maximum of two accounts they may wish to follow as provided in the properties of the Tweet Button.

5. The Share Box remains open until the user presses close.


Three ways to add the Tweet Button

• the iFrame version

• "Build your own" Tweet button version

<iframe allowtransparency="true" frameborder="0" scrolling="no“ src="https://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:20px;"></iframe>

<style type="text/css" media="screen">#custom-tweet-button a {display: block;padding: 2px 5px 2px 20px;background: url('https://twitter.com/favicons/favicon.ico') 1px center no-repeat;border: 1px solid #ccc;}</style><div id="custom-tweet-button"><a href="https://twitter.com/share?url=https%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button" target="_blank">Tweet</a></div>


To add the Tweet Button using Javascript

• the easiest way to add the Tweet Button to your website

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a><script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script>


Properties

• for the Tweet Button which allow you to customize its behavior

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

lang The language for the Tweet Button

counturl URL to which your shared URL resolves

hashtags Comma separated hashtags appended to tweet text

size The size of the rendered button


Properties

<a href="https://twitter.com/share?url=http://li-st.com&via=IssueCollector"class="twitter-share-button" data-lang="en">Tweet</a>

<script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script>


Properties which can be used by the Javascript Tweet Button

Data Source Share query string data- attribute of anchor tag

rel= attribute of a link tag Default

Priority 1 2 3 4

URL to Tweet url data-url rel="canonical" HTTP Referrer

via user via data-via rel="me"

Tweet text text data-text Content of the <title> tag

Recommended accounts related data-related

Count box position count data-count horizontal

Language lang data-lang en

URL to which your shared URL resolves counturl data-counturl the url being shared

Hashtags hashtags data-hashtags

Size size data-size


Properties which can be used by the Javascript Tweet Button

<a href="https://twitter.com/share?url=http://li-st.com&via=IssueCollector"data-url="http://kdata.kr" class="twitter-share-button" data-lang="en">Tweet</a>



Positioning the Count Box

• to describe how many times the URL has been Tweeted

<a href="https://twitter.com/share?url=http://li-st.com&via=IssueCollector"data-count="vertical" class="twitter-share-button" data-lang="en">Tweet</a>


Value for the count property none horizontal vertical

Displays as


Button Size

• “medium”, which is the default size, or “large”

<a href="https://twitter.com/share?url=http://li-st.com&via=IssueCollector"data-size="large" class="twitter-share-button" data-lang="en">Tweet</a>



Related Accounts

• to suggest accounts for a user to follow once they have sent a Tweet using Tweet Button

• screen names separated using a colon

data-related="anywhere:The Javascript API,sitestreams,twitter:The official account"


Hashtag Buttons

• a Tweet button that specifies a hashtag using twitter-hash-tag-button

<a href="https://twitter.com/share?via=IssueCollector&button_hashtag=LiST"class="twitter-hashtag-button" data-lang="en">Tweet #LiST</a>



Tweet to Buttons

• a Tweet button that allows you to specify a user to mention using twitter-mention-button

<a href="https://twitter.com/share?screen_name=IssueCollector"class="twitter-mention-button" data-lang="en">Tweet to @IssueCollector</a>



Follow Button

• a small widget which allows users to easily follow a Twitter ac-count from any webpage


Add the Follow Button to your Website

• Using an IFRAME

• Using Javascript

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi" style="width:300px; height:20px;"></iframe>

<a href="https://twitter.com/twitterapi" class="twitter-follow-button“data-show-count="false" lang="en">Follow @twitterapi</a>



Configure your Follow Button

Javascript (link data-at-tribute)

Query string parameter

User to follow (in the anchor URL) screen_name

Followers count display data-show-count show_count

Language data-lang lang

Width data-width Not Supported

Alignment data-align Not Supported

Show Screen Name data-show-screen-name show_screen_name

Size data-size Not Supported


Easiest Way to Make Button


Embedded Tweets

• to take any Tweet and embed it directly in to the content of your article or website


How to Embed a Tweet on your Website

1. Click the “More” Tweet action and select “Embed Tweet”

2. A dialog will appear providing you with an HTML embed code.

3. Copy and paste this directly into your article


Embedded Tweets for Developers

• Twitter supports an oEmbed endpoint.

• To render a Tweet using oEmbed– Obtain an URL to or ID number of the Tweet it wants to render.– Make a request to the GET statuses/oembed endpoint, passing the Tweet URL or ID as

a query parameter.

• GET statuses/oembedhttps://api.twitter.com/1/statuses/oembed.json?id=133640144317198338&align=center

{ "type": "rich", "author_name": "Twitter API", "cache_age": "31536000000", "height": null, "html": "<blockquote class=\"twitter-tweet tw-align-center\"><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\">November7, 2011</a></blockquote>\n<script src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>", "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 }

https://dev.twitter.com/docs/api/1/get/statuses/oembed

https://dev.twitter.com/docs/api/1/get/statuses/oembed


References• https://dev.twitter.com/docs/twitter-for-websites• https://dev.twitter.com/docs/tweet-button• https://dev.twitter.com/docs/follow-button• https://dev.twitter.com/docs/embedded-tweets• https://twitter.com/about/resources/buttons