Twitter now allow you to embed custom Timeline Widgets into your content. To embed these, you will need to setup the widget in your Twitter account, locate the resulting ID, and copy that into the Twitter Timeline hotspot in your Oomph content. The following steps takes you through how to create these widgets.
- Log into the Twitter account you wish to use.
- Click the cog icon, located in the top right corner of your account. Select Settings from the drop down menu, and this will open up a whole list of settings for your account on the left hand side.
- Select the Widgets option from the panel.
- In the Widgets panel that appears, click create new. You will be displayed with the following screen, which contains all the different options of the types of Timelines that you can create.
As you can see from the above screenshot you can choose one of four different Timelines Sources: User Timeline, Favorites, Lists or Search. Here we have chosen the Users tab and entered the Oomph Twitter account username: '@OomphHQ'. This then gives you a preview in the right panel on what what Timeline will appear like.
- Select the option you wish out of the four tabs; e.g. User
- Enter the Twitter term you wish to create the Timeline of e.g. OomphHQ
- You can leave the default height blank - Oomph overrides this setting, as we will resize your Timeline to the size of the hotspot that you have created though there are a few restrictions - width must be between 220-520px and height must be larger than 350px.
- Choose whether you want a light, or dark theme. This will change the background colour of the Timeline to either white or black.
- Choose whether you want to allow the widget to auto expand images or not.
- Supply a hex value of a colour that you wish the links to be displayed with. You can also use the colour picker to do this. You should pick web safe colours.
- Choose if you want to opt in for Twitter tailoring (more information here).
- Click Create Widget.
Oomph only requires one value from this text, the data-widget-id value. In the above example this text will appear as data-widget-id="311993286816563201" within all the other HTML. All we need is the value: 311993286816563201. You can then use this value as the ID in the TwitterTimeline hotspot, e.g. TwitterTimeline,id=311993286816563201
Note: Your ID will differ from the above example. If you are having difficulty getting the above value we have written a small tool that should assist you. Just copy the entire text and paste into into the text field in this page: http://services.oomphhq.com/twitter/create
You can also find the widget ID in the url when you’re editing it (below in bold).
Now that you have the ID, you can add the Twitter Timeline to your content.