This series of slides describes how to develop a twitter application. Second class discusses Twitter API for developing website applications.

1. Linked Data &
Semantic Web
Technology
Development of Twitter Applications
Part 2. Twitter for Websites
Dr. Myungjin Lee

2. Twitter for Websites
• Twitter Buttons
– the Tweet Button
– the Follow Button
• Embedded Tweets
2
Linked Data & Semantic Web Technology

3. 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
Linked Data & Semantic Web Technology

4. 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
Linked Data & Semantic Web Technology

5. 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
Linked Data & Semantic Web Technology

6. 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
Linked Data & Semantic Web Technology

7. 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>
7
Linked Data & Semantic Web Technology

8. 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
Linked Data & Semantic Web Technology

9. 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>
<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>
9
Linked Data & Semantic Web Technology

10. 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>
<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>
Value for the count property none horizontal vertical
Displays as
10
Linked Data & Semantic Web Technology

11. 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>
<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>
11
Linked Data & Semantic Web Technology

12. 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
Linked Data & Semantic Web Technology

13. 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){
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>
13
Linked Data & Semantic Web Technology

14. 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){
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>
14
Linked Data & Semantic Web Technology

15. Follow Button
• a small widget which allows users to easily follow a Twitter
account from any webpage
15
Linked Data & Semantic Web Technology

16. 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){
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>
16
Linked Data & Semantic Web Technology

17. 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
Linked Data & Semantic Web Technology

18. Easiest Way to Make Button
18
Linked Data & Semantic Web Technology

19. Embedded Tweets
• to take any Tweet and embed it directly in to the content of your
article or website
19
Linked Data & Semantic Web Technology

20. 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
Linked Data & Semantic Web Technology

21. 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>&mdash; 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
Linked Data & Semantic Web Technology

22. 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
Linked Data & Semantic Web Technology