Facebook Page Plugin Width Problem

  • Hey I am using the new facebook page plugin in a pop up to get more likes for my facebook site.

    For the popup I am using the plugin “wbounce”.

    I have a problem with the width of the facebook box and I dont know anymore what I should do. I tried so many things and wasted so much time for that..

    The facebook box is configured on the fb developer site on widht 500px, but in my pop up its something with 100px. I even tried css and the !important function. Nothing works.

    Please help me!

    This is the code in the popup-plugin:
    <div class=”modal-title”>
    <h3>Folge Alpha Inside auf Facebook!</h3>
    </div>

    <div class=”modal-body” >
    <p>Verpasse keinen Artikel mehr und erhalte deine t?gliche Portion Motivation</p>

    <div class=”fb-page” data-href=”https://www.facebook.com/pages/Alpha-Inside/334029926805762?ref=aymt_homepage_panel&#8221; data-width=”500″ data-hide-cover=”false” data-show-facepile=”true” data-show-posts=”false”><div class=”fb-xfbml-parse-ignore”>

    Alpha Inside

    </div></div>
    </div>

    <div class=”modal-footer”>
    <p>Ich m?chte nicht über neue Artikel informiert und t?glich motiviert werden</p>
    </div>

    this is the css
    .fb-page {
    width: 500px !important
    }

    You can check the popup and its code on this link. Just move your cursor to the close-button of your browser or your tab:
    https://www.alphainside.de/6-wege-wie-du-mehr-spass-und-freude-im-leben-haben-kannst/

    Thank you guys!

Viewing 2 replies - 1 through 2 (of 2 total)

  • You have done everything the right way, the problem is that hidden elements are incompatible with asynchronous DOM updates. If you force the popup to be visible from the beginning of the load of the page you will notice that the container of the Facebook page is sized correctly with 500px.

    The issue is that the Facebook plugin tries to resize to its main container which in this case is a hidden “div”, hidden elements in the DOM are considered as non-existent so the Facebook script loads its content (which is an iframe) using the default values [1] which correspond to 180px for the width.

    Have you seen other websites where they load this type of popups when you load the page and then offer a way to close them? This is the main reason for that, because is difficult to fix this issue so they just force the modal window to be “display:block” by default.

    Someone else may help you fix that issue in your site, but any solution that anyone offer to you will be a hack to the DOM to auto-update or auto-resize the modal container, so be careful when you accept the code from external sources.

    [1] https://developers.facebook.com/docs/plugins/page-plugin

    Thread Starter daza91

    (@daza91)

    Thank you so much for your time!
    Finally I know what’s wrong.
    It would never have occurred to me.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Facebook Page Plugin Width Problem’ is closed to new replies.