Using Twitter Widgets on Your WordPress Website

Twitter widgets are great for social engagement, as your visitors can engage with your Twitter content without ever leaving your website. This is really great for added visibility. They can reply, retweet and favorite tweets live on your blog. How cool is that?

Adding a Twitter widget on WordPress is actually pretty simple. Here’s how to do it:

Go to ‘Settings’ in your Twitter account by clicking on the small profile image on the top right hand side. In the drop down menu click settings and then click widget.  You will end up with something that looks like this.

Click on Create new. In here it doesn’t matter which of the top 4 you choose as they all take you to the same page.

We'll go through each of them, learn how to create them and what they're going to look like on your website.

Click on Profile and a new window will open.

Now you will see:

Types of Twitter Widgets:

 – A collection

 – A Tweet

 – A profile

 – A list

 – A likes timeline

 – A handle, like @staceylmyers

 – A hashtag, like #WhattoTweet

Embedding a Tweet

This is what an embedded tweet looks like.  Notice that you can interact live with the tweet inside the blog post. You can like, retweet, share and reply directly through the tweet. As mentioned earlier this is great for social engagement right on your blog.

An extremely rare monitor #lizard is now making its home at our Reptile House. Info: https://t.co/KhDTq4p0Ck pic.twitter.com/UlDiox3cdH

— San Diego Zoo (@sandiegozoo) July 27, 2016

To embed the tweet, find the tweet on Twitter.  Click on the tweet, not the image.  It will open out in a pop up window and you will see the unique link for that tweet.

Copy that link and go back to the ‘What would you like to embed?’ page and paste it in there.

Please note that there are other ways to embed a tweet – I am only showing you how to do it using the widget tool in this post.

It will give you a preview of what the tweet will look like and the embed code.  We will cover what to do with the embed code once we have covered all the options.

Embedding a Profile

Either copy and paste or type in your username.  It is the Twitter website with your username.  Mine is www.twitter.com/staceylmyers.  Once you put it in you will get three options.

1.  Embed Timeline – this is my timeline embedded into the sidebar or my website.

You will want to customise the length of your Twitter feed or it will go down the entire length of your blog.  Just above where you get the code you can ‘set customization option’.  Set the height of your feed there.  I have mine set at 700.

2. Follow Button – Visitors to your website can follow you with one click.

3. Tweet to Button –  When this button is clicked on it opens a tweet with your username already in it.

A List

This will show the tweets of all the people you have on a list.  If you don’t know how to create lists on Twitter I show you how in this video.  Once you have created the list, copy and paste the list web address – just like we did for the tweet – embed it, and away you go.

A Likes Timeline

This will be a list of everything you have liked (used to be favourited). To find this, go to your profile and click on likes. Copy and paste the web address like we have done before. It will look like this www.twitter.com/staceylmyers/likes.

A Twitter Handle

This one will give you the same options as the profile one.

A Hashtag

Add in a hashtag for your industry, or one you use yourself, and it will bring up a timeline of all the tweets using that hashtag.Embedd

Embedding the Code

Now that you know how to create all of the widgets we are now going to look at how to embed them into your WordPress website.

Every time you create a widget you get a distinct code for it.  To add it to your WordPress website is pretty much a copy and paste job.

We are going to cover adding the embed code into a blog post or page (the procedure is the same) and into the sidebar of your site.

Putting the embed code into a blog post or page

Open up the blog post you would like to embed the tweet or timeline into.

You do need to add the code to the html part of your post.  To get there will depend on what editor you are using.  Either click on the HTML tab or the Source button – you may have one or both of them.  If you have both it doesn’t matter which one you click.

The HTML code might look a bit like gobbledygook but you can still read what is there.  Scroll down until you find the section in your post that you want to embed the code.

I scrolled until I saw the words ‘seconds to tweet’ as I knew I wanted to posted it directly under that. You then paste it in.

One thing to note is that when you click back to view it as normal text it will not show you the tweet. It will show you something like this…

It will show the actual tweet in the post once you publish it.

Like this:

That thing you want to do but you aren't sure if you can… pic.twitter.com/stMelRsAZm

— Stacey Myers (@staceylmyers) July 17, 2016

Embedding code into the sidebar

In your WordPress dashboard click on Appearance and then Widgets.

The right hand side of your widget area will look different depending on what theme you are using.  For me, I put everything in the Blog sidebar section.

To add the code you want to drag over the widget that says ‘Text’ and add it to the sidebar you want to use.  You can use this for text or HTML.  Paste in the code and press save.

Here is the tweet in my sidebar.

If you look on the sidebar of my website you will see how I use the timeline and follow widgets.  You won’t see the lizard – I just thought it was beautiful and used it as an example.

Congratulations! Now you know how to embed a Twitter widget in your WordPress website. I would love to see how it turned out – share your website in the comments and I will go have a look!

Here is the video of how to embed all of the widget types (including the collection).