I haven’t blogged here in ages! I’ve just been too darn busy on work projects and personal web projects — I hope to share about those soon. And, I never publish a blog post late on a Friday afternoon. But I’ve had several librarians hit me up on Twitter the past couple days asking me to share my process for embedding the LibraryH3lp chat widget into Facebook Pages in light of the changes Facebook just made to custom Page tabs.
Many libraries, including my own Pollak Library used to rely on the LibraryH3lp Facebook app to embed our chat reference widgets into the sidebar of our Facebook Pages. But, back in August, Facebook did away with the ability for Page administrators to display custom boxes in our sidebar. After that switch, I just never got our LibraryHelp3 service up and running again on Facebook. Until yesterday.
On February 10th, Facebook made iframe tabs available for customizing Pages by creating a tab app to pull externally hosted content in via an iframe, instead of just displaying FBML (Facebook Markup Language) — by the way, Facebook is now deprecating FBML. The ability to create and pull iframe tab apps into a Facebook Page now makes it much simpler to embed our LibraryH3lp chat widget into our library Facebook Page, as a customized Page tab.
Facebook apps, in theory, allow other Page Admins to add an app to their own Page(s). I could see tremendous value in allowing our campus, our colleges, and our professors add our library chat widget app to their own organizational/class Pages, so I had a couple non-library colleagues test this out today. While it appeared to allow my colleagues to add the app (see: Adding It to Your Page) to their own Pages, the app tab never actually appeared on their respective Facebook Pages. So, I will do a bit more investigating and testing next week.
A Word of Caution
The HTTPS support that Facebook implemented last month conflicts with some apps — including iframe tab apps. Facebook claims to be working on a fix, but for now, anyone currently using HTTPS account security settings will not be able to use or see your chat widget. And all Facebook users must be logged in to Facebook in order to access the chat app — even if they are not using HTTPs.
So, my next step will be to identify a solution that can display a warning prompt under the tab header, such as “Not seeing our chat widget? You must be logged in to Facebook and have to disable your HTTPS account settings.”
Creating Your App
To embed your LibraryH3lp chat widget into a tab on your Facebook Page, you first have to create a very simple easy app.
- While logged in to Facebook, access My Apps (you can also find this by clicking on any app you’ve already installed, then selecting “See My Apps” from the top of your right-hand sidebar).
- Click on the Set Up New App button, to open the Create dialog box.
- App Name: Assign a name to your application (I used “Pollak Library LibraryH3lp App”), accept the TOS, and complete the Captcha security test.
- Complete the “About” sectionof your Edit [Your App Name] screen.
- Description: Provide a brief description of your app (I used “LibraryH3lp chat reference widget for the Pollak Library Facebook Page”).
- Logo: Upload an image file that represents your app or your library (I used the CSUF Librarian chat icon we display on our library website).
- Icon: This is the visual icon that will display next to your Page tab name (I used the Logo image).
- User Support Address: Select an email address or a web address (I used my work email address).
- Contact Email Address: For your primary app administrator (I used my work email address).
- Privacy Policy URL: Use a web address, if applicable (I left this blank).
- Terms of Service URL: User a web address, if applicable (I linked to our chat reference web page).
- Leave everything else blank, or on the default settings.
- Click on the “Facebook Integration”section of your Edit [Your App Name] screen.
- Application ID: This is auto-generated (I’ve blurred mine out of my demo photos for security reasons).
- Application Secret: This is auto-generated (I’ve blurred mine out of my demo photos for security reasons.)
- Canvas Page: The URL for your iframe app (I used “pollaklibrarychat”).
- Canvas URL: The URL from which your iframe app is pulling your external tab content (I used the URL For our main LibraryH3lp chat queue widget).
- Tab Name: This is the name of the custom tab that will appear on your Page’s tab menu in the left sidebar (I decided to go with “Ask a Librarian” instead of my original “Chat with Us!”, in the event other campus Pages can add our app to their respective Pages).
- Click on the Save Changes button to return to your My Apps page.
- It may take a few minutes for your app to go into production, or for any changes/edits to take effect.
Adding It to Your Page
Next, you have to actually add your new app to your Facebook Page.
- From your My Apps page, select your new app from the left sidebar if you accidentally clicked off of it.
- Click on the “Application Profile Page” link in the right-hand column of your app page, to access your public app page (you might want to upload your app logo or your library Facebook Page profile photo here, too).
- From the left sidebar, select “Add to my Page” to access a dialog box that displays any Pages on which you serve as an administrator, then click the “Add to Page” button for your library Page.
- Verify the app was successfully added to your Page by going to your library Facebook Page, then looking for your app title and logo in the left sidebar of your Page (these are now displayed under your Page profile photo since the move to the new Page formats). You might have to click on the “More” link to display all your tabs.
- If you want to move your chat app tab higher up on your list of Page tabs, click on the “Edit” link at the bottom of your list of tabs — you might have to click on the “More” link to display all your tabs again. Then simply drag and drop the app tabs to rearrange them.
Follow my professional Facebook Page , which is packed with tips, collections, events, and news personally recommended by me. I scour the web for great information for you. See you on Facebook today!
Hi Colleen,
I am trying to get our Libraryh3lp widget up on Facebook. On the Create an App page, can you clarify what URL we enter for the “Site URL” field? Is this field for the URL of our library’s chat queue/widget?
Thanks,
Cindy
Hi Cindy,
I assume you are referring to the Canvas URL field in Step 5 of Creating Your App? That URL needs to be for your library’s LibraryH3lp Queue Identity chat widget (the one use for your reference team) — as opposed to the LibraryH3lp Individual identify chat widget (the ones assigned to each librarian).
The LibraryHelp web chat wiki notes it as something like this format: http://libraryh3lp.com/chat/mainlibraryreference@chat.libraryh3lp.com (with your library’s LibraryH3lp account name replacing “mainlibraryreference” in that URL).
For example, the URL I entered into our Canvas URL is: http://libraryh3lp.com/chat/csufreference@chat.libraryh3lp.com/
Hope that helps!
Hi Colleen,
I am trying to get our Libraryh3lp widget up on Facebook. On the Create an App page, can you clarify what URL we enter for the “Site URL” field? Is this field for the URL of our library’s chat queue/widget?
Thanks,
Cindy
Hi Cindy,
I assume you are referring to the Canvas URL field in Step 5 of Creating Your App? That URL needs to be for your library’s LibraryH3lp Queue Identity chat widget (the one use for your reference team) — as opposed to the LibraryH3lp Individual identify chat widget (the ones assigned to each librarian).
The LibraryHelp web chat wiki notes it as something like this format: http://libraryh3lp.com/chat/mainlibraryreference@chat.libraryh3lp.com (with your library’s LibraryH3lp account name replacing “mainlibraryreference” in that URL).
For example, the URL I entered into our Canvas URL is: http://libraryh3lp.com/chat/csufreference@chat.libraryh3lp.com/
Hope that helps!
Colleen,
First off, thank you for writing the tutorial. It has been very helpful. Unfortunately, I’m having difficulty getting it to appear on the menu under our page image. It does appear in our Apps settings but not on the actual page.
When you look at the settings for Apps on the Page, does it say the LibraryH3lp app has a “Link to this Tab” option? That’s the only thing I can think of right now.
I’ve added other apps since upgrading the page, so this is kind of odd. Any ideas will be gratefully received.
Ken,
I’ll take a look at at this in the morning and get back to you… I’ve been hit with deadlines all day today.
I’m having the same problem – appears in the Apps settings, doesn’t have a “Link to this Tab” option, and doesn’t appear on the actual page, nor is there a “More” link or any way to edit the settings there.
(Thanks for the instructions, btw, they’re absolutely fantastic!)
I have this scheduled in to my calendar to investigate tomorrow. I thought I’d have time yesterday or today… but this has been one of those weeks where I’ve spent most of my days in meetings or on conference calls. Not real productive…
Deborah: Can you please email me a screenshot of what you see? Email: colleen.e.greene@gmail.com.
Are you seeing this screen at all, to add your own LibraryH3lp app to your FB Page?
http://www.flickr.com/photos/crobledo/5495339389/
This is my step #3 under “Adding it To Your Page.”
Deborah: Did this ever work out for you? If your chat app still isn’t appearing on your Page tabs, try this: http://bit.ly/dMPxu1 Please let me know if it works, if so, I’ll record a better tutorial and post. Thanks.
Kenley: Can you please email me a screenshot of what you see? email:colleen.e.greene@gmail.com
Are you seeing this screen at all, to add your own LibraryHelp app to your Facebook Page? http://www.flickr.com/photos/crobledo/5495339389/
This is my step #3 under “Adding It To Your Page”.
Colleen,
First off, thank you for writing the tutorial. It has been very helpful. Unfortunately, I’m having difficulty getting it to appear on the menu under our page image. It does appear in our Apps settings but not on the actual page.
When you look at the settings for Apps on the Page, does it say the LibraryH3lp app has a “Link to this Tab” option? That’s the only thing I can think of right now.
I’ve added other apps since upgrading the page, so this is kind of odd. Any ideas will be gratefully received.
Ken,
I’ll take a look at at this in the morning and get back to you… I’ve been hit with deadlines all day today.
I’m having the same problem – appears in the Apps settings, doesn’t have a “Link to this Tab” option, and doesn’t appear on the actual page, nor is there a “More” link or any way to edit the settings there.
(Thanks for the instructions, btw, they’re absolutely fantastic!)
I have this scheduled in to my calendar to investigate tomorrow. I thought I’d have time yesterday or today… but this has been one of those weeks where I’ve spent most of my days in meetings or on conference calls. Not real productive…
Deborah: Can you please email me a screenshot of what you see? Email: colleen.e.greene@gmail.com.
Are you seeing this screen at all, to add your own LibraryH3lp app to your FB Page?
http://www.flickr.com/photos/crobledo/5495339389/
This is my step #3 under “Adding it To Your Page.”
Deborah: Did this ever work out for you? If your chat app still isn’t appearing on your Page tabs, try this: http://bit.ly/dMPxu1 Please let me know if it works, if so, I’ll record a better tutorial and post. Thanks.
Kenley: Can you please email me a screenshot of what you see? email:colleen.e.greene@gmail.com
Are you seeing this screen at all, to add your own LibraryHelp app to your Facebook Page? http://www.flickr.com/photos/crobledo/5495339389/
This is my step #3 under “Adding It To Your Page”.
On another note, I see there is a secure canvas URL option that might allow for the https: connection – libraryh3lp.com does support secure connections.
Cool. Thanks for pointing that out, Ken. I’ll definitely play around with that possibility in the morning and let you know.
I’ve been playing with the HTTPS issue for a couple hours today, and despite being able to create a FB Page app using the https widget for LibraryH3lp (how you are able to see your Luria Library LibraryH3lp widget using https in its own browser), FB doesn’t actually allow that https app to display within an iframe on the tab within your FB Page (why it doesn’t show up in my Page tab when viewing in HTTPS mode).
According to the Facebook Developer bug tracker system, Facebook thinks they’ve developed a fix for this. They plan to release the fix in beta on Sunday and deploy it to everyone on Tuesday. So, I’ll try this again mid-week.
Cool. Thanks for pointing that out, Ken. I’ll definitely play around with that possibility in the morning and let you know.
I’ve been playing with the HTTPS issue for a couple hours today, and despite being able to create a FB Page app using the https widget for LibraryH3lp (how you are able to see your Luria Library LibraryH3lp widget using https in its own browser), FB doesn’t actually allow that https app to display within an iframe on the tab within your FB Page (why it doesn’t show up in my Page tab when viewing in HTTPS mode).
According to the Facebook Developer bug tracker system, Facebook thinks they’ve developed a fix for this. They plan to release the fix in beta on Sunday and deploy it to everyone on Tuesday. So, I’ll try this again mid-week.
Pingback: Allowing other Facebook Pages to add your LibraryH3lp chat widget
I’m having the same problem that Kenley and Deborah were having. Have any of you figured out what the problem is? The app is added to the page settings, but doesn’t show up in the left hand menu.
Hi there. If your chat app still isn’t appearing on your Page tabs, try this method of manually pushing an App to your tabs: http://bit.ly/dMPxu1 Please let me know if it works, if so, I’ll record a better tutorial and post. Thanks.
That worked beautifully, thanks! I think I somehow missed the step of adding it as a tab… I had added it to the page, but not as a tab.
AWESOME – thank you 🙂
I’m having the same problem that Kenley and Deborah were having. Have any of you figured out what the problem is? The app is added to the page settings, but doesn’t show up in the left hand menu.
Hi there. If your chat app still isn’t appearing on your Page tabs, try this method of manually pushing an App to your tabs: http://bit.ly/dMPxu1 Please let me know if it works, if so, I’ll record a better tutorial and post. Thanks.
That worked beautifully, thanks! I think I somehow missed the step of adding it as a tab… I had added it to the page, but not as a tab.
AWESOME – thank you 🙂
First Colleen, thanks for the tutorial and your amazing generosity! I have a problem I’m not seeing addressed- anyone else having this issue? On our Facebook page, I can send a chat, but when I respond via Library H3lp, it’s not showing up in the FB chat window. So I’m sending, but can’t receive responses. Anyone have any clues?
First Colleen, thanks for the tutorial and your amazing generosity! I have a problem I’m not seeing addressed- anyone else having this issue? On our Facebook page, I can send a chat, but when I respond via Library H3lp, it’s not showing up in the FB chat window. So I’m sending, but can’t receive responses. Anyone have any clues?
Colleen, let me add my appreciation for ALL your fantastic work on this. I wanted to update the comments to update the issue Ella had, where chats came in but replies from the librarian did not make it to the widget. Details are here:
http://code.google.com/p/libraryh3lp/issues/detail?id=49
In short, the canvaus URL (widget URL) has to either end in a / or include a ?. Libraryh3lp widgets don’t really properly end in a /, and this can cause the chat to break. So, best bet is to deck out the widget with something like a title so that the URL will include a ? to appease Facebook. Something like the following will work:
http://libraryh3lp.com/chat/my-facebook-queue@chat.libraryh3lp.com?title=Chat+with+us&sounds=1
Colleen, let me add my appreciation for ALL your fantastic work on this. I wanted to update the comments to update the issue Ella had, where chats came in but replies from the librarian did not make it to the widget. Details are here:
http://code.google.com/p/libraryh3lp/issues/detail?id=49
In short, the canvaus URL (widget URL) has to either end in a / or include a ?. Libraryh3lp widgets don’t really properly end in a /, and this can cause the chat to break. So, best bet is to deck out the widget with something like a title so that the URL will include a ? to appease Facebook. Something like the following will work:
http://libraryh3lp.com/chat/my-facebook-queue@chat.libraryh3lp.com?title=Chat+with+us&sounds=1
Hate to drag this topic back up but has anyone had success with a libraryh3lp widget since the FB redesign?
Phil: What sort of trouble are you running in to since the redesign? Are you able to successfully create the iframe custom tab app? Are you unable to add that custom tab to your Facebook Page (and was your Page created pre or post recent Pages redesign)? Or is the app not working at all once added as a tab to your Page?
I can sort of make the app (it appears to not be a functioning widget but the widget does appear) but then can’t add it to the site or get it to show up in my list of apps. But when I visited another widget that I knew worked before, I noticed it is now spitting out some weird error. If someone out there got it to work and it still works, I’d be happy to keep playing around with it myself.