– In this video, we’re gonna
be adding a Facebook widget to our WordPress website. It’s basically just a little
thing that shows off your page and your number of likes, and people can click buttons and whatnot. In fact, it looks just like this. There you go, it’s one of those, and I will show you how you can add that to your WordPress site in this video, so let’s get started. (gentle music) Hello, it’s Alex here from
WPEagle, thanks for dropping by. As I said, in this video
we’re gonna be adding a Facebook widget to
our WordPress website. You can basically add
one of these anywhere. You can put them inside a page, you can put them in a
side bar, in a footer, wherever you like, really. Wherever you can paste
some code, that’s fine. Anyway, I’m gonna take you
through it step by step. So let’s get on the
computer and get going. Okay so I’m over on the website
that I’m gonna be adding the Facebook page widget to. It’s this particular page,
in fact, the About Us. I just wanna add it over here. It’s quite a straightforward process. What we’re gonna do is
head over to Facebook, get a bit of code, and
basically copy and paste it. The page you want to go to,
I’m just gonna go to Google and type in “Facebook page
widget” and press Enter, and the first one comes up,
it says Page Plugin thingy, which is what we want. We want one of these things. You just gotta fill in
some things on here. You gotta find your Facebook URL, which you can find by going onto Facebook
and looking at your page, and type it in. I know what this one is. I think it’s that one. Nope, it’s that one. Let’s have a look. There we go. Here is the tabs. Normally
Timeline is just fine. Kinda just shows some of your posts. If you don’t want Timeline, then just simply remove
that out like that. Then you just get a, let me show you, just get that sort of thing. But I think it’s nice to have a couple of posts coming up. Why not? You can add other things if
you want, just add commas. Events, that sort of thing. You see you get these kinda tabs, then. I’m just gonna leave
it as Timeline for now. You can set a width and a height. I’m just gonna leave that
for now and hopefully it’ll just fill the space as it should. You can reduce the size of
the header down if you want, make that a little bit smaller. I’ll leave it big. It’s nice. You can get rid of it
completely, if you want. Get rid of the cover photo, anyway. Leave that to adapt, and you
can show your friends’ faces, which, we’ll not be able
to see your friends, they’ll be whoever’s looking
at your page’s friends. That’s quite nice, too. So once you’re done, you go
down here and click Get Code. Rather than this sort of stuff, which is a little bit more complicated, we’re just gonna go through the iFrame. So click over here, iFrame, and then click on this thing here, and I’m just gonna copy
that to my clipboard with a Control + C, Command + C on a Mac, which I’m on, so I did a Command + C, but Control + C on a PC. You get what I’m saying. Go back to your page. Let’s click Edit with Cornerstone. Now I’m using X Theme, which
has got a page builder, visual editor type thing, but you basically just
wanna paste that code wherever you want it on your site. Could be into a Widget. A
text Widget, for example. Or you might put it just in
the main body of your page, maybe in a column. I’m gonna put it down here. With this page builder, and your theme may have
a page builder, too, maybe a visual editor, whatever. I’m just gonna put a text
thing in here, like that. Using the text editor here, so again, if you’re on a page, make sure that you’re in
the text and not visual. Paste that in. There it is. Looks a little bit squashed, but we’ll see what it
looks like actually when we come out of this preview. This also needs a little bit of space. On my page builder, I’ve got a gap thing. Again, it depends on your theme, really. I’m gonna put that in like that. Let’s click Save. Let’s view the page. There it is. Now, it is a bit cut off, so I think I’m gonna have to
set a width, which is fine. Let me just see how wide things are here. Let me see how wide that image
is and we’ll go with that. Two five five, so that’s fine. We get back to the page on Facebook, go up here again, and we have
to put a width in of two… Hopefully there isn’t, the
minimal one’s 80, so that’s fine. Two five five. Come down again. Click Get Code, get the iFrame. You’re gonna have to just
adjust width and height if you need to, if it doesn’t
look quite right on your page. Let’s quickly edit that again. For some reason, I can’t select it. I can get around this by
going into this editor. It’s just this visual
editor thing in X Theme. It probably won’t be a problem for you. Let’s get rid of that iFrame
and put the new one in. Click Save. Click View Page. There it is. I think it
could be slightly wider. Let me just see how wide it needs to be, cause it’s gone over to the left and it doesn’t look quite right. You’re just gonna have to
play around with it yourself, in terms of getting your
Widget looking right. It can be a little bit temperamental. I’m just doing this so I can
see how wide it needs to be. There we go. It’s whenever it stops getting wider. It looks like it’s 290. Let’s go back again, one more time. Just add 290. There we go. Then get the code one more time. Back and forth, forward… wait. Close that. Edit with Cornerstone. Okay, there we go. I’m sure it’s gonna be fine
now. Let’s have a look. There we go. So that concludes this video. Hope you found it useful. If you’ve got any questions,
please leave them below. I’ll do my best to help you out. 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. (upbeat music)