WordPress.org

Ready to get started?Download WordPress

Forums

SEO Facebook Comment
[resolved] 100% is being written in as 100 PX! (11 posts)

  1. jackdh
    Member
    Posted 2 months ago #

  2. jackdh
    Member
    Posted 2 months ago #

    Fix found.

    I had the mobile version turned on, and hence using % was overruling it.

    I turned it off and it is now working.

  3. Marc_O
    Member
    Posted 1 month ago #

    Hello,
    I've got exactly the same problem on this site with a responsive theme : http://www.shutupandplaythebooks.com/
    But the thing is that i don't have the mobile version turned on so i don't understand why when i use 100% for the width it's 100px on the website, but only on tne desktop view, the mobile view is perfect when i use 100% fot the width.
    So i can't get both views desktop and mobile work together.
    I've choose to make it clean on the desktop view so i used 660px for the width of the comments but now the view on mobile is not responsive.
    Do you know what happen here ?
    Thanx for your answer.

  4. stephjuno
    Member
    Posted 1 month ago #

    I'm having the same problem as Marc_O. I'm using '100%' and it's fine on mobile but only 100px on desktop. I haven't ticked the mobile option in the settings. Am running 1.5.1 on WP 3.8.1. Still unable to fix this..

  5. stephjuno
    Member
    Posted 1 month ago #

    It looks like Facebook has changed their Comments code as of March 2014, so the existing code that's been used in the past to force a 100% width, no longer works.

    https://developers.facebook.com/x/bugs/256568534516879/

    http://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width/22199776#22199776

    The stackoverflow link above includes a temp JS workaround, although I can't seem to make it work with the SEO Comments plugin.

  6. bemcapaz
    Member
    Plugin Author

    Posted 1 month ago #

    Hi everyone,

    Just found a solution for this, to avoid any problems with any future release from facebook I think I came with an optimal solution.

    What is going to change in the next version (planning to release today)

    You will now be present with a new select box option in the admin page, if you want a FLUID, FIXED or MOBILE layout, if you choose the FIXED one, just input the value and everything stays as it already is today (the wrapper and iFrame gets set to the choosen width, the same for MOBILE (facebook has a special layout for that).

    If, however, you choose the FLUID layout, the plugin will calculate the location where the frame are inserted and set the width in 'px', not in '%' (which was causing the bug). So, lets say, your page gets rendered in a 560px wide interface, before the plugin is loaded a javascript code will run, detect that and insert it in the wraper and iframe, so when the facebook script runs, it will adapt to the current screen.

    Bellow is the script i'm going to use for that

    <script>
    var fbSEOWrapperWidth = document.getElementById('fbSEOComments').offsetWidth;
    document.getElementById('fbSEOComments').style.width = fbSEOWrapperWidth + 'px';
    document.getElementById('seoFacebookCommentsPlugin').setAttribute('width', fbSEOWrapperWidth + 'px');
    </script>";
  7. stephjuno
    Member
    Posted 1 month ago #

    Perfect, thank you!

  8. Marc_O
    Member
    Posted 1 month ago #

    Plugin updated, the fluid option works perfectly on desktop and mobile. Thanks for your reactivity.
    Perfect !

  9. stephjuno
    Member
    Posted 1 month ago #

    I noticed that when I refresh my page, the comments fit perfectly to the starting size of the browser window, but when I then adjust my browser window size, the comments do not resize fluidly. Any chance it's an easy fix to make this fluid?

  10. lagdonkey
    Member
    Posted 3 weeks ago #

    While that solution works for initial load, it won't work if the page is re-sized. A few examples of this is if a user flips from portrait to landscape mode etc etc. I'd suggest doing a bind to the screen-resize event, such as this:

    $(window).load(SeoCommentsResize).resize(SeoCommentsResize);

    var SeoCommentsResize = function(e) {
    var fbSEOWrapperWidth = document.getElementById('fbSEOComments').offsetWidth;
    document.getElementById('fbSEOComments').style.width = fbSEOWrapperWidth + 'px';
    document.getElementById('seoFacebookCommentsPlugin').setAttribute('width', fbSEOWrapperWidth + 'px');

    });

  11. lagdonkey
    Member
    Posted 3 weeks ago #

    Bah, entered too soon. Anyways, the gist being, that the bind fires on page load, as well as each screen re-size event.

Reply

You must log in to post.

About this Plugin

About this Topic