How to take the horizontal scrolling in the mobile browser, created by the Facebbok comments plugin?

Asked

Viewed 143 times

1

What is normally done is this:

<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5"
data-colorscheme="light"></div>

I also added this div with the Fp-container class and put the div of the plugin inside it, so:

<div style="padding:0;" class="fb_container">
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5"
data-colorscheme="light"></div>
</div>

This is to make the plugin ignore the original formatting and get the formatting of my CSS that configures the width in 100% of the parent div, I put so:

.fb-comments, .fb-comments * {
width:100% !important;
}

This works on desktop browsers, however on mobile browsers used vertically makes no difference.

This tip is given by Facebook itself:

The width (in pixels) of the plugin. The mobile version of the Comments plugin ignores
the width Parameter, and Instead has a Fluid width of 100%.

Does anyone have any tips on how to make this plugin responsive in vertical mobile browsers?

facebook mobile plugin

  • Would not be height your problem? I could not understand what is going wrong, please rephrase a little your doubt itself, the explanation is ok but the question is not clear.

  • Dear Paul, the following is happening, when we use the Facebook comments plugin on the page and it is opened in a mobile browser, the plugin dramatically increases the width of the page, ignoring the width of the parent div.

1 answer

2


After several days of searching, I found an adaptable solution on blog da Suzanne Ahjira. This solution was created for Wordpress and can be fully adapted to be used on any site.

She created after the normal Facebook SDK script, a routine that checks which plugin is running, desktop or mobile:

<div id="fb-root"></div>
<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID_HERE";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
      if(!d.getElementById(id)){js=d.createElement(s);
      js.id=id;js.src="//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js,fjs);}
      }(document,"script","twitter-wjs");
</script>

If you are running the mobile plugin, the routine inserts the Twitter JS, awesome =D.

Add more of this meta inside the tag head, to set up the Facebook app ID:

<meta property="fb:app_id" content="YOUR_APP_ID_HERE"/>

And finally to div which will show the comment field:

<div class="fb-comments" data-href="url_atual" mobile="false" order_by="time"
    data-width="470" data-num-posts="10"></div>

Not forgetting to add the settings of width 100% in your CSS:

.fb-comments,
.fb-comments span, 
.fb-comments iframe[style],
.fb-comments iframe span[style] {
    width: 100% !important;
}

Browser other questions tagged facebook mobile plugin

You are not signed in. Login or sign up in order to post.