A lot of people don’t know that there is an easy way to embed tweets on your site with all the formatting and styling so they look just like on twitter.com. In addition, tweet will also contain avatar, reply,favorite,follow and other buttons so it is also functional.
For example look at this embedded tweet:
just setting up my twttr
— Jack Dorsey (@jack) March 21, 2006
Looks nice, doesn’t it? Good news is that it is very simple but you need to go to twitter.com and follow these steps:
1. When you see a tweet in your stream that you would like to embed simply click on the date (when the tweet was posted) link – in our example above that link/date is “22 Mar 06”.
2. When the tweet is displayed click on the “Embed this Tweet” link and pop-up box will appear.
3. Copy the entire HTML code and paste it into the source (HTML) code of your page anywhere you want (inside body tag).
This is how the code for above tweet looks like:
<blockquote class="twitter-tweet"> <p>just setting up my twttr</p>— Jack Dorsey (@jack) <a href="https://twitter.com/jack/status/20" data-datetime="2006-03-21T20:50:14+00:00">March 21, 2006</a> </blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Keep an eye on this line :
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
This JavaScript,which is fetched from twitter website, makes your tweet embed look all nice like in our example above. If you forget to copy it your embedded tweets will not be styled properly.
If you embed only one tweet per page then you can include this line after blockquote. If you embed several tweets then include this line only once, somewhere at the bottom of the page or inside meta tag.