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

Question

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

Navigation

#1 by (2 votes)

1

What is usually 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 plugin div inside it, thus:

<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 small formatting of my CSS that sets the width to 100% of the parent div, which I put like this:

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

This works on desktop browsers, but in vertical mobile browsers it does not make any 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 stay responsive in vertical mobile browsers?

mobile facebook plugin

asked by anonymous 16.02.2014 / 14:51

1 answer

DLL distribution last_insert_id oracle

score 2 · Accepted Answer

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

She created after the normal script of the Facebook SDK, a routine that verifies which plugin is running, the desktop or the 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 Twitter JS, awesome = D.

Add this goal within the head tag to configure the Facebook app ID:

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

And finally to div that will display the comment field:

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

Do not forget 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;
}