In this tuts I’m going to show now how to add or create embeddable timelines twitter api in your website, make it easy to syndicate any public Twitter timeline to your website with one line of code.
Create an embedded timeline from your widgets settings page on twitter.com, or choose Create an embedded timeline from the options menu on profile, search and collection pages. You must should login by your Username && Password on your account.Just like timelines on twitter.com, embeddable timelines are interactive and enable your visitors to reply, Retweet, and favorite Tweets directly from your pages. You can Embedded Timeline individual users, User can added at any time this he/her Websites. Each user timeline includes a follow button in the header, allowing website visitors to follow the account with one-click
Here’s @raselkhancse timeline embedded directly into this page:
This tweets create’s are any public Twitter user, and displays that user’s favorited Tweets.
All the list display the each user by reply their post or comment.
Here’s an example embed code:
<a href="https://twitter.com/raselkhancse" data-widget-id="YOUR-WIDGET-ID-HERE"> Tweets by @raselkhancse </a>
Here the anchor link include attributes href & data-widget, you can many attributes added in your future application like as height, width, data-theme, data-link-color, data-related,
width="300" height="500" data-widget-id="YOUR-WIDGET-ID-HERE" data-screen-name="raselkhan" data-show-replies="false" data-tweet-limit="5" data-list-owner-screen-name="raselkhan" data-list-slug="twitter-dev-advocates"
This attributes data-widget indicate in your application id i.e ( data-widget-id=”653452336445443033455584″ ) you’ll get this id from in your account, your ID will showing different number
You should configure a timeline widget from your settings page as normal. Then, use the following attributes to override the source timeline:
- Users: Add the data-screen-name or data-user-id attribute for the user whose timeline you want to display. You can also specify data-show-replies=”true” to toggle the ‘Show Replies’ option on a per-timeline basis.
- Collections: Add a data-custom-timeline-id attribute for the custom collection timeline you want to render. Use only the integer portion of the timeline ID.
- Favorites: Similarly to user timelines, add a data-favorites-screen-name or data-favorites-user-id attribute for the favorites timeline you want to render.
- Lists: To render a list, you must specify the list owner—data-list-owner-screen-name or data-list-owner-id—and a list identifier, data-list-id or data-list-slug.
All Like other components of the Twitter for Websites suite, embeddable timelines offer excellent mobile browser support:
- Works on major smartphone browsers.
- Interface is adaptive for touch (e.g. actions will always be visible, and spacing adjusted.)
- Graphics optimized for Retina and other high-density displays.
- Uses web intents for interaction, which also are designed adaptively for mobile.
- Mobile device support is automatic, using the same embed code.