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).
- 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.