using-twitter-widgets-on-your-wordpress-website

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.

Create new

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:

What would you like to embed

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.

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.

Tweet URL

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.

Tweet embed preview - cropped

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.

Twitter feed embed

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.

Follow and Mention button

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.

html button

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.

html

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…

visual part of html code

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

Like this:

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.

Available widgets

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.

Code in widget

Here is the tweet in my sidebar.

Tweet in 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).

About the author 

Stacey Myers

Coaching entrepreneurial women who have decided that mediocrity is no longer an option. From ordinary to extraordinary.

Leave a Reply

Your email address will not be published. Required fields are marked

  1. Twitter is my favorite social media platform, so I'm loving your tutorial. You did a wonderful job of explaining the options as well as outlining what we need to do to implement widgets. I've been considering adding a widget to my sidebar, and you might have convinced me that I should do it! I'm bookmarking your post–great info!

    1. Mine, too, in case you couldn’t tell. I’m pleased I helped you to rethink something.  It is a really easy way for people to follow you without having to go to your Twitter feed.

  2. There is a LOT of information here and I must say I am very impressed with how you illustrated it and made even the hard bit (well I find the embedding bit hard anyway) actually genuinely easy to follow.  Great post – happy to share!

  3. Hi Stacey,

    This post is fantastic! I have been wanting a twitter feed in my sidebar for a while but never really took the time to figure out how to do it. Prior to checking out your post today, I didn't have a twitter feed in my sidebar. I just implemented it as I went through your post. Super helpful and easy to follow your step by step process. Thanks a bunch!

  4. I love using Twitter, yet it never occurred to me to embed a tweet about a post within the post. I'm going to start doing that.  I already make my posts shareable and use a fun click to tweet, but this makes a lot of sense too! I think you gave me a project for the weekend! 

     

  5. Great post, Stacey. I had no idea I had so many Twitter options on my website. I am in the middle of a revamp, so I am bookmarking this to see which might work best with my site.  Thanks!

  6. OMGoodness, so thorough you are. I had the Twitter feed on my blog/website and and a heck of a time getting rid of it. I did not want to take away from the original message. 

    I wish I have found this when I first put the Twitter to the website. Will definitely share this so others can add to their sites. Excellent graphics, too. Very easy to understand, for me anyway. 

  7. Hi Stacy,

    This IS a resource . I came here from the link shared by Ileane Smith maam and its worth it!

    I do sometimes use tweet embeds on my blog posts shared by influencers so that it boosts the social proof. But you have a whole new range of way twitter can be embedded on our blogs.

    Thanks 🙂

    -Swadhin

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Discover the real reason
you aren't reaching
your business goals.

And it’s not because you are a
procrastinator.

338 Shares
Tweet294
Share32
Pin5
Share7