dvir Posted September 9, 2014 Share Posted September 9, 2014 HI , i'm trying to understand how to make the Facebook Like Box block in a diffrent size what is the right css ? or maybe it's not the css ? www.buyvisualstudio.co.il (at teh bottom of the page) thanks. Link to comment Share on other sites More sharing options...
vekia Posted September 9, 2014 Share Posted September 9, 2014 it's not a case of css, unfortunately. you have to predict the sizes of like box widget in module .tpl file with width and height params Link to comment Share on other sites More sharing options...
boris257 Posted July 23, 2015 Share Posted July 23, 2015 (edited) hi, I tried to change blockfacebook.tpl but only the container change size... not the facebook windows <div id="fb-root"></div><div id="facebook_block" style="width=400px"> <!--<div id="facebook_block" class="col-xs-4">--> <h4 >{l s='Follow us on Facebook' mod='blockfacebook'}</h4> <div class="facebook-fanbox"> <div class="fb-like-box" data-href="{$facebookurl|escape:'html':'UTF-8'}" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"> </div> </div></div> Could you help ? thanks. Edited July 24, 2015 by boris257 (see edit history) Link to comment Share on other sites More sharing options...
boris257 Posted July 24, 2015 Share Posted July 24, 2015 (edited) Here the result.. not good... Thanks for your help. Edited July 24, 2015 by boris257 (see edit history) Link to comment Share on other sites More sharing options...
li.va.mold Posted August 15, 2015 Share Posted August 15, 2015 Try this solution: 1. Go on Facebook Developers: https://developers.facebook.com/docs/plugins/page-plugin#settings 2. In "Facebook Page URL" insert your page instead of “https://www.facebook.com/facebook” Below these boxes must be checked: - Adapt to plugin container width - Show Friend's Faces Next boxes must be unchecked: - Use Small Header - Hide Cover Photo - Show Page Posts 3. Push the button “Get Code” 4. Save code (one below “2. Place the code for your plugin wherever you want the plugin to appear on your page.” 5. Need to add in the code the following definition: “data-width="YYY" where YYY means dimension in pixels of your desire width of Facebook Like Box block. For example code for the Facebook page would look like this: <div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false" data-width=”379”><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div> As I said 379 is the width in pixels of your desired Facebook Like Box block. 6. In the file “blockfacebook.tpl” remove code: <div class="fb-like-box" data-href="{$facebookurl|escape:'html':'UTF-8'}" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"> and replaces with the code above. 7. Done J. For me it works, I hope to be your helpful to you. It is responsive, but please take into account statements made by Facebook: https://developers.facebook.com/docs/plugins/page-plugin#resizing “No Dynamic Resizing The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet: The plugin will determine its width on page load It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.” 3 Link to comment Share on other sites More sharing options...
pbraconnot Posted September 7, 2015 Share Posted September 7, 2015 Thanks Liviu, it worked here!!! Link to comment Share on other sites More sharing options...
Recommended Posts