Embed tweets as widget in HTML pages

In this blog we will show you how to embed tweets as widget in HTML pages. We have received many requests to show the process of embedding tweets. Before we start we must have our own Twitter account from which we will embed the latest tweets.

If you do not have any Twitter account so far, you can signup in Twitter and start posting your tweets. For each and every Twitter accounts there are unique urls. Like we have our url
https://twitter.com/CreativeSchola2

Embed a single Tweet

Go to any Twitter account url and choose any tweet which you want to embed in your HTML page. You will find an down arrow to the top right corner of every single tweet. If you click it a drop down menu will come with the option "Embed Tweet".

Click "Embed Tweet" option, you will have the HTML embed code with you along with the embed preview. Just copy it and paste at your desired location. You are done!

Embed multiple Tweets

To embed multiple tweets in your page, you have to go to Twitter publish link (https://publish.twitter.com/#) where you will be asked to enter your Twitter url. So we will simply paste our account url to the type box, and press go.

You will be scroll down to display options. Choose "Embedded Timeline" option, you can now have a HTML multiple tweets embed code with you. Just copy it and paste to your HTML page. Or you can customize the tweets design by clicking "Set Customization Options".

If you embed the code it will show all the tweets through out the page, as there will be no limit of showing the tweets.

You can control the embedded tweets by several data attribute options. You will find them in the official Twiiter Developer (https://dev.twitter.com/web/embedded-tweets/parameters) site.

We are managing our tweets as per our need. Here are the data attribute options.

• data-tweet-limit="2" => Limit the Tweets, will show latest 2 tweets
• data-chrome="noheader, nofooter, transparent, noborders" => Removes header, footer, borders etc.
• data-theme="dark" => Tweets background color will be black
• data-link-color="#1674D1" => All links color will be blue

That's it. We have embedded our Tweets to our HTML pages. If you like the post do not forget to share it with everyone. Thank you.