Jump to content

HI - how to make the Facebook Like Box block in a diffrent size ?


 Share

Recommended Posts

  • 10 months later...

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 by boris257 (see edit history)

Share this post


Link to post
Share on other sites

  • 4 weeks later...

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.”

  • Like 3

Share this post


Link to post
Share on other sites

  • 4 weeks later...
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More