Organize comments providers includes and make FB fill parent container

_config.yml

@@ -35,8 +35,7 @@ comments:
   facebook:
     # https://developers.facebook.com/docs/plugins/comments
     appid                :
-    num_posts            : # 5
-    width                : # 580
+    num_posts            : # 5 (default)
     colorscheme          : # "light" (default), "dark"
 google_site_verification :
 bing_site_verification   :

_includes/comments-providers/scripts.html

@@ -0,0 +1,14 @@
+{% if site.comments.provider and page.comments %}
+
+{% case site.comments.provider %}
+{% when "disqus" %}
+  {% include /comments-providers/disqus.html %}
+{% when "facebook" %}
+  {% include /comments-providers/facebook.html %}
+{% when "google-plus" %}
+  {% include /comments-providers/google-plus.html %}
+{% when "custom" %}
+  {% include /comments-providers/custom.html %}
+{% endcase %}
+
+{% endif %}

_includes/comments.html

@@ -1,14 +1,11 @@
-{% if site.comments.provider and page.comments %}
-
+<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label }}</h4>
 {% case site.comments.provider %}
 {% when "disqus" %}
-  {% include /comments-providers/disqus.html %}
+  <section id="disqus_thread"></section>
 {% when "facebook" %}
-  {% include /comments-providers/facebook.html %}
+  <section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-mobile="true" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="100%" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section>
 {% when "google-plus" %}
-  {% include /comments-providers/google-plus.html %}
+  <section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
 {% when "custom" %}
-  {% include /comments-providers/custom.html %}
-{% endcase %}
-
-{% endif %}
+  <section id="comments"></section>
+{% endcase %}

_includes/scripts.html

@@ -1,4 +1,4 @@
 <script src="{{ base_path }}/assets/js/main.min.js"></script>
 
 {% include analytics.html %}
-{% include comments.html %}
+{% include /comments-providers/scripts.html %}