How to embed Twitter tweets in your website or blog posts

Embed Twitter tweets in websiteDo you wish to show your tweets into your blog post or may be somewhere in your website like in pages, footer or in sidebar widgets? The actual way to show off your tweet in your website is simply by embedding them and not by taking a screenshot of the tweet and placing it. As a blogger you would have the habit of following some famous personalities and at times your may wish to embed one of their tweets in to your website in order to convey the message to your site visitors. Embedding a tweet in your website or blog post is very simple. Here we will show you how to embed Twitter tweets.

An embedded tweet in your web page is just a single tweet that comprises all those Twitter functionalities. When a tweet is embedded into your website people will see the tweet timestamp, they can reply to the tweet, retweet the tweet, favorite the tweet as well as they can follow the user. Take a look at the embedded tweet below. Embedding a tweet is not a difficult task, all you have to do is copy the embed code from Twitter and paste it in your website. Here we will see how to embed Twitter tweets on both wordpress as well as Blogger.

How to embed Twitter tweets

First of all go to Twitter.com and choose the tweet that you are willing to embed in your website, for example you can choose your own tweet or some others tweet. Next at the bottom of each and every tweet you will see four options such as reply, retweet, favorite and more. To embed a tweet you have to click on more option, select embed tweet then you will be provided with an embed code and below that you will also see the preview of the tweet. Simply copy the embed code and paste it in your website, that’s it.

embedding Twitter tweets in wordpress

Embed tweets in wordpress and Blogger

Embedding tweets in wordpress: –

Luckily in wordpress you don’t have to use any plugins and you don’t have to grab the embed code and paste it. Just select the tweet, click on view details links which will open that particular tweet in a separate page. Now simply copy the URL of the tweet and paste it in any of your blog posts and then publish it.

https: //twitter.com/BlogTimeNow/status/483828256664076288

Embedding tweet in Blogger blog:-

In Blogger you have to copy the embed code and paste it in HTML editor and not on compose mode. The same way you can also embed the tweet into your sidebar widgets. To embed the tweet in your sidebar, go to layouts >> add a gadget, choose HTML/JavaScript gadget and then paste the code in.

Also note that when embedding tweets in sidebar you don’t have to think about changing the width or height because it is responsive which adjusts its size accordingly. But anyhow if you wish to make the tweet to align right or center then you can add align attribute inside the blockquote element (align=”left” or align=”center” or align=”right”).

<blockquote class="twitter-tweet" align=”center” lang="en">

Changing the tweet color and theme

By default the embedded tweet renders the links in standard blue color which is used in Twitter.com and the theme is in light mode which you can override it easily. Just inside the blockquote you can add data link color (data-link-color=”#cc0000″) and data theme (data-theme=”dark”) like this.

<blockquote class="twitter-tweet" data-link-color="#00A5FF" data-theme="dark" lang="en">

Embedded tweet with new theme color

So the embedded tweet will look like this. Or if you often embed tweets in your website then adding attributes to each codes will be difficult so you can globally override the settings using <meta> tags like this.

<meta name="twitter:widgets:link-color" content="#00A5FF">
<meta name="twitter:widgets:theme" content="dark">

Adding Meta tags into your site is simple, here is the tutorial for Blogger users and here is it for wordpress users.

You can know more about Embedded Tweets here

Hope this article helped you in embedding Twitter tweets. If you like the post then please follow us on Twitter.