Technology

Twitter embed example

Whether you want to add social evidence to your content, support a blog with real examples, or expand the reach of your website with a news feed, embedding content from other platforms can add a lot of value to your website.

But figuring out how to actually integrate that content can be tricky.

In this article, you’ll find a step-by-step guide to incorporating social media and content related to your website on Twitter, Facebook, Instagram, Pinterest, Google Calendar, YouTube and SlideShare.

Improve your engagement on social media using this free checklist.

(Unfortunately, LinkedIn does not yet allow you to add features for specific posts, although it does offer plugins for you to insert your LinkedIn profile or page.)

Click on a section name to automatically access that section.

  • Embedding a tweet
  • Insert a Facebook post or video
  • Insert a Facebook topic
  • Insert Instagram feed and posts
  • Insert Pinterest Pins
  • Insert Pinterest dashboards
  • Insert a Google+ message
  • Integrating Google Calendar
  • Embedding a YouTube video

Incorporate Slide Share presentations and info graphics

  • Embedding a tweet
  • Find the tweet you want to insert.
  • Click the down arrow in the upper right corner of your tweet.
  • Choose “Insert Tweet”.
  • Copy the code that appears and paste it into your site’s HTML editor.
  • Add “tw-align-center” after the words “twitter-tweet” in the embed code.
  1. Find the tweet you want to insert.

To insert a tweet on your blog or website, you must first find the tweet you want to display in nature: Twitter. Locate the tweet in your Twitter news feed or Twitter user profile. In this example, we will include a tweet in the HubSpot Twitter feed, as shown in the screenshots below.

  1. Click the down arrow in the upper right corner of the tweet.

Once you’ve found the tweet you want to insert, click the down arrow icon, located in the upper right corner of the tweet, as shown below.

  1. Choose “Insert Tweet”.

Click this arrow icon to display a drop-down menu of options, including one titled “Insert Tweet”. Click on this option.

  1. Copy the code that appears and paste it into your site’s HTML editor.

Click “Insert Tweet” in the drop-down menu above to open the code box below. Under “Embed this Tweet”, you will see a text string highlighted in blue. Use Command + C on the keyboard (or Ctrl + C if you are using a PC) to copy this code to the clipboard.

After that embed code has been copied to the clipboard, return to the site 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 exactly where you want the tweet to appear.

  1. Add “tw-align-center” after the words “twitter-tweet” in the embed code.

However, after pasting this code into your HTML, you may want to align this tweet so that it does not automatically appear against the left or right side of the web page. To fix this, add the text “tw-align-center” (without quotes) directly after “twitter-tweet” in the embed code. You can get more information about this method here.

About the author

admin

Add Comment

Click here to post a comment