Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that you have your Facebook page all set up, I'm going to show you a way that you can spread the wealth. You can leverage all that work that you did by integrating your Facebook page with your other online sources, such as your web site or your blog. Here's one example. This is one of the pages that I admin; it's called DesignGeek. It's a newsletter that I've been writing for a number of years. And my business is this one right here, Seneca Design & Training. And I wanted to promote my DesignGeek Newsletter in the Home page of Seneca Design & Training.
So if I scroll down, you'll see there's a Like box. There are number of different settings that you can make with this Like box. One of them is whether or not to show the posts that have been occurring called the Feed on your page. Another one is whether or not to show pictures of the people who've liked your page, but at least you'll have your profile picture and the name of your page and a Like button right here. So if somebody comes to your page and they are not currently logged into Facebook, or they currently logged into Facebook, but they don't happen to like your page yet, they could do so right here.
Anybody could click right here on DesignGeek and jump right to your Facebook page. So I'm going to show you how to create one of these guys for your web site or blog. Here is our Facebook page in its current state, Bliss No.5. And Bliss No.5 has a web site/blog. What I'd like to do is add that Like box that we just saw integrated on the Seneca site, right here to Bliss No.5 site. So how do we do that? Well, let's go back to our Facebook page.
What we are going to do is add what's called a Like box, and that is a Social Plugin. Facebook has a bunch of Social Plugins as we'll see in a second, and you get to the Social Plugins currently through your Admin Panel. Go to the Manage dropdown menu and choose Edit Page. I personally think that it should be right here under Build Audience, and maybe they'll move it over there. So if you don't see it where I'm going to show it to you right now, just look for something that says Social Plugins. But here we're going to go to Manage,> Edit page and down here we have Resources.
Look for Use Social Plugins, or even better, find it and then Bookmark it, because this is a separate page; it really has nothing to do with your account on Facebook. So this is a developer's page and a list of all the Social Plugins. Now, a lot of these are things that really require some programming expertise to use and many of these are meant to integrate people's personal Facebook accounts with all other web site properties outside of Facebook. And I'm sure you have encountered these and used these yourself. If you've ever needed to comment on somebody's blog or log in to a private section of a web site and they say, you need to log in, would you like to log in with your Facebook account? That's one way or you've been able to add comments to somebody else's web site or blog that looks like a Facebook comments box, because that's actually going to show up on your Facebook Feed.
That's what all this is about, what they call social plugins, but there are a few available here that we can install. The one we want to look at first is called Like box. The Like Box enables users to Like your Facebook page and view its stream or Feed directly from your web site. So let's click on there and it's nice and easy to use; I love this. The first thing though they have to know is what is the URL of your Facebook page? Now, if you're not quite sure what any of these fields mean, just hover over the question mark; get a nice tool tip that explains what it's about.
So I just need to paste in the URL of my Facebook page. Let me get that real quick. And is this right here - now you might already have a nice normal URL that you can just do from memory, but this site doesn't have one. Let's go back. So here I'm going to select this and paste. And then the width, do you see the minimum supported plugin with is 292 pixels. So you can make a really wide one, but this is the minimum 292, so we're going to leave it at 292. I personally would like to get it even smaller than that, because I think this is less than 292, but we'll see how it goes.
Now the Height field, I'm just going to leave it as it is. I'll let it grow as tall that needs to be. You have a huge selection of Color Schemes. You can choose either Light or Dark. And actually, what's kind of interesting if you look at this, is that the background is transparent. So it looks like if you choose Dark, that it actually gets a dark background, but that's not true. It's saying this is the best color scheme for dark web pages. If you have a Light web page you should choose this one, because it has dark lines.
So I think that ours is probably going to do better with the light one. We'll see. Do you want to Show the Faces of the people who like your page? It won't be able to show everybody. It will show two rows though. Maybe you don't want to. Maybe you think that it would violate their privacy, of course people can set that in their own privacy settings. If they're going to allow their profile picture to be seen outside of Facebook or not; I'm going to leave it turned on. You change the Border Color and if you click in here you need to actually type in a hexadecimal code for the color and I'll leave you to investigate what that means elsewhere.
Do you want to show the stream? Do you want to show your posts? Now on the Seneca one, I didn't want to show the design key extreme, because I don't post there often enough and it would be kind of embarrassing to see a post from like five months ago, so I turned it off. But we're going to leave ours on, and then the Header. So the Header, let me zoom up. If I show the Header, there is the Header up here, Find us on Facebook. If I turn it off, then that's gone. We'll leave it off; I like it better off. And when you're done setting this up and previewing what it looks like, just choose Get Code.
And it puts three different kinds of code in front of you. Now, HTML5 and XFBML, I have not found any need to use either one. I just go right to iFrame. This is kind of like a miniature web page inside of another page. So I'm just going to select all this text, copy it, OK. And then, we need to add that code to our web page. Now, if you have a web developer, you don't know how to this yourself, then you would send this in a text file or in an email to your web developer and say, hey, I need you to add this to the Home page or wherever it is that you want to add it to.
But I happen to be using a WordPress blog and I know because of the wonderful WordPress video tutorials here on lynda.com, that all I need to do is log in, as I've already done, as admin, go to Design, choose Widgets and then add that to one of these text Widgets that will appear on my sidebar. You may remember this from when we did this for the Twitter stuff on our blog. I'm going to open up this one, which is currently empty. I don't need anything in the Header area. I'm going to click right here and Paste; there it is.
And choose Change, meaning Updates, and Save Changes. Now, let's look at our page. I'm going to need to refresh it first. And let's see. Well, there it is. Okay, it's not the prettiest thing, but it does the job. I might experiment and try that other one, the dark one, and see what that looks like. Actually I think that might look worse, because it uses white lines or maybe I'll just re-design my web site to match the Facebook Like Box. Though it's probably easy enough to find somebody who could put a background color behind here, I think.
Anyway I hope that you have seen how, actually it's pretty simple to create one of these Like boxes and add it to your web site or to your blog. Once you have your Facebook page set up, there's really no reason not to.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.