How to add a Meebo widget to a Facebook Page

Thursday, November 15th 2007

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.

15. November 2007 by Chad Haefele
Categories: HowTo, Libraries/Info Sci, Tech | 28 comments

Comments (28)

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

  2. You’re my hero.

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

  4. This is awesome, thanks Chad! Adding it to my library’s page right now :)

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

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

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

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

  9. Pingback: CBS Bibliotek » Blog Archive » Facebook åbner op

  10. 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!

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

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

  13. Works perfectly. In action at our Facebook page (work in progress):
    http://elmhurst.facebook.com/profile.php?id=6083469380

    Thanks~

    ~Kyle~

  14. Pingback: Facebook’n it… at The Corkboard

  15. 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!

  16. 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! :)

  17. Pingback: Hidden Peanuts » Blog Archive » Building Iron Man in the Basement

  18. 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! ;-)

  19. Worked great. Thank you!

    -Carl

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

  21. This worked well for plugoo too! Here it is on our new Facebook site:

    http://tinyurl.com/pmhkdf

    Thanks!

  22. is this still working now????

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

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

  25. Thank you so much! Finally got Meebo added to our wall!

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

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

  28. Pingback: How to add a Meebo, Libraryh3lp, or other chat widget to a Facebook Page (updated) · Hidden Peanuts

Leave a Reply

Required fields are marked *