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!
LifeChurch.tv’s implementation:
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!
Have fun.
Daniel Decker says
Thanks for this. You are the genie of the lamp. 🙂
Just curious… are you finding it preferred to embed a FB stream like this versus a Twitter stream? Are there pro's / con's that have you choosing one over the other? I assume FB integration is easier since, if I understand right, to do a Twitter stream people have to use a hash tag to show up. Right? Am I totally missing it?
human3rror says
Perhaps… stay tuned for an integration strategy that we're cooking up that's super easy… and better than just #hashtags.
🙂
Paul Steinbrueck says
I'm torn over the FB live stream and similar live streaming for twitter. I like it from the perspective of a conference or event facilitator because for each person who chats via FB or Twitter all their friends/followers see their messages. But from the standpoint of a user, I'm unsure about it for the very same reason.
I don't think my friends/followers would want to see updates from me at the frequency I would chat – many times per hour. It would probably annoy many of them or worse. I would rather chat with just the people at the conference and periodically post a FB update or tweet for things that I think are really significant.
Anyone else feel this way?
human3rror says
It's not for chat. I changed that wording. We are using it more for “inviting” or 1 or two updates.
There is need for education of its use as well, so that people don't “spam” their accounts.
mike brennan says
If you aren't using this for chat but for invites, what are you using for chat?
Lauren says
Tough call. On the one hand, I bet a lot of my friends/fellow-tweeters wouldn't want to see ALL of that back and forth. But on the other hand, you gotta admit that this is a pretty sweet tool.
Either way, it's nice to have the option. Thanks so much John!
human3rror says
Sure thing! Pass it on!
edward church says
follow me on twitter as foxangels as king of peace
philldo says
Thanks for the post. I didn't realize it was that simple to integrate the FB chat.
The invite model makes more sense to me. I am torn on the appropriateness of chat during a service. I understand it's a great invite and viral marketing tool. It can be a powerful follow up tool when pastors / mentors can comment or DM a person based on their questions in a chat. And, I understand that people are getting used to multi-taking and twittering / sharing during every aspect of their life.
BUT, I'm leery of just jumping in because everybody else is doing it. Call me old school – If you are talking then you are not really fully listening. Some people are eager to share at the expense of fully comprehending what they are experiencing.
I am sure you guys have thought this all through and am eagerly looking forward to learning from your implementation and strategies with NPOnline.
human3rror says
Phil,
That's why we're putting it below the fold in terms of the actual experience. our goal is to provide the best video experience ever, without distracting elements. we'll expand on this idea and explain more on the blog.
😉
mike brennan says
Thanks so much!
human3rror says
of course! pass it on!
ed church says
for me using face book on chat I would not use it to enter any thing on it u never know what others may not like ur opinion on or not
human3rror says
that's ok. 🙂
gabehoffman says
I got it up and working before I saw this, but thanks for putting it up. Do you have any feelings about using an iFrame like you did or the Facebook connect feature with the xd_receiver.htm file and all that (option 2 on http://wiki.developers.facebook.com/index.php/Liv…
I have to totally agree with the invite thoughts as well, it's not a chat box, but just a comment or two sort of solution.
I'm looking forward to your thoughts on chat as well.
human3rror says
Gabe,
Spent some time with the townsends yesterday… love those guys.
iFrame is the easiest solution. there are obviously other ways. i thiink we may move to xd_receiver, since we'll be probably doing more tight integration than we have now, but we're doing fast-rotation-prototyping right now, so the goal is to get a “visual” of what it can be rather than functionality builds.
😉 rock it.
Shaun says
Be careful with your " " quotes. They were causing problems when I coppied them into my code.
Shaun McMillan says
nevermind, it's working finally, yay 😀
Shaun McMillan says
Anyone have any idea why this isn't working for me? What am I missing?
http://www.drawalot.com/nhm/facebook.html
human3rror says
i see the box…
Mahesh says
Sorry but it is not working for me.
and showing “Sorry, this page isn’t available”, even if i tried the iFrame URL directly.
Please advice
Saim says
Hi,
I need to integrate with Facebook so that when an event is posted on the website it is also posted on Facebook. Do you see any article related this. Please let us know.
Saim says
Hi,
I need to integrate with Facebook so that when an event is posted on the website it is also posted on Facebook. Do you see any article related this. Please let us know..
Arash says
Hi, how can I create a tab on our church Facebook page that shows the status of our live streaming. At this point we only live stream our services on Sunday.
Thank you!!
Frans Timmermans says
Thanks for the blog 🙂
Got one question :
Is it possible to add more streams from different pages?
My idea: Visitor can check on my website if their fav. dj is streaming and open the stream in a div.
Greets,
Ramon