Embedding a Twitter feed into your EnagagementHQ projects or Homepage can be a great way to keep your community up to date with your latest announcements. Twitter offers a range of different options for creating embeddable content.

In this article we will look at embedding a profile.

In order to get started, your first step, if you haven't already done so, is to sign-up for Twitter. 

If you already have a Twitter account it's easy to embed a profile timeline into your EnagagementHQ site by doing the following;

First, visit the the Twitter embed page here and enter your Twitter URL. This will be twitter followed by your username, such as https://twitter.com/BangtheTable

Once you have done that, select Embedded Timeline (1) and then choose to set customization options (2).

Here, you can choose a few custom options. The most important one is the height, which we recommend you limit to 500px at the very least. If you leave this blank, the Twitter embed can potentially get VERY long on your EnagagementHQ project page and impact the design of your page. You can change this value later on, so you can do a bit of trial and error with it. Then click on update and embed code will be displayed.

Finally, you can copy the code, which will look something like this

<a class="twitter-timeline" data-height="500" href="https://twitter.com/BangtheTable?ref_src=twsrc%5Etfw">Tweets by BangtheTable</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

or you can also use a shorter version of the code i.e. <p><a class="twitter-timeline" data-height="300" data-width="450" href="Twitter link">Tweets by XYZ</a></p>

The data-height value you see above is the height of the widget and you can change this according to your needs.

All you need to do now is paste this code into either the freestyle widget on your homepage (in the Torquay theme) or into the HTML of your custom widget in any of your project page.

If done correctly, you will end up with a widget like the below. Of course, in EnagagementHQ you can further choose to hide the widget title.

Learn about using the Custom Widget here.

Note: For HTML source code, look for this symbol <>  in your WYSIWYG editors. If the Twitter feed doesn't appear as above (scroll view) in the widget, please contact our support team for assistance.

For more information about embedding Twitter please refer to their Help Centre.

Contact our support team if you need any further assistance via chat or email support@engagementhq.com