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.
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.
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.
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!
Fantastic information! Will bookmark this and plan to implement. Thanks for making it simple to follow.
My pleasure, Robin. I am pleased you found it useful.
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!
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.
Great Twitter tips, I know I'll be playing around with my blog with some of these tips. Thanks Stacey.
That is great to hear, Sonya!
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!
YAY! It makes me happy when I can make things easier for people. Let me know how you get on.
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!
That is great to hear, Geniece! So pleased you took action and set yourself up a sidebar Twitter feed.
Great information cannot wait to do this on my blog
Thanks, Alene. Let me know if you have any questions.
Wow!!! What a FABULOUS post!! Such great specific tips we can apply today! I use the tweet this widget but I will integrate your ideas moving forward. Thanks
I'm pleased that it is going to be useful for you.
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!
It's great to hear that you are already using some Twitter tools on your website. Let me know how you get on.
Wow! I just saved this post to my Google Keep and will take a look at it later. I have had this problem to embed my tweets on my blog. Thanks for these tips Stacey!
I am pleased it will be helpful for you. It is another one of those things that is easy once you know how.
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!
Yes, there are many great things you can do. Popping a tweet into your blog post every now and then is great exposure for your Twitter account.
Great tips…I already used to have my Twitter wall but I only have Instagram now. Anyway to embed tweets is a good move.
Yes it is. You could always have both. I like instagram as it is very visual.
Very cool, Stacey! Never thought about embedding in blog posts before. Good idea!
Thanks Carol! There are many uses for embedding a tweet into a blog post.
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.
Thank you so much for your lovely comment and thank you for sharing.
I will be trying some of these this week, thanks!
Great to hear! Let me know if you have any questions.
WOW! What a great tutorial! Amazing! Thank you for sharing!
My pleasure! Thank you for stopping by.
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.
Thank you so much for stopping by! There are so many options to choose from!