Skip to main content

How to Embed Tweets into Your WordPress Blog Posts

One of the powerful aspects of social content is that it is portable – that is, it can be easily shared and republished in a variety of ways.  Whether it is an Instagram photo or a Tweet, this content is designed to be shared as a social object. This post will take a look at Tweets and how you can embed tweets in WordPress blogs or websites in their native format.

Embed Tweets on Your WordPress Blog

Twitter content is perfect for sharing.  Tweets are usually concise thoughts that are short and to the point.  They can quickly summarize a person’s point of view, opinion, or outlook without getting too detailed.

You can easily screen-capture a tweet and include it in your blog as an image, but if you want to give readers an easy way to favorite, retweet, or reply to the tweet right from your blog page, you’ll want to embed it.

Every tweet has a “More” menu accessible by clicking on the button with the three dots that appears at the end of the tweet.  Go to this menu and select “Embed Tweet”.



This will give you a snippet of custom code that can be added to a website or blog.  To get this code, simply copy it from the “Embed this Tweet” dialog box and close it.


To embed this tweet in a WordPress post, simply create a new post (or edit one you’ve already started), select “text” editing mode, and paste the code from Twitter. Save the post and preview or publish it.

Here’s an embedded tweet to show you how this content appears in a WordPress post:


Notice how you can reply, favorite, or retweet the content right from this page?  Any links or hashtags are also clickable.  MUCH more functional than a screenshot.

You can similarly embed a tweet in another content publishing tool or website by pasting this embed code snippet directly into your HTML code.

Can I Embed Tweets in Facebook Posts?
No. This method will NOT work as a way to embed tweets in other social media content.  Here is what happened when I tried to use this embed code in a Facebook post:


Facebook does not allow HTML markup tags within status updates, so the code appeared exactly as it is.  

For more info on embedding Tweets, see this Twitter Help Center article.

Cool Party Trick: Tweet from the Command Line!

Twitter is one of the most powerful social platforms to tap into because 1) Tweets are concise and standardized, and 2) Tweets are transparent and open for all to access and use. Many companies have developed ways of collecting and analyzing tweets to create useful insights about what is being discussed on Twitter.

I started reading the excellent Mining the Social Web by Matthew Russell published by O’Reilly, one of my favorite publishers of technology books. The book discusses how the incredible social data from Facebook, Twitter, LinkedIn, and other social media sites can be programmatically accessed and harvested for later research and analysis.

(If you are interested, you can follow the author of this book on Twitter @ptwobrussell and @SocialWebMining)


Chapter one discusses how to access Twitter through a command line interface and Python using Mike Cardone’s Python Twitter Tools


After being sure that easy_install was working (and knowing that Python was already running on my Mac OS X laptop), It was easy enough to get PTT installed – using Terminal (the Mac OS X command line terminal emulator), I just typed in:

$ easy_install twitter

Once installed, you can tweet from Terminal with a simple command like:

$ twitter set “Class work day in #unidigadv #blogging #tweeting”

One quick command, and a second later, my tweet was live:

Class work day in #unidigadv #blogging #tweeting
— Matthew Wilson (@cecilkleakins) October 5, 2012


Now that’s a pretty cool party trick, but the real power of accessing data from the social web lies in integrating the Twitter API with a programming languages like Python or Ruby to gather, analyze, and visualize the data in interesting ways.


If you’re interested in learning more, check out this book – or its companion volume, 21 Recipes for Mining Twitter.

Optimizing your Blogger Blog for SEO

You’ve got your Blogger blog up and running, and now you need to ensure it shows up properly in search engines.  As explained in the assigned reading in the Google SEO Starter Guide, you’re going to want to create <title> and <meta> description tags to help describe the content of your blog to search engines.

Title Tags

A title tag is a snippet of code placed within the <head> section of an html file.  It can appear anywhere between the <head> and the </head> tags.  There can only be one title tag per HTML file.  The syntax is simple: you have an open tag <title> and a close tag </title> and everything  in between becomes the content of the title tag.

<title>This is a page title</title> 


Note that only the first 65-70 characters will show up in a search engine result.

In addition to the information in the Google SEO Starter Guide, if you do a few Google searches, you’ll find a treasure trove of excellent resources on writing title tags.

15 Title Tag Optimization Guidelines For Usability And SEO
Title Tag SEO Best Practices
How to Write Title Tags For Search Engine Optimization

Optimizing the Title tags on your Blogger Blog

You may have noticed that Blogger already automatically creates title tags for your blog pages. This is done with a bit of dynamic code that Blogger inserts into the title tag of each page.  If you go to Blogger and click on “Template” and then click “Edit HTML”, you will be able to see this code already in place:

<title><data:blog.pageTitle/></title>


On your blog’s home page, the page title is simply the name of your blog.  You will probably want to add some more copy here, especially if your blog title is a little esoteric or not immediately understandable.  

On individual posting pages, the title tag is the name of your blog followed by a colon (:) and then the name of your post.


The problem with this is that only the first 65-70 characters of a title show up in search results listings.  If your blog is called “The UNI Digital Advertising Blog”, and you write a blog post called “The magical powers of Google’s Hal Varian”, then your Blogger page title will show up like this (I’ve put the first 65 characters in green and the characters that will get left out of the title listing in red):

The UNI Digital Advertising Blog: The Magical Powers of Google’s Hal Varian


See what happens?  A very important keyword gets cut off!  So if a user was searching for “Hal Varian”, they might skip this search result because they don’t SEE their keyword in the title.

To remedy this, many have recommended changing the code in your Blogger template to switch the order so that your blog post title goes FIRST and your blog name goes second.  

Here’s a link with the code you will need:
Adjust Blogger Title Tags to Improve SEO

I wanted to add the hashtag (#unidigadv) to my blog title, as well as a little blurb about the blog (“all things digital, mobile, and social”).  I followed the directions in the blog post above and here is what my code ended up looking like:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<title><data:blog.pageName/> | <data:blog.title/></title>

<b:else/>

<title>#unidigadv – <data:blog.pageTitle/> – All Things Digital, Mobile, and Social</title>

</b:if>


Now the page title of my blog contains some extra keywords, and my blog post page titles contain the title of the blog post FIRST, followed by the name of my blog.


UPDATE: I tweaked this code to also include Facebook Open Graph Protocol tags in it – so instead of using this code, go to my OGP post and use the code from that post.

Meta Description Tags

A <meta> tag provides metadata about a web page.  Meta tags also are placed in the <head> section of HTML files.

There are many different kinds of meta tags, but the one most relevant to SEO is the meta description tag.  This tag gives a brief description of the content of the web page:

<meta name=”description” content=”Here is a page
description that describes what is on the page
“>

Meta description tags are often directly used in search engine results pages in the two lines describing each search result.  Note that only the first 150-160 characters of your description will show up in the result.  Here is an example of a search result entry for SEOmoz:

There are lots of good resources on writing Meta Description tags as well:
The Meta Description Tag
Meta Description SEO Best Practices

Optimizing the Meta Description tags on your Blog

You’re going to thank me profusely for this tip – I found a way to customize your Meta Description tags in Blogger WITHOUT editing your template HTML code!  

Your Blog’s Main Description Tag

First, for the main Description tag on your blog’s home page, go to “Settings / Basic” and edit your blog’s “Description”.  Whatever you write here will automatically be included in the meta description tag on your home page.

Description Tags for your Blog Posts
Before you can start writing these, you need to enable Meta tag descriptions in “Settings / Search Preferences”:


Just click “Edit”, and click “Yes” when asked to “Enable Search Description”:



Now you’re all set. When writing a blog post you can now click on an option called “Search Description” located in the “Post Settings” menu on the right hand side of the screen. Write your meta description copy for that post and click “done”.  

It is best practice to write meta description copy for each of your blog’s posts. Just try to summarize your blog post in 150 characters or less.  Make it readable and try to include important keywords.  If you don’t, then Blogger will not include a Meta Description tag for that post.  

Title and Meta Description tags for SEO

You’ve got your blog up and running, and now you need to ensure it shows up properly in search engines.  As explained in the assigned reading in the Google SEO Starter Guide, you’re going to want to create <title> and <meta> description tags to help describe the content of your blog to search engines.

Title Tags

A title tag is a snippet of code placed within the <head> section of an html file.  It can appear anywhere between the <head> and the </head> tags.  There can only be one title tag per HTML file.  The syntax is simple: you have an open tag <title> and a close tag </title> and everything  in between becomes the content of the title tag.

<title>This is a page title</title>


Note that only the first 65-70 characters will show up in a search engine result.

In addition to the information in the Google SEO Starter Guide, if you do a few Google searches, you’ll find a treasure trove of excellent resources on writing title tags.

15 Title Tag Optimization Guidelines For Usability And SEO
Title Tag SEO Best Practices
How to Write Title Tags For Search Engine Optimization


Meta Description Tags

A <meta> tag provides metadata about a web page.  Meta tags also are placed in the <head> section of HTML files.

There are many different kinds of meta tags, but the one most relevant to SEO is the meta description tag.  This tag gives a brief description of the content of the web page:

<meta name=”description” content=”Here is a page
description that describes what is on the page
“>

Meta description tags are often directly used in search engine results pages in the two lines describing each search result.  Note that only the first 150-160 characters of your description will show up in the result.  Here is an example of a search result entry for SEOmoz:

There are lots of good resources on writing Meta Description tags as well:
The Meta Description Tag
Meta Description SEO Best Practices