A response from Springshare re: Libguides + Facebook

I got a comment on my blog from Marc at Springshare regarding my approach to embedding LibGuides boxes within an iFrame in a Facebook page. He provides an excellent background to why Springshare has had difficulties with their Facebook applications. It also gives hints about what we can look forward to on the Facebook/Libguides front.

The comment is worth reading on its own, but I’d like to highlight a philosophical element.

Springshare has designed LibGuides to make the content portable. If I want to, I can dump an XML export of all the work I and the other staff at CNA-Q have done and import it into another CMS with a minimum of effort. I can also duplicate any box or page within LibGuides or outside LibGuides through the API interface.

This open approach gives librarians like myself (who love to fiddle with things) incredible opportunities to create things beyond what Springshare is thinking about. We can mashup the content we’ve created in Springshare and insert it into almost any system that supports web standards.

In our (currently) unreleased library website, based on LibGuides, I’ve had an opportunity to play around with the CSS selectors and other advanced tools that LibGuides provides. Springshare’s conscious decision to leave some of these options open to advanced users massively increases the usefulness of their product.

In short, Springshare doesn’t stop us from getting content out, and helps us modify the content in our LibGuides system.

That’s an awesome philosophy for a company serving libraries to have.


Libguides + Facebook : A new way to do it

I have had  no luck with the regular LibGuides Facebook application.

This may be due to old code on their end, misunderstandings on my end or my insistence on using Chrome.

However, I’ve discovered an alternative to using the regular LibGuides application that allows you a significant amount of flexibility in the way you display your LibGuides content on Facebook.

Start by creating a facebook page for your library.

Once you’ve created the page, search for a ‘Static iFrame’ application. This is the application that we’ll be displaying our LibGuides content in.

I’ve had good luck with the app highlighted in the picture below.

Add the application to your Facebook page, and click on it. you should have a brief editor pane show up.

When you ‘Edit Tab Content’ you get a familiar sight, HTML!

Now, you can develop whatever you want within this framework, but I’ve chosen to use the API utility in LibGuides to display a few boxes from our public Library websites.

To get the code, open a new tab and sign in to LibGuides

  In the API Utility you get to choose what you want to show for each API call you make. I’d suggest using boxes from your system that get the most use, like Search or Browse functions, as well as a LibAnswers widget if you subscribe.

When you generate an API call, you can choose to embed the code using Javascript.

Copy this embed code, and, place it wherever you want within the HTML of the Facebook page.

[Here’s a hint, you can develop the page using any HTML editor you prefer. I set a master div width of 500px and the result was great. I then copied and pasted the HTML back into the facebook page after everything was tweaked the way I wanted it to be.]

And that’s it! Here’s the first draft of our Library Facebook page. Click to open a larger version.

Creating an IOS WebApp icon for your Mobile Libguide

We’re in the final testing stages of launching our mobile website which is built on CampusGuides. It’s been an exciting project!

One of the little details that I wanted to get right was an app icon for our LibGuides system. Right now, Springshare does not allow you to modify the mobile settings on a group basis, like you can with the desktop version. However we can create a mobile icon for the whole of your LibGuide system.

Here’s how to do it.

Create an icon for your system. Something small, with little to no text, and sized around 57×57 for the iPhone.


This is ours. It’s 57×51 pixels, a transparent background PNG file.

Now, upload this file somewhere in your LibGuides system. I have a special LibGuide for our Library Brand Book, so this is just one more entry in my official images list.

Copy the link to the file name.

In your Admin page go to Systems Settings > Mobile Settings

In the ‘Custom <Head> Code’ field paste this string

<link rel=”apple-touch-icon” href=”[LINK TO YOUR IMAGE]”/>

IOS automatically rounds the corners of the image and adds the gloss to it.



If you have some fancy photoshop skills, you can create your own custom image with rounded corners and a look of your choice, in that case the META tag will look like this

<link rel=”apple-touch-icon-precomposed” href=”[LINK TO YOUR IMAGE]”/>

This is one of those easy touches that really make your LibGuide system look professional.