Twitter Timeline Widget

Embedding Tweets

Our templates use the standard Twitter Timeline Widget and here is how to get the embed code:

  1. Go to twitter.com and log in.
  2. Go to your settings and select Widgets from the left hand side menu.
  3. Once you have the widget page open, click the "Create new" button in the top left hand corner.
  4. Choose the type of timeline you’d like, most likely "User timeline" and fill out the following:
    • Enter the username of the user whose Tweets you want to display.
    • Enter the height of your widget; if left blank it will default to 600px.
    • Select the theme of your widget; defaults to light.
    • Set link color to match the template.
  5. Once done, click the "Create widget" button. Copy and paste the generated code into the template. See example below.
Example
								
									<a class="twitter-timeline"
											 href="https://twitter.com/thememountainco"
											 data-widget-id="YOUR-WIDGET-ID-HERE"
											 data-theme="dark">
									Tweets by @thememountainco
									</a>
									!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.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
Customizing the Widget Look

You can customize the Twitter Timeline Widget the options mentioned below. For more detailed information please visit https://dev.twitter.com/web/embedded-timelines#customization.

Widget Theme

Change widget theme by adding the data-theme attribute to the link. Possible values: dark, for example

Example

Change the widget link color with the attribute data-link-color attribute. Values entered as HEX (#000000), for example

Example
Widget Border Color

Change the widget link color with the attribute data-border-color attribute. Values entered as HEX (#000000), for example

Example
Widget Dimensions

Change the dimensions of the widget by adding the width and/or height attributes to the link, for example

Example
Note: Minimum width is 180px and max width is 520px; minimum height is 200px.
Widget Chrome Settings

Remove header, footer, borders, scrollbar and/or background color by adding the data-chrome attribute to the link. Possible values are: noheader, nofooter, noscrollbar, noborder, and transparent, for example

Example
Tweet Limit

Remove header, footer, borders, scrollbar and/or background color by adding the data-tweet-limit attribute to the link. Possible values are: noheader, nofooter, noscrollbar, noborder, and transparent, for example

Example