Facebook Connect and their API is powerful toolset that when leveraged appropriately can provide a huge source of traffic and increased engagement with your users.
As you can see above (check out these other screen shots too), North Point Online will be using it and LifeChurch has been using it for sometime now. It’s close to being a “must-have” feature for any event that you’re having online as the benefits are definitely worth it!
And, what’s so nice is that it’s not too hard to add this functionality to your site! You can literally have it up and running in 5 minutes (or less)!
I’ll walk you through how I added it to ChurchCrunch Live‘s Footer, which is a site I plan to use for Live-Blogging Conferences and Events that I’m at (a perfect place for Facebook Live Event Module!):
Ready? Let’s start.
Step 1 – Create the App in Facebook
First things first. Go here to create the App in Facebook: http://www.facebook.com/developers/createapp.php. Give it a name:
Then, add all the necessary info that you can, including logos, icons, user-facing URLs, etc on the “Basic” tab:
You technically don’t have to fill out really anything except this next part.
Go to the “Connect” Tab on the left and fill out this important information there:
Make sure you get this right!
And that’s it! Make sure you write down (or copy) your Application ID, as you’ll need that next:
Step 2 – Create the iFrame, Style, and Finish!
Honestly, most of the hard work is done already!
All you have to do is copy some iFrame code into your template or website with the Application ID, adjust some of the width/height to fit correctly, and you’re done!
As you can see, I’m adding the code to the bottom of the page, just above the Footer. I’ve added a “fbc” <div> class to styling to make sure it’s centered correctly, etc.
You don’t have to do any of this, of course, and most people won’t have to do anything with CSS styling.
And here’s what the code looks like in my footer.php file (I’m using WordPress to power this site).
As you can see, I’ve adjusted the width to be 983 pixels wide (matching my div class) and the height is 500 pixels.
You can, of course, change all of this to whatever you’d like! The only important part for you to change is the “app_id” value, which is currently set to 94203137849, which is my application ID.
You’ll want to change that to your own. Here’s the code for you to copy:
<iframe src=”http://www.facebook.com/widgets/livefeed.php?app_id=CHANGE_TO_YOUR_APP_ID&width=335&height=500″ width=”335″ height=”500″ marginwidth=”0″ scrolling=”no” frameborder=”0″></iframe>
And that’s it! Check out the final product here on ChurchCrunch Live!
Let me know if you’ve implemented it and show me!