How to Add the Twitter Widget to Your Site

By Niklas Nordlof on Monday, March 24, 2014

How to Add the Twitter Widget to Your Site
The Twitter widget allows you to include your latest tweets (or anyone’s latest tweets) in your site. Adding this widget is a good way to show visitors what you’re up to.

The widget itself is easy to configure, and you can have it working in only a couple minutes.

Like any other widget, drag it onto the page, and then click it to see the Settings. You’ll see four different fields:

  1. Username. This is the user whose tweets you'll display.
  2. Data Widget ID. This is described later, but you’ll get this ID from Twitter.
  3. Number of Tweets. Consider that more tweets will take up more screen real estate. So keep this number lower if other parts of your page are more relevant. 
  4. Theme Style. Choose Light or Dark depending on what looks better on your site.

Get a Data Widget ID

Every Twitter widget needs a Data Widget ID, which you get from Twitter. Getting this ID involves creating a widget through your Twitter account, and then copying a number from the HTML that Twitter provides. The process has several steps, but overall, it’s simple, and even though you’re creating a widget, you don’t need any coding experience.

So, to get the Data Widget ID:

1. Sign in to your Twitter account.
2. In the upper-right, click Settings and Help (the gear icon), and then click Settings:

3. From the menu on the left, click Widgets.
4. Now in the upper-right, click Create new to begin creating a widget.

5. Next enter a Username. For example, to display Moboom’s tweets, you would enter moboommobile. The Height and Theme settings won’t affect how your widget looks on Moboom, but you can set the Link color if you like.
    6. Click Create widget to finish building the widget. You’ll see some code in the bottom right, which will look something like: 

    <a class="twitter-timeline" href="" data-widget-id="448196650540879872">Tweets by @moboommobile</a>

    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+"://";

    7. Look through the code, and find the bit that looks like data-widget-id="448196650540879872". This number is your Data Widget ID.

    8. Now copy and paste that number (e.g., 448196650540879872) into your Moboom site.

    And that's it! Check out the Youtube and Paypal widget posts for more quick widget how tos. 

    image via Twitter.

    DevKit Templates

    Find the website template you want in the Moboom Market