How to (fully) integrate YouTube into Facebook

January 30, 20116 Comments
Facebook Twitter Pinterest Plusone

There is tons of traffic out there for the taking on YouTube. It’s the second largest search engine in the world behind Google.

Growing your audience on your YouTube channel isn’t easy, and sometimes, it’s nice to get a helping hand. :)

This tutorial / overview shows you just how easy it is to build a quick Facebook application that integrates fully with YouTube data, pulls back the videos you need, and encourages Facebook fans to not only watch videos inside the platform, but share them with Facebook friends and grow your audience further.

As I’ve stated before, there are applications such as Involver out there to do this sort of thing for you, but hey – where’s the fun in that? You may also want to build on additional features, or add messages / logo’s etc. that wouldn’t otherwise be possible. This way, you have total control over your page.

What we are going to build.

As with my previous tutorial, this is going to be built in PHP. I’m guessing the majority of developers have come in to contact with it at some stage in their programming careers, willingly or otherwise.

If you aren’t a code monkey, worry not, the following should take you through step by step without much hands on code tinkering.

Here’s what we are going to end up with. A list of all the YouTube videos in your channel, with paging, and some css to tidy things up. There’s also a  like button for each video in the interface, driving further traffic back to your channel. Click on the image to take a look at the demonstration for yourself.

YouTube API = Zend

The YouTube API is provided through a third party library called the Zend Framework. Many of you PHP developers out there will already know your way around it, as it provides other functionality such as XML parsing etc. Google have opted for the lazy way out on this one, and direct PHP developers to Zend instead of writing their own YouTube libraries.

Downloading the samples

Instead of taking you through every piece of the code, and explaining it all, I’ve provided full source code here, this contains the Zend Framework and all, so all you should have to do is upload to your server in a subdirectory with changes to get motoring.

Download the files to disk, and open up the index.php file in a code editor to make changes.

Making the changes to the files

The changes you’ll need to make to the source code are relatively minor, although it’s worth taking a look through to see how the code works, and how you can build upon it.

Lines 11 and 12 are the main configuration variables. Line 11, is the fan page ID for your fan page. I figured this out by logging in as an administrator of the page, then hovering over the edit button. The URL for the editing of the page can clearly be seen in the toolbar of (Google Chrome) and that represents your fan page ID. (There’s probably a smarter way to find this, but hey, it works.)

See…

public $fan_page_id = ’19040221057′;

Just change your own Line 11 to match your own page ID when you find it. Line 12, is another simple one. It represents the YouTube user ID of the channel you want to show. In my case, that’s just ‘webdistortion’. Replace this line with your own YouTube username.  That’s it, you can upload the file back to the server.

Now we just need to setup and configure Facebook.

Adding the app to Facebook

I’m going to assume that you’ve managed to upload the files into a sub directory on your server. In my particular case, that sub directory is called ‘youtube-fb’, and the full http path to my files looks like this ‘http://www.webdistortion.com/youtube-fb/’ Take note of the directory path that you have chosen, as you’ll need it in the configuration settings for Facebook. Here’s the steps you’ll need.

1) Visit www.facebook.com/developers
2) Click ‘Setup new app’
3) Call the application whatever you want. I chose ‘ytubewebdis’. Agree to the terms, and answer the security question
4)  Go to Facebook Integration, and use the below settings. Note. this is where most people get things wrong, please take the time to double check everything here.

Canvas Settings:

Obviously, the name of your application will be different here, as will the Canvas URL. Change the Canvas page to the application name set in step 3), and the Canvas URL to the subdirectory where you uploaded the files. Set the Canvas type to ‘FBML’

Page Tab Settings

Set the tab name to whatever you want your tab to be called (in my case, just videos was fine), and the tab URL to the index.php within your subdirectory. That’s it, that’s all you have to do. Save the changes within your application.

Adding the app to your page

Now that you’ve saved your settings, the next step will be to add the application to your page. The interface within Facebook can mess with your head, so I’m going to take you through it. First step, is to find the link at the top of the page that says ‘Back to My apps’.  Click on it first.

Find the application that you’ve just created, and click on Application Profile Page. Again this can sometimes hard to see on the page, but will be on  a page that looks vaguely like this.

Now finally, you have to add the application to your page of choice. Click ‘Add to my Page’, selecting the Facebook fan page that you wish to add it to, and you should find that it has now been added to one of your tabs! If not, simply click the + sign to the right of your existing tabs, and select your newly added tab.

Woohoo! That should be you now up and running with a new tab that displays all of your fresh YouTube uploads. Other settings you may want to tinker with include line 76 -

$ytQuery->setOrderBy(‘viewCount’);

This is the current ordering of the videos which come through in the feed. You may want to use any of the alternatives such as ‘rating’ or ‘updated’.

Other things to consider

You might want to customise things even further, my logo is on Line 157, undoubtedly some of you may want to change that for starters. It’s just simple HTML, so should be a breeze.

The CSS is also all inline, just to keep things all in one file, and to allow tinkerers ease of access. It probably would be better externalised.

Line 20 can also be commented out if you don’t want to link back to me for the credit, (I don’t really mind, but would be nice to get a little karma for my hard work).

The paging could probably do with some additional styling, some code for prettier styles can be found on this old post.

That’s pretty much it folks, enjoy, and hit me up with a comment if you are struggling with things, although should be self explanatory considering there’s only one file to worry about.

Filed in: Programming
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (6)

Trackback URL | Comments RSS Feed

  1. ayman says:

    i reused your code but the palyer is not displayed

  2. Paul Anthony says:

    Ayman –

    Can you show an example? what version of PHP are you using?

  3. Jimmy says:

    Thanks, Its was very hard to find a straight forward explanation like you gave.
    Though even i could not see the video player but i l fix it somehow.
    Keep up the good work :)

  4. avi says:

    Hi Paul,
    first – many thanks to you for standing out and providing that code – you r #!.

    if i may ask you:
    1. how can i show one larg video window and after the small ones, and clicking each small video will show it in main window (as in involver)?

    2. how to change small video thumbs window size?

    regards,
    avi

  5. avi says:

    i saw in your tab its showing what i asked. but after i used your files
    it didnt show the main play video and clicking videos wont play.

    any idea?

  6. Paul Anthony says:

    You got a sample URL? Send me an email, might be able to help you out if I’ve access to the Facebook page and your hosting… other than that I’ve sort of one hand tied behind my back to get it working.

    Paul.

Leave a Reply

Back to Top