How to Create a Twitter Widget for Your Website or Blog

Show off your Twitter presence with a great looking widget

An image of the Twitter app loading on a smartphone.

Photo © Chesnot / Getty Images

Many people use Twitter clients to update their status and read tweets, but there are also a host of useful Twitter widgets that you can publish on a blog or website.

These widgets allow you to do things like show your latest tweets, inform visitors of a relevant hashtag, display a particular moment and so much more.

Follow the steps below to learn how to set up your own Twitter widgets.

Access the Widgets Tab from Your Twitter Account Settings

A screenshot of Twitter.com.
Twitter.com.

Sign into your Twitter account from a web browser by visiting Twitter.com.

Click your profile photo icon in the top right corner of the screen and select Settings and privacy from the dropdown menu. In the left sidebar, click on the Widgets option.

On the Widgets tab, click the Create New button. Several options will appear in a dropdown menu. You can click any one of them. They all open up to the same new page where you'll be able to select the kind of widget you want to publish.

Select the Type of Twitter Content You Want to Embed

A screenshot of Twitter.com.
Twitter.com.

On the following page, click the down arrow in the Enter a Twitter URL field to see the list of options available for the types of content you can transform into Twitter widgets.

These include:

  • A collection
  • A tweet
  • A profile
  • A list
  • A moment
  • A likes timeline
  • A user handle
  • A hashtag

You can select any of the default URLs to see an example of what the widget looks like.

Get the Twitter URL of the Content You Want in Your Widget

A screenshot of Twitter.com.
Twitter.com.

If you don't already have the Twitter URL ready for the content you want in your widget, you'll have to open a new browser tab or window to navigate to Twitter.com and find the collection, tweet, profile, list or other content type you want.

Once you've found it, copy the URL and go back to the Twitter widget publishing tab/window to paste the URL into the Enter a Twitter URL field. For this example, we're just going to use the URL for the profile of @Lifewire.

After pasting the URL into the field, click the arrow pointing right to move onto the next step.

Choose Your Display Options

A screenshot of Twitter.com.
Twitter.com.

After entering in a URL, you'll be asked to select from the available display options. Different display options will be available depending on the type of content you've chosen for your widget,

For our profile example, we're given the options to choose between an Embedded Timeline and Twitter Buttons. We'll click on Embedded Timeline.

Copy the Embed Code and Paste It into Your Website or Blog's Code

A screenshot of Twitter.com.

You'll be shown a preview of what your widget looks like plus a string of code right above the preview.

If you're happy with the way your widget looks, you can go ahead and click the blue Copy Code button to copy the code and paste it somewhere in the code of your website or blog. The height and width of the widget is built to be flexible, so it should remain within the constraints of the area of your blog or site where you're featuring it.

If you want to change something about the widget, click on set customization options to see what changes can be made. For our example, we can only set a specific height, width, dark/light look, default color and language.

Article updated by: Elise Moreau