{"id":255,"date":"2012-02-01T12:46:04","date_gmt":"2012-02-01T07:16:04","guid":{"rendered":"http:\/\/vikku.info\/codesnippets\/?p=255"},"modified":"2012-02-02T21:01:10","modified_gmt":"2012-02-02T15:31:10","slug":"facebook-comments-set-100-percent-width-for-facebook-comments","status":"publish","type":"post","link":"https:\/\/vikku.info\/codesnippets\/facebook\/facebook-comments-set-100-percent-width-for-facebook-comments\/","title":{"rendered":"facebook comments set 100% percent width for facebook comments"},"content":{"rendered":"<p>I wanted to set percentage width for facebook comments plugin.<\/p>\n<p>I searched the web and i got the following information from stackoverflow.<\/p>\n<p>What i previously had was the following<\/p>\n<pre lang='html4strict'>\r\n<div id=\"fb-root\"><\/div>\r\n<div class=\"fb-comments\" data-href=\"http:\/\/vikku.info\/programming\/\" data-num-posts=\"100\" data-width=\"500\"><\/div>\r\n<\/div>\r\n\r\n<\/pre>\n<p>I was trying to set data-num-posts=&#8217;100%&#8217; which was not working. and then change the above to the following<\/p>\n<pre lang='html4strict'>\r\n<div id=\"fb-root\"><\/div>\r\n<div class=\"fb-comments\" data-href=\"http:\/\/vikku.info\/programming\/\" data-num-posts=\"100\" data-width=\"500\" width=\"100%\" style=\"width: 100%;\"><\/div>\r\n<\/div>\r\n\r\n<\/pre>\n<p>and then added the following style in the style section<\/p>\n<pre lang=\"text\">\/* for facebook width 100% *\/\r\niframe.fb_ltr { width:90% !important; }<\/pre>\n<p>That&#8217;s it. It is working. &#8230;<\/p>\n<p style='color:red; font-weight:bold;'>\noh&#8230; after a few days of working with the above i added a like button. the above style affected the like button and i was wondering how to change the width to 100% without affecting the like button.<br \/>\nThen got this from stackoverflow. So i placed only the following and removed the styles specified above.<\/p>\n<p>remove  width=&#8221;100%&#8221; style=&#8221;width: 100%;&#8221; from &lt;fb:comments tag and add only the following in the style. voila it works.<\/p>\n<pre lang='css'>\r\n.fb-comments, .fb-comments iframe[style] {width: 100% !important;}\r\n<\/pre>\n<p>the above was used from this url <a href='http:\/\/stackoverflow.com\/questions\/7447483\/how-to-make-facebook-comments-widget-a-fluid-width'>http:\/\/stackoverflow.com\/questions\/7447483\/how-to-make-facebook-comments-widget-a-fluid-width<\/a><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>References<\/strong><\/span><\/p>\n<p><a href=\"http:\/\/stackoverflow.com\/questions\/5305685\/facebook-comments-plugin\">http:\/\/stackoverflow.com\/questions\/5305685\/facebook-comments-plugin<\/a><\/p>\n<p><a href=\"http:\/\/stackoverflow.com\/questions\/7447483\/how-to-make-facebook-comments-widget-a-fluid-width\">http:\/\/stackoverflow.com\/questions\/7447483\/how-to-make-facebook-comments-widget-a-fluid-width<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to set percentage width for facebook comments plugin. I searched the web and i got the following information from stackoverflow. What i previously had was the following I was trying to set data-num-posts=&#8217;100%&#8217; which was not working. and then change the above to the following and then added the following style in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32],"tags":[],"_links":{"self":[{"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/255"}],"collection":[{"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/comments?post=255"}],"version-history":[{"count":13,"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/255\/revisions"}],"predecessor-version":[{"id":268,"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/255\/revisions\/268"}],"wp:attachment":[{"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/media?parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/categories?post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/tags?post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}