New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding a Facebook Page feed to your web site

From: Social Media Marketing with Facebook and Twitter

Video: Adding a Facebook Page feed to your web site

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.

Adding a Facebook Page feed to your web site

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.

Show transcript

This video is part of

Image for Social Media Marketing with Facebook and Twitter
 
Expand all | Collapse all
  1. 1m 3s
    1. Welcome
      1m 3s
  2. 22m 45s
    1. Understanding online marketing
      9m 12s
    2. Comparing Twitter and Facebook
      8m 38s
    3. Preparing for online marketing
      4m 55s
  3. 26m 10s
    1. Setting up your business account
      6m 45s
    2. Creating and applying custom backgrounds
      9m 1s
    3. Tweeting and following
      5m 21s
    4. Following Twitter's terms of service
      5m 3s
  4. 25m 46s
    1. Setting up your personal profile
      7m 42s
    2. Understanding the News Feed
      5m 47s
    3. Controlling access to your posts
      4m 48s
    4. Customizing privacy settings
      3m 30s
    5. Following Facebook's terms of service
      3m 59s
  5. 1h 5m
    1. Crafting follow-worthy Tweets
      8m 55s
    2. Attracting followers
      7m 41s
    3. Following the right people
      6m 10s
    4. Responding to mentions
      5m 40s
    5. Tracking keywords in the Twitter stream
      7m 8s
    6. Using hashtags
      4m 12s
    7. Getting Retweeted
      9m 7s
    8. Adding your Twitter feed to your blog or web site
      4m 51s
    9. Integrating a "Tweet This" feature into your online marketing
      4m 12s
    10. Measuring your impact
      8m 1s
  6. 2h 2m
    1. Touring Facebook Page timeline features and controls
      9m 49s
    2. Creating a new Facebook Page
      7m 50s
    3. Creating a profile picture
      8m 26s
    4. Designing a cover image
      7m 38s
    5. Creating a combined cover-and-profile image
      8m 43s
    6. Using the admin panel
      4m 26s
    7. Editing important Page settings
      7m 19s
    8. Adding and featuring Page admins
      6m 0s
    9. Customizing the apps bar
      5m 39s
    10. Posting to your Page strategically (for EdgeRank)
      5m 18s
    11. Pinning, highlighting, and adding milestone posts to the timeline
      6m 18s
    12. Managing spam by hiding and unhiding user posts
      6m 3s
    13. Using the Notes app for longer posts
      5m 43s
    14. Using Facebook as your Page
      4m 58s
    15. Adding favorite Pages to your timeline
      4m 9s
    16. Building an audience for your Page
      7m 22s
    17. Adding a Facebook Page feed to your web site
      7m 38s
    18. Analyzing traffic with Facebook Insights
      9m 8s
  7. 59m 22s
    1. Reducing your workload with social media management programs
      9m 27s
    2. Enhancing your Page with Facebook apps
      5m 53s
    3. Creating your own iframe app to customize your Page
      14m 55s
    4. Using a third-party iframe app
      6m 39s
    5. Adding a Like button to your content outside of Facebook
      6m 29s
    6. Advertising on Facebook with Facebook Ads
      12m 28s
    7. Advertising on Twitter with sponsored Tweets
      3m 31s
  8. 3m 59s
    1. Next steps
      3m 59s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.