Development of Twitter Application #2 - Twitter for Websites

Linked Data &
Semantic Web
Technology

Development of Twitter Applications
Part 2. Twitter for Websites

Dr. Myungjin Lee

Twitter for Websites
• Twitter Buttons
– the Tweet Button
– the Follow Button

• Embedded Tweets

2
Linked Data & Semantic Web Technology

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

• User Interaction
1. 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
provided 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.

3

Three ways to add the Tweet Button
• the iFrame version
<iframe allowtransparency="true" frameborder="0" scrolling="no“
src="https://platform.twitter.com/widgets/tweet_button.html" style="width:130px;
height:20px;">
</iframe>

• "Build your own" Tweet button version
<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>

4

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>

5

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

6

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){
js.id=id;
}
}
</script>

7

Properties which can be used by the Javascript Tweet Button

data- attribute of rel= attribute of a
Data Source Share query string Default
anchor tag link tag
Priority 1 2 3 4

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

via user via data-via rel="me"
Content of the <title>
Tweet text text data-text
tag
Recommended
related data-related
accounts
Count box position count data-count horizontal

Language lang data-lang en
URL to which your
counturl data-counturl the url being shared
shared URL resolves
Hashtags hashtags data-hashtags

Size size data-size

8

Properties which can be used by the Javascript Tweet Button

data-url="http://kdata.kr" class="twitter-share-button" data-lang="en">Tweet</a>
<script>
!function(d,s,id){
js.id=id;
}
}
</script>

9

Positioning the Count Box
• to describe how many times the URL has been Tweeted
data-count="vertical" class="twitter-share-button" data-lang="en">Tweet</a>
<script>
!function(d,s,id){
js.id=id;
}
}
</script>

Value for the count property none horizontal vertical

Displays as

10

Button Size
• “medium”, which is the default size, or “large”
data-size="large" class="twitter-share-button" data-lang="en">Tweet</a>
<script>
!function(d,s,id){
js.id=id;
}
}
</script>

11

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"

12

Hashtag Buttons
• a Tweet button that specifies a hashtag using twitter-
hashtag-button
<a href="https://twitter.com/share?via=IssueCollector&button_hashtag=LiST"
class="twitter-hashtag-button" data-lang="en">Tweet #LiST</a>
<script>
!function(d,s,id){
js.id=id;
}
}
</script>

13

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>
<script>
!function(d,s,id){
js.id=id;
}
}
</script>

14

Follow Button
• a small widget which allows users to easily follow a Twitter
account from any webpage

15

Add the Follow Button to your Website
• Using an IFRAME
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi"
style="width:300px; height:20px;">
</iframe>

• Using Javascript
<a href="https://twitter.com/twitterapi" class="twitter-follow-button“
data-show-count="false" lang="en">Follow @twitterapi</a>
<script>
!function(d,s,id){
js.id=id;
}
}
</script>

16

Configure your Follow Button

Javascript (link data-attribute) 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

17

Easiest Way to Make Button

18

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

19

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

20

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/oembed
https://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 }
21

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

22

Development of Twitter Application #2 - Twitter for Websites

Recommended

Recommended

More Related Content

Similar to Development of Twitter Application #2 - Twitter for Websites

Similar to Development of Twitter Application #2 - Twitter for Websites (20)

More from Myungjin Lee

More from Myungjin Lee (20)

Recently uploaded

Recently uploaded (20)

Development of Twitter Application #2 - Twitter for Websites