How to add a Twitter feed to WordPress
Articles Blog

How to add a Twitter feed to WordPress

August 27, 2019


– In this video we’re gonna
be bringing our Twitter feed onto our WordPress website, so you can show your Tweets
in real time on your site. They look just like this. Basically you can have them
kind of fading in and out or whatever you like really, you can show as many as you want or as few as you want,
all sorts of things. It’s very easy to set up
and got loads of options. I’m using a free plugin to do this, so you’re not gonna
need to spend any money which is good news. So, well let’s get started. (soft piano music) Hello, it’s Alex here from WPEagle. As I said, in this video we’re going to be adding a Twitter feed, your Twitter feed probably,
or maybe one for a client. You can pull in as many Tweets as you like and there’s loads of
layout options, as well, in terms of how you want to display them. So the plugins we’re gonna be using today, the first one allows you to obviously pull your Tweets through.
It creates a widget, which you can add to any of the sidebars that you have in your theme. Second plugin we’re going to be using, basically allows you to use
that widget as a short code and a short code is just,
like, a little bit of text that you can paste anywhere
you like, you know, within a page or whatever and then the tweets will show there. So, very flexible and hopefully you’re
going to find it useful, so let’s get on the computer and I’ll show you how it works. Okay, so I’m over at the site that I’m going to be
adding the Twitter feed to. It’s a website that I’ve just
been working on recently. In fact, I’ve been recording
a video all about it, so, look out for that.
That’ll be coming up soon. When I’ve edited it down. I’ve got about four hours of footage, so, it might take a
little while, but yeah, it will be coming soon. But anyway, I’m getting sidetracked. The first thing we need to do is install a couple of plugins that are going to help us with the Twitter feed. So, to do that, let’s
go into the Dashboard. Then Plugins, then Add New. First one we’re going to
add is the Twitter one, which is called TweetScroll. Hang on, it might not have a space. Let me just get rid of the space. That’s the one we want.
Let’s click Install. Now, it comes as a widget,
which is kind of handy. So that means you can add your
Twitter feed to your sidebars wherever they may be on your theme, maybe down the side,
could be in the footer, could be in the header. Let’s click Activate. But also going to add
another little plugin that allows us to add
widgets as short codes. So, that basically means we
can add them to a sidebar, then drop that sidebar
or widget, whatever, into a piece of content in,
like, the main page body, if that makes sense. So, you’ve got two options, you’ve got the widget which
you can add to your sidebar and then we’re going to
use the short code plugins so that we can add it anywhere else, say, for example, on the
homepage or something like that. So, that second plugin is
called Widget ShortCode. I’m just going to type
that in, do a search. Oh, I need to click Add New, silly me. Widget ShortCode. Click Install Now. Then click Activate. Okay, then we’re good. So, let’s set up our Twitter Widget first. So, if I go into Appearance and Sidebars, that’s where you find
all the widgets, ooh, sorry, no. You don’t find them in there. You find them in Appearance and Widgets. Silly me. So, in Appearance and Widgets
we’ve got this new area now called Arbitrary which is what we can use for the short codes, so
basically anything we put in here we can then dump anywhere on the site. It’ll all become clear in a second. So let me go and find
the TweetScroll widget. Here it is. Of course, you could just
put it in your main sidebar or wherever, but I want to
drop this one on the homepage, so a sidebar’s not going to be useful. So that’s why we’re using a short code. So, once you’ve put the widget
in, you can give it a title, you can put your username in,
which I’ll do in a second, number of tweets you want to
load and all sorts of things. So, let’s go through and for, I’ll leave the title as Twitter for now. I think I may want to
remove that, but I’ll see. Let me add the username, which is bakeitfreeform. Number of Tweets to Load is fine. Now, I just want to
just kind of do a fade, so, I’m just going to go to that for one. Uh, 600’s fine for now, I think. Time stamp’s fine. So, I just want to set this to fade. Open in your…in new window, that’s for when people click
any of your Twitter links. Show the Twitter logo, sure, why not? Don’t want to bother
with the profile image. And then you can set
some caching if you want, maybe five minutes is good. Okay, now we need to get our
consumer keys and access keys. So, to do that we need
to head over to Twitter. I’ll just open a new tab. And in fact, we’re going
to apps.twitter.com. Then we need to sign in. So, let’s sign in to Twitter. Pretty easy to count that
you’re setting up the site for, but obviously it doesn’t really matter. You can use any Twitter account. You just need to get the api key. Going to click login. Don’t have any apps at the moment, I’m just going to click Create New App. I’m going to give it a name, which is bakeitfreeformwebsitetweets. Description Website Tweets. Put the URL in. Don’t need a Callback URL. Tick the Yes, I agree. It says I need to add
my mobile phone number to my Twitter profile, so
I’ll just do that quickly. Duh, duh, dum. Where is the phone number bit? Must be in here? Ah, mobile, there we go. So, just add my phone number. Text you a code. Just got it, so I’ll type it in. There we go. So let’s go back and try
and create that again. Doesn’t like my URL. I think it needs the http. There we go, the http code, http://, you know, the usual. Eh, there we go. And now we’ve got some
keys and things, so. Let’s click on keys and access tokens. And here’s the things we
need to copy and paste into our Widget on WordPress. So, I’m just going to go down here and click Create My Access Token. And then we’ve got everything we need. So the first one is Consumer Key. So, I’m just going to
copy that to my clipboard, paste it in, make sure there’s no spaces
or anything that come across. There’s the next one. Then, towards the bottom on here you’ll find your Access Token and whatnot, so just copy the Access Token. And paste in that one. So, let’s click Save. Then we’re good to go. So, then what we need
is this short code here. I’m just going to copy that and then we’re going to
go back to the homepage. I’m using X-Theme on this website, but it doesn’t really matter
what theme you’re using. You’re just going to need to, obviously, paste that short code where
you want it to appear. So let me edit this page. The (mumbles) does have a
quite a nice visual editor, but you can just paste it into the more, the normal WordPress Editor, or whatnot. So, just going to, um, down the bottom here, I think I’m going to add
a new section, I think. And then, within that section
I’m going to add a text, so this is going to vary
depending on your theme, etc. But, basically, I’m just looking to paste
the actual code in like that. And it’s brought up more
than I wanted, so, um, I need to adjust my Settings I think. But, yeah, that’s looking good. Click Save. And let’s have a look at the page. Think it’s forgotten
those 10 Tweets Settings that I’ve done, so let’s
go back into Widgets and adjust those Settings. So, um, Widgets. Ah, yeah. I should be,
that one should be one. I thought I changed that earlier. Let’s click Save. And refresh. And there’s our Twitter feed. So, I hope you found it useful. I’m obviously just going to tidy up a bit and move the space
around, move it up a bit, but that’s going to be theme-specific. Hopefully you’ve got Twitter
feed now, on your website and it’s looking good. If you’ve got any questions,
please leave them below. If you like what I’m doing,
please click the like button. And subscribe for more videos. Until next time, it’s bye for now. (peppy soft rock)

Only registered users can comment.

Leave a Reply

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