How to add a Twitter feed to WordPress

Shares

In this article we’re gonna be bringing a Twitter feed onto a WordPress website, so you can show your Tweets in real time on your site.

They look just like this.

Twitter Feeds

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 going to need to spend any money which is good news.

So, well let’s get started.

As I said, in this article 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 any where 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 started and I’ll show you how it works.

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.

That’s the one we want.

 

Let’s click Install.

install-plugin

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.

active-plugin

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: “Widget ShortCode”.

Click Install Now.

Then click Activate.

widget-shortcode-2

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.

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.

Arbitrary

So let me go and find the Tweet Scroll widget. Here it is.

Arbitrary Widget

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 jqpluginsbuzz.

Number of Tweets to Load is fine.

Now, I just want tojust 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. 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 Twitter Apps.

Then we need to sign in.

So, let’s sign in to Twitter.

Pretty easy to count thatyou’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 demotweet.

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, soI’ll just do that quickly. 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. 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 what not, 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 WordPress Default 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.

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.

Hopefully you’ve got Twitterfeed now, on your website and it’s looking good.

techguide-feeds

Reply

Pin It on Pinterest

Shares
Share This