[BUG] The Facebook Like Button Scrollbar Issue

/ written by / Engineering

You may have noticed your Facebook Like buttons have a little something extra today: A scroll bar.

Facebook Like Button with Scroll Bar

Turns out Facebook changed the way they’re displaying the Like button and since we just pass it along – with a little special sauce to capture them for our analytics – it’s causing a problem for our users.

Luckily, we’ve got a couple solutions for this until we can put out an official fix, which should be soon.

First, you can make sure you have Facebooks FBML namespace in your <html> tag. For example:

<html xmlns:fb="http://www.facebook.com/2008/fbml">

You might have other namespaces in the HTML tag. Just make sure everything it includes xmlns:fb=”http://www.facebook.com/2008/fbml” before the greater-than sign.

Second, you can alter the code for the AddThis Facebook like button to specify the appropriate height by adding an fb:like:height attribute, like this:

<a class="addthis_button_facebook_like" fb:like:height="25">

If you have any questions regarding this issue please post them in the forum topic or feel free to email us at support@addthis.com.

Thanks in advance for your patience, and thanks for using AddThis!

  • Pat

    I was trying to figure out why it popped up all of a sudden. Thanks for being on the ball, and having such an easy-to-implement solution ready!

  • http://www.pensacolafishing.com Vitaliy Vinogradov

    Thank god! I was having problems with that on my website!

  • http://ravenseyedesign.com Chad Bush

    This workaround is helpful as a temporary solution, but it causes extra validation errors in some situations. Currently, none of the Facebook Open Graph XML markup can be used directly on an HTML5 document without generating errors in the W3C validator. The validator does not accept adding XML name spaces to HTML5 documents.

    One of the benefits I’ve enjoyed by using AddThis to add Facebook (and other) sharing features on my HTML5 websites is that the AddThis JavaScript dynamically adds the Facebook markup, and my pages still validate even with FB “Like” buttons on them.

    Using this workaround to fix the scrollbar bug forces me to put the FB XML markup directly in my documents, eliminating the benefit I’ve gained from the AddThis JS doing it dynamically.

    Also, I’ve placed AddThis code on 30-40 websites for various clients. If a fix is on its way really soon, I’ll probably just leave most of them alone. Any estimated timeframe for a fix on the AddThis end? Thanks again for providing such an excellent service!

  • Paul

    @Chad,

    I got word from our developers that this should be fixed in the next couple days. When it’s up we’ll update this blog post to let you know.

    And if anyone has implemented either of the workarounds mentioned in the post they should be compatible with the fixes to AddThis.

    Thanks for using AddThis!

    Paul
    Product Support Engineer

  • http://ravenseyedesign.com Chad Bush

    It’s fixed on all my sites, and looks great! Thank you for the prompt attention to this detail.

  • http://www.PipistrelairCraft.com Sumon Rahman

    The full glance of your site is magnificent, let alone the content material!