Twitter Feedstream Your Twitter Feed To Your Site!

Twitter Feed: Twitter feed is when the Twitter aggregator aggregates all the relevant and required content from Twitter using hashtags, handle, keywords, lists, etc. Into a single feed for you to embed on your website. Why You Should Embed Twitter Feed On Website. Twitter co-founder Jack Dorsey uses the power of his own website to answer frequently asked questions about one of the world's most popular social media platforms, Twitter! Is the Twitter bird's.

People all over the world use Twitter and many other social media websites as a way to advertise their businesses and products. If this is something you do, one of the important things you must do is to connect your website to your Twitter so people who are interested in your product or service can get quick and easy access to your website.
Open your Twitter app. If you’ve ever wondered about that sparkly icon on the upper right corner is, well, that’s your magic button. Tap it and you’ll get the option to “See latest Tweets.

You have started using Twitter; and you now regularly update your account with useful and relevant tweets. Great! Now you want to let all of your website visitors know about your mastery of Twitter. I’ve put together this tutorial to show you how to add your Twitter feed to your website.

Official Twitter Feed Widget

The most direct approach is to put the official Twitter widget on your website. The widget can be embedded on any website that allows the use of JavaScript (which is most websites). The widget is also smart enough to handle some size adjustment if you are using a responsive website.

Tweets by @Anphira

One of the main advantages to using the widget directly from Twitter is that Twitter will keep it up to date with their changes. If they make a change in the future, you have a good likelihood that your widget will continue to work. The widget also has enough customizations that can be tailored to suit most needs.

Twitter Feedstream Your Twitter Feed To Your Site Website

The downside to using the widget is that you do need to have at least a copy/paste familiarity with HTML. If you want a no HTML knowledge approach then you will need to use a plugin for your particular CMS.

Setting Up Twitter Widget

Step 1: Go to Twitter Settings

Go to Twitter.com and if you aren’t already logged in with the account you want to use, log in. Once logged in you will see a wheel symbol in the upper right. Click on the wheel symbol and select Settings.

Step 2: Select Twitter Widgets

Once you are in Settings you will see a menu on the left side. The last item is Widgets, click on Widgets.

Step 3: Create New Twitter Widget

To create a new Twitter widget, click on Create New in the upper right.

Step 4: Configure Widget

For this tutorial we won’t be changing any of the standard options, but I’ll briefly cover what they are.

Timeline source: We’ll be using the ‘User timeline’. Favorites would display recent items that a user had favorited. List would display tweets from a particular list (from your settings > lists). Search would display recent tweets matching a specific search criteria. Custom would allow other options.
Username: This is the username whose most recent tweets will be displayed. Your currently logged in username will be displayed. You can change this if desired.
Options: You can include or exclude replies to your tweets. You can choose to automatically expand photos or leave them as links. Auto-expanding photos will cause your timeline vertical size to vary.
Height: If you want to specify a specific height for your widget you can do so here. If you don’t specify any height than the widget will be bounded by the dimensions of the div containing it.
Theme: Light uses dark text on a light background. If you are going to be placing the widget somewhere that has a dark background and you want light text, select the Dark option.
Link Color: You can customize the color used for links. If your website has red links for example you may want to also have your Twitter feed use red links.

Twitter Feedstream Your Twitter Feed To Your Site Account

Once you have the settings you want, click on ‘Create widget’.

Twitter Feed To Website

Step 5: Copy Code

After you click on Create widget a new box will appear on your screen with code in it. This code will already be selected so all you need to do is copy the code to your clipboard (Edit > Copy).

You can always access your widget later and copy the code by just going to your Twitter account > Settings > Widgets and clicking on the appropriate widget.

Placing Twitter Feed Widget

Now that you have the code for your widget, you need to place that code on your website. If you use a CMS, then you could tuck the code away neatly in a CMS widget. If you don’t use a CMS or want to place the Twitter feed in another location, just paste the Twitter code where you would like it. In my case I use WordPress, so I’ve put the code in a WordPress text widget in the footer.

Client Side Configurations

The official guide to configuring your Twitter feed widget is available from Twitter Developers. I’ve put together a list of the commonly desired customizations and how they look when added to your code.

Dimensions

For the most part you shouldn’t need to explicitly set the width and height of the widget, it will detect the size of its containing div and match those dimensions. This is particularly helpful if your website is responsive.

However, you should be aware of a few limits. The minimum width is 180px and the maximum width is 520px. The normal minimum height is 200px. I say normal minimum because if you set the number of tweets to 1, the widget will size itself to accommodate only the most recent tweet. That single tweet may result in less than 200px in height.

To explicitly set the size dimensions of a widget, include width and height in the anchor tag.

<a width='300' height='500' href='https://twitter.com/twitterapi'>Tweets by @twitterapi</a>

Link Color

If you didn’t set your desired link color in your widget you can set it here (or if someone else sent you the code and you want to override the color). As an example, I’ll use red as the link color (hex value ff0000). Add data-link-color='#ff0000' to the anchor tag.

<a href='https://twitter.com/twitterapi'>Tweets by @twitterapi</a>

Border Color

Here you can set the border color for your widget. If you want to change the color from grey to something that matches your site style better you can set it here. As an example, I’ll use green (hex value 00ff00). Add data-border-color='#00ff00' to the anchor tag.

<a href='https://twitter.com/twitterapi'>Tweets by @twitterapi</a>

Tweet Limit

Depending on where and how you want to use your widget, you may want to limit it to a certain number of tweets. For example just the most recent tweet is a common use. For this you can set the tweet limit by adding data-tweet-limit='1' to the anchor tag.

<a href='https://twitter.com/twitterapi'>Tweets by @twitterapi</a>

Twitter Feedstream Your Twitter Feed To Your Site Without

Layout & Background

The standard layout for the widget is a header, the tweets, and a footer. The header at the top says whose feed it is and includes a follow button. The main body of tweets are displayed with a scroll bar if needed. The footer contains a tweet to link. Finally, the entire widget has a white or black background color depending on the theme you chose.

The chrome property allows you to change these options. If you want to change a default, then you need to include the chrome. If you want to change more than option, just separate your choices by a space. For example to remove the footer and make the background transparent you can add data-chrome='nofooter transparent' to the anchor tag.

noheader: Removes the header.
nofooter: Removes the footer.
noborders: Removes the outside border and the internal borders which separate tweets from each other and the header & footer from the tweets.
noscrollbar: Removes the scrollbar.
transparent: Removes the background color. The only way to set a specific background color for the widget is to make the background transparent and put the widget in a div with a background color.

<a href='https://twitter.com/twitterapi'>Tweets by @twitterapi</a>

Final Widget Look

<a href='https://twitter.com/Anphira'>Tweets by @Anphira</a> Followed by the javascript code that Twitter provides you.

Conclusion

Adding a Twitter feed to your website is pretty straight forward as long as you can do some basic HTML copy & paste. Hopefully this tutorial has made the process straightforward and easy for you to implement, but if you need assistance making this modification or others to your website, drop us a line!

Posted February 11, 2018 by Sheraz Ali in Twitter

Last Updated on

If you have decided to read this, that probably means you have first decided that yes, you do indeed want to add your Twitter feed to your website. Typically, in Twitter terminology, your Twitter feed is your Twitter timeline. In case, you are not sure what the benefits are of doing this are, lets review them here:

Benefits of Twitter Feed

You can let your readers know what you are up to by tweeting about it. Once it shows up on your Twitter, it will also be posted automatically on your website. An efficient and fast way to know a little about the personal life of, lets say, a new writer whose blog you have been following recently, right?
Adding Twitter feed to your website will make your readers reach out to you at a much greater pace.
It allows you to blog and tweet…side by side.
Your skills as a blogger will enhance exponentially because you will have to be catering the needs of readers both from Twitter and your blog; the audience on Twitter might not always be the same people who read your blog. There is always chance for diversity.
If someone is not comfortable voicing their thoughts to you on something you posted on your blog yet they want to interact with you nonetheless, you will be providing them another platform, Twitter, to do that on.
A pool of ideas, cultures, languages, beliefs and creativity is accumulated at your fingertips when you run a blog linked with Twitter. The more, the merrier, right?
Last but not the least; your blog’s stats will boost up super-fast when it will be accessible to Twitter users simultaneously. These users, in turn, will help you make your voice heard by reposting/commenting/liking your posts via Twitter. This is a great way to make your blog’s content reach an audience that it didn’t have before.

In accordance with the Twitter Developers terms, an embedded Twitter timeline comprises of two parts: an embed code linking your webpage to Twitter timeline and the Twitter for Websites JavaScript to alter the embedded link to a full timeline.

Hows to Add Twitter Feed on your Website

So how is it done? Something called an embedded timeline widget is used to add your timeline to a website/blog. It has four types, all of which resemble timelines on Twitter itself:

Profile widget: used to display public Tweets from any Twitter user.
Likes widget: used to display all Tweets a certain Twitter user has liked.
List widget: used to display Tweets from public your own lists or lists you have subscribed to.
Search widget: used to display custom-built search results in real time, which are good for conferences, brands and live events etc.

Here is a quick guide on how to make your blog look amazing by adding your Twitter feed on it:

2. Click on your profile picture on the right > Setting and privacy.

3. Select Widgets from the options on the left in Settings.

4. Click Create new.

5. Choose the type of embedded timeline you want to start on to configure it;

1. - For Profile, enter the username of the account whose Tweets you want to display.
  - For Likes, enter the username of the account whose likes you want to display.
  - For List, select a public list that you own and/or subscribe to in the drop-down menu.
  - For Search, enter your search query (for advanced searches, use Twitter’s search operators).

6. Make sure to select Safe mode if you want to exclude sensitive content, profanity etc. You can change these setting from Setting and privacy > Privacy and safety.

7. If you don’t want to select individual items from the dropdown list, there is also an Embedded Timeline

8. To embed a timeline using the Embedded Timeline option, first choose a Twitter profile’s link you want embedded on your website (lets take Trump’s Twitter profile as an example here) and copy paste it in the URL box:

9. Click Preview to get your embedded profile’s link and also to view the embedded profile itself. Copy the code Twitter provides you, paste it on your blog and valah, you’ve embedded a Twitter profile on your website!

10. To customize the design, go to set customization options.

Once you’re done customizing your widget, you can view the sample or embed it finally.

11. When you embed your widget, Twitter Publish prompt will open:

12. So far, you know what a Twitter embedded profile looks like. But your alternative option is to create a Twitter profile button, which looks like this. It’s entirely upto you whether you want to embed an entire Twitter timeline on your site or just include a Twitter button, which will redirect users on your site to that specific Twitter profile.

13. Lastly, when you’ve chosen the button you’d like to create, copy paste the code Twitter has generated for you into your website’s HTML.

FAQ

Does an embedded timeline show private tweets too?

No, embedded timelines only show content made public by their respective Twitter profile users.

Is there any way to include protected tweets in my embedded Twitter timeline?

No. Content from users having protected Tweets isn’t compatible with any Twitter embedded timeline widgets.

Twitter Feedstream Your Twitter Feed To Your Site Free

When Twitter displays Note: By using Twitter embedded timelines, you agree to the Developer Rules of the Road, what does this mean?

It is essentially a collection of rules which certify that you do not violate, in any way, the Twitter content you are embedding on your site. In the case of embedding another Twitter user’s profile, these rules make sure you understand you are not allowed to alter the embedded content of that user.

Is the widget permanent?

Not at all. You can cut the link anytime from your website and remove the Twitter timeline.

About Sheraz Ali

An established copywriter, with a longstanding experience in a vast array of industries, including but not limited to spirituality, technology, cannabis and travel.
View more articles by Sheraz Ali

The Conversation

Follow the reactions below and share your own thoughts.