Adding a YouTube Video to your Facebook Page

  • Share

Do you have video content hosted on YouTube that you’d like to make available on your Facebook Page?  Fortunately, this can be done and it isn’t that difficult.

First, I want to give HoneyTechBlog a shout out for their post on how to do this.  Yes, I too surf for answers to questions as it really makes sense to not re-invest time in something someone else has figured out.  This is why I try and pay back to the larger community by posting about things I’ve learned.

Next, if you don’t have a Facebook Page yet check out our “Creating a Facebook Page” post on setting that up.  You also will need to install Facebook’s Static FBML application.  Our “Adding a Facebook Custom Static FBML Tab” post will walk you through that process and provide you with some sample code to get you started.  At the end of this article I’m sharing some more sample code to extend on the previous sample, adding in some styling and code for the YouTube video player.

So, how easy is it to add a YouTube video within our Static FBML tab?  It’s about 5-6 lines of code, which you can re-use by just changing the video URL.  To style it a bit you’ll want to add some CSS.  Here’s what I’ve added to the “Adding a Facebook Custom Static FBML Tab” post sample code:

    /* style code */
    .__fbswf {
        text-align: center;
        margin: 0;
        padding: 0 0 1em 0;
    }

    /* FBML Flash Code */
    <fb:swf
    swfbgcolor=”000000″
    imgstyle=”border-width:3px; border-color:white;”
    swfsrc=’http://www.youtube.com/v/xxxxxxxxxxx’
    imgsrc=’http://i1.ytimg.com/vi/xxxxxxxxxxx/default.jpg’
    width=’440′ height=’360′ />

Just change the x’s to your video’s ID and that’s all there is to it!  If you want a better static image than what YouTube will present, change the “imgsrc” reference to an image that is sized properly. For an example of how this would look, check out the videos tab on the WEBphysiology Facebook Page. Don’t forget to click the [Like] button while you are there.

Here’s a video if you want to see the process in action:

httpv://www.youtube.com/watch?v=UI65ZtdN5iE

And, here’s the sample FBML code with the video code added:

  • Share
This entry was posted in Social Networking and tagged , , , , , . Bookmark the permalink.

About Jeff Lambert

Entrepreneur Jeff Lambert is the President and founder of JVHM, Inc., a software development business located in the San Francisco Bay Area but serving clients around the globe. Jeff's expertise includes website design and development, Facebook development, blogging integration, SEO, video production, CRM systems, database design and development and more. In his "spare" time Jeff likes to hang out with his family, run, play tennis, fly and breath fresh, clean air.

Leave a Reply

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