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

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

Linked Data & Semantic Web Technology Three ways to add the Tweet Button the iFrame version "Build your own" Tweet button version 4 <iframe allowtransparency="true" frameborder="0" scrolling="no“ src=" style="width:130px; height:20px;"> #custom-tweet-button a { display: block; padding: 2px 5px 2px 20px; background: url(' 1px center no-repeat; border: 1px solid #ccc; } <a href=" target="_blank">Tweet

Linked Data & Semantic Web Technology To add the Tweet Button using Javascript the easiest way to add the Tweet Button to your website 5 Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs");

Linked Data & Semantic Web Technology Properties for the Tweet Button which allow you to customize its behavior 6 Query String ParameterDescription urlURL of the page to share viaScreen name of the user to attribute the Tweet to textDefault Tweet text relatedRelated accounts countCount box position langThe language for the Tweet Button counturlURL to which your shared URL resolves hashtagsComma separated hashtags appended to tweet text sizeThe size of the rendered button

Linked Data & Semantic Web Technology Properties 7 <a href=" class="twitter-share-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); <a href=" class="twitter-share-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs");

Linked Data & Semantic Web Technology Properties which can be used by the Javascript Tweet Button 8 Data SourceShare query string data- attribute of anchor tag rel= attribute of a link tag Default Priority1234 URL to Tweeturldata-urlrel="canonical"HTTP Referrer via userviadata-viarel="me" Tweet texttextdata-text Content of the tag Recommended accounts relateddata-related Count box positioncountdata-counthorizontal Languagelangdata-langen URL to which your shared URL resolves counturldata-counturlthe url being shared Hashtagshashtagsdata-hashtags Sizesizedata-size

Linked Data & Semantic Web Technology Properties which can be used by the Javascript Tweet Button 9 <a href=" data-url=" class="twitter-share-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); <a href=" data-url=" class="twitter-share-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs");

Linked Data & Semantic Web Technology Positioning the Count Box to describe how many times the URL has been Tweeted 10 <a href=" data-count="vertical" class="twitter-share-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); <a href=" data-count="vertical" class="twitter-share-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); Value for the count propertynonehorizontalvertical Displays as

Linked Data & Semantic Web Technology Button Size “medium”, which is the default size, or “large” 11 <a href=" data-size="large" class="twitter-share-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); <a href=" data-size="large" class="twitter-share-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs");

Linked Data & Semantic Web Technology 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 12 data-related="anywhere:The Javascript API,sitestreams,twitter:The official account"

Linked Data & Semantic Web Technology Hashtag Buttons a Tweet button that specifies a hashtag using twitter- hashtag-button 13 <a href=" class="twitter-hashtag-button" data-lang="en">Tweet #LiST !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); <a href=" class="twitter-hashtag-button" data-lang="en">Tweet #LiST !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs");

Linked Data & Semantic Web Technology Tweet to Buttons a Tweet button that allows you to specify a user to mention using twitter-mention-button 14 <a href=" class="twitter-mention-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); <a href=" class="twitter-mention-button" data-lang="en">Tweet !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs");

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

Linked Data & Semantic Web Technology Add the Follow Button to your Website Using an IFRAME Using Javascript 16 <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi" style="width:300px; height:20px;"> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi" style="width:300px; height:20px;"> <a href=" class="twitter-follow-button“ data-show-count="false" !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs"); <a href=" class="twitter-follow-button“ data-show-count="false" !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=" fjs.parentNode.insertBefore(js,fjs); } (document,"script","twitter-wjs");

Linked Data & Semantic Web Technology Configure your Follow Button Javascript (link data-attribute)Query string parameter User to follow(in the anchor URL)screen_name Followers count displaydata-show-countshow_count Languagedata-langlang Widthdata-widthNot Supported Alignmentdata-alignNot Supported Show Screen Namedata-show-screen-nameshow_screen_name Sizedata-sizeNot Supported 17

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

Linked Data & Semantic Web Technology 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 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 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 21 { "type": "rich", "author_name": "Twitter API", "cache_age": " ", "height": null, "html": " 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 — Twitter API November7, 2011 \n ", "author_url": " "provider_name": "Twitter", "version": "1.0", "provider_url": " "url": " "width": 550 } { "type": "rich", "author_name": "Twitter API", "cache_age": " ", "height": null, "html": " 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 — Twitter API November7, 2011 \n ", "author_url": " "provider_name": "Twitter", "version": "1.0", "provider_url": " "url": " "width": 550 }

Linked Data & Semantic Web Technology References