in HowTo, Libraries/Info Sci, Tech

How to add a Meebo widget to a Facebook Page

UPDATE 5/18/12: These instructions no longer work. Click here for an updated guide.

———-

With the release of Facebook’s new Pages system, libraries can now create an official presence not tied to an individual staff member’s account. But once created, options for what you can do with that page are still somewhat limited. For reasons I don’t entirely understand, not all Facebook applications that users can add to their profiles can also be added to a Page. As best I can tell, Application creators have to specifically allow this to happen in their options. And once they do, there are still a host of other issues that sometimes rear their heads.

One thing I really wanted to do was embed a Meebo widget in our library’s page, allowing users to IM a librarian directly from there. Of the two existing Meebo apps, one has not enabled the option and I can’t get the other to work right. So, here’s a temporary workaround:

Thankfully, Facebook has provided an app called Static FBML (FBML is the FaceBook Markup Language, the code that makes the magic happen). Essentially, this app is a blank slate. You can insert whatever custom code you like into it. We can use this to display a Meebo widget without too much difficulty:

Step 1: Add the Static FBML application to your Page.

Step 2: Edit the options. Go with whatever Box Title you like (I went with ‘IM a Librarian’).

Step 3: This is the meat and potatoes. Put this code in the FBML box:

<fb:swf swfsrc='http://widget.meebo.com/mm.swf?XXXXXXXXXX'

imgsrc='INSERT CLICKTHROUGH IMAGE ADDRESS HERE'

width='380' height='300' />

(NOTE: A commenter pointed out that you may have to replace the single curly quotes displayed in the code with non-curly quotes to get the code to work right. I can't get my post to cooperate and display straight ones for some reason)

Step 4: Replace the X area with the link to your own Meebo widget.

Step 5: Replace INSERT CLICKTHROUGH IMAGE ADDRESS HERE with your own clickthrough image. Facebook will not display flash elements like a Meebo chat unless a user clicks on it. So you'll need to create an image your users see, telling them to click on it to initiate a chat. For example, here's what I'm using as my clickthrough:

Feel free to steal this image for your own use, just please host it on your own server and use your own bandwidth.

That should do it! Let me know if I can clarify anything here, as I'm just writing it off the top of my head. Hopefully this won't be necessary for long and one of the 'real' Meebo widgets will enable Page usage soon.

You can see this live on the UNC Davis Library Facebook Page (still heavily under development): http://www.facebook.com/profile.php?id=6041853741

If you'd like to play with more custom content on your Page, Facebook has also created the rather aptly named Static FBML 2 and Static FBML 3 apps.

Write a Comment

Comment

24 Comments

  1. Thank you so much for figuring this out and posting!! This really put the icing on our page.

  2. Awesome. Facebook seems to be following the Spider-man philosophy of taking great responsibility in great power with stuff like that. I’ve sort of been looking into using the “Beacon” service on some of our stuff.

  3. This is awesome, thanks Chad! Adding it to my library’s page right now 🙂

  4. I’m glad it’s helpful!

    Daniel, I’d be interested to hear anything you dig up about the Beacon service – I haven’t seen much press about it.

  5. Thank you for writing this up! I had tried to use the FBML application to do this earlier, but it hadn’t worked for me.

  6. Thanks, Chad. One note for others who might copy and paste — you will need to replace the “curly” single quotes in the code with the more mundane “uncurly” single quotes.

  7. Ah ha, thanks for pointing that out. I tried correcting it, but the formatting on the site seems to auto-change it back to curly… I’ll add a note to the post.

  8. I’m running into this problem and wonder if it sounds at all familiar: when I click on the image to connect to Meebo, the widget image turns gray and says :get you own” with a link to http://www.meebo.com

    So for some reason my widget code isn’t working–is there some part of the code I should leave out when transcribing to the StaticFBML script? Many thanks!

  9. Hmm, that’s a new one for me. Since it is actually displaying something, and not a blank screen or an error, my best guess is that the link you’re using to your meebo widget is where the problem lies. I assume you’ve double checked it for accuracy?

    You may also want to check what Glenn pointed out above – make sure you are using ‘uncurly’ quotes around the link.

  10. Works like a charm, thanks for the instructions Chad! Add University of Calgary’s Library page to the list.

  11. I actually have the same problem that Emily mentioned above. The gray box appears and says “get your own.” I’ve triple checked my widget address. Has anyone found a solution to this problem?

    Thanks!

  12. Ooops! I solved the problem mentioned above. I was copying the entire code for the Meebo widget instead of just the link.

    Emily (and others), the ‘XXXXXXXX’ should only be replaced with what you see after the ? and before the ‘ in the widget code. For example, mine looked something like this:

    ZcTykhwlM

    I hope this helps! 🙂

  13. You rule! Thanks **so** much for posting these helpful instructions… We *had* a Meebo widget that was working beautifully, but then it suddenly disappeared, and, according to FB, could not be added back to our Library’s Fan Page… Sigh… .So, thanks again for this most helpful work-around! 😉

  14. Thanks so much, I was able to get it to work thanks to your advice today.

  15. Hi rodz – yes, this is still working. We have it on our Facebook page and I just gave it a try – all seems well.

  16. ahhh….in the first step ill add your page but there’s no result….how come???

  17. Hey, Chad, I ran across this while researching how to use Meebo as a IM service for our Ref. Dept. The post appears to be pretty old but you’ve had feedback as recently as last year. Are you still there?
    will

  18. Hey Will, I am indeed still here! you’re right, the post is pretty old. I think it’s still correct, but I haven’t checked lately to make sure.

Webmentions

  • How to add a Meebo, Libraryh3lp, or other chat widget to a Facebook Page (updated) · Hidden Peanuts 1/17/2012

    […] How to add a Meebo widget to a Facebook Page […]

  • Hidden Peanuts » Blog Archive » Building Iron Man in the Basement 1/17/2012

    […] I think it is crucial that we keep a fundamental focus on the basics of web coding and scripting. Doubly so in the library world, where so many workers come from other careers and non-technological educations. It is one thing to be cut and paste an IM widget into your page. It is quite another to have the ability to fix it when inserting that widget blows up other pieces of code on the page. I have yet to come across a WYSIWIG HTML editor like Frontpage or Dreamweaver that doesn’t require at least a small amount of tinkering in raw code to get a site 100% correct. Understanding how each piece works is very important in making divergent systems play nice together. Without such an understanding, I never would have been able to get a Meebo widget working in Facebook. […]

  • Facebook’n it… at The Corkboard 1/17/2012

    […] In addition to the app, I’ve been working on a Facebook page for the ol’ A.C. Buehler Library – purely experimental at this point. I’m trying to find the right balance of dynamic and static information through the use of a select use of apps.  It’s using a nice “Meebo” instant message box.  Yes, that was Meebo in quotes because it isn’t necessarily a Meebo app.  It uses the FBML app certified by Facebook, which includes a bit of custom code.  For full details see here.   Yes, there are Meebo rooms available for both profiles and pages, but even the apps that say they work for pages don’t.  Maybe they’re having the same issues I’m having in that I can’t get the EC Catalog Search app to work in my page, even though it says it can. […]

  • CBS Bibliotek » Blog Archive » Facebook åbner op 1/17/2012

    […] Bonusinfo: How to add a Meebo widget to a Facebook Page   SHARETHIS.addEntry({ title: “Facebook åbner op”, url: “http://blogs.cbs.dk/cbsbibliotek/?p=139” }); […]