• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Development of Twitter Application #2 - Twitter for Websites
 

Development of Twitter Application #2 - Twitter for Websites

on

  • 725 views

This series of slides describes how to develop a twitter application.

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

Statistics

Views

Total Views
725
Views on SlideShare
723
Embed Views
2

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Development of Twitter Application #2 - Twitter for Websites Development of Twitter Application #2 - Twitter for Websites Presentation Transcript

    • Linked Data & Semantic Web TechnologyDevelopment of Twitter Applications Part 2. Twitter for Websites Dr. Myungjin Lee
    • Twitter for Websites • Twitter Buttons – the Tweet Button – the Follow Button • Embedded Tweets 2Linked 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 arent 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. 3Linked Data & Semantic Web Technology
    • 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> 4Linked Data & Semantic Web Technology
    • 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> 5Linked Data & Semantic Web Technology
    • 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 6Linked Data & Semantic Web Technology
    • 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> 7Linked Data & Semantic Web Technology
    • 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 8Linked Data & Semantic Web Technology
    • 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> 9Linked Data & Semantic Web Technology
    • 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 10Linked Data & Semantic Web Technology
    • 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> 11Linked 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 data-related="anywhere:The Javascript API,sitestreams,twitter:The official account" 12Linked Data & Semantic Web Technology
    • 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> 13Linked Data & Semantic Web Technology
    • 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> 14Linked Data & Semantic Web Technology
    • Follow Button • a small widget which allows users to easily follow a Twitter account from any webpage 15Linked Data & Semantic Web Technology
    • 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> 16Linked 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 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 17Linked Data & Semantic Web Technology
    • Easiest Way to Make Button 18Linked Data & Semantic Web Technology
    • Embedded Tweets • to take any Tweet and embed it directly in to the content of your article or website 19Linked 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 20Linked 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 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 } 21Linked Data & Semantic Web Technology
    • 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 22Linked Data & Semantic Web Technology