Find the tweet you’d like to embed.
1. Find the tweet you’d like to embed.
To embed a tweet onto your blog or website, you’ll need to first find the tweet you want to display in its natural habitat — Twitter. Locate the tweet in your Twitter newsfeed or on the Twitter user’s profile. For this example, we’ll embed a tweet from HubSpot’s Twitter feed, as shown in the screenshots below.
2. Click the downward arrow on the top-right of the tweet.
Once you’ve found the tweet you want to embed, click the downward-facing arrow icon, located on the top-right of the tweet, as shown below.
downward-arrow-tweet
3. Choose “Embed Tweet.”
Clicking this arrow icon will reveal a dropdown menu of options, including one called “Embed Tweet.” Click this option.
embed-tweet-from-hubspot4. Copy the code that appears and paste it into your website’s HTML editor.
Clicking “Embed Tweet” from the dropdown menu shown above will open the code box shown below. Under “Embed this Tweet,” you’ll see a string of text highlighted in blue. Use Command+C on your keyboard (or Control+C, if you’re using a PC) to copy this code to your clipboard.
tweet-embed-code
With this embed code copied to your clipboard, return to the website where you want to embed this tweet. Open the source code of this website (some content management systems have a “</>” icon where you can access this source code). Here, you’ll paste the tweet’s embed code into your HTML precisely where you want the tweet to appear.
5. Add ‘tw-align-center’ after the words “twitter-tweet” in the embed code.
Once you pasted this code into your HTML, however, you’ll want to center-align this tweet so it doesn’t automatically appear pushed up against the left or right side of your webpage. To correct this, add the text, ‘tw-align-center’ (without quotation marks) directly after “twitter-tweet” in the embed code. You can learn more about this method here.
Here’s what the final code should look like:
<blockquote class=”twitter-tweet” tw-align-center data-lang=”en”><p lang=”en” dir=”ltr”>Let us know! 👂<br>What type of content would you like to see from us this year?</p>— HubSpot (@HubSpot) <a href=”https://twitter.com/HubSpot/status/1085634067679322114?ref_src=twsrc%5Etfw”>January 16, 2019</a></blockquote>
<script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>
That’s it! This is what your embedded tweet will look like when you’re done:
If you need any assiasance with this tutorial you can contact us here
