Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

I want to change the Facebook embedded posts plugin to fit in the side bar widget for my site. Currently, it is 286px wide, but the Facebook plugin width is around 567px.

How can I accomplish that?

share|improve this question

migrated from webmasters.stackexchange.com Aug 27 '13 at 6:24

This question came from our site for pro webmasters.

3 Answers 3

If you are using the Facebook Embedded Posts Plugin released at the beginning of August (2013), you cannot currently change the appearance or width of the post. According to the documentation (linked to above):

Can I customize how the post is displayed on my web page?

Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.

My unexpert two-cents: Theoretically, you could apply your own CSS to the <div class="fb-post"></div>, but it seems like (as of right now) this will just end up cutting off part of the post or messing up the aspect ratio (or something to that effect).

share|improve this answer
    
is right about cutting off part of the post. I've been working on this problem this morning, and there is a stubborn CSS selector I cannot override. The declaration is found here... fbstatic-a.akamaihd.net/rsrc.php/v2/ye/r/CLfnQ5_ZbfP.css ... and it looks like this: ._57p0 ._6ns { margin: 0; width: 552px; } I've used very a very specific selector in my CSS file to set the width to 250px, and not only does this not override the above, by my declaration doesn't even show up in Firebug as overwritten. (The latter fact suggests that I wrote my CSS markup wrong, but I can't for –  Jeff Cohan Sep 10 '13 at 16:36

css:

.fb-post iframe {
    transform:scale(0.5,0.5);}

however then it will be quite tinsy. Beyond the iframe you lose css control.

share|improve this answer
    
does not work for me –  Trey Copeland Sep 25 '13 at 18:59
    
using that code via the IE (gaaah) or Firefox (my normal) developer tools css editor it does work at least - tested just now on: tamingthebeast.ca/2013-09-10/Happy+Dog –  Nick Wilde Sep 27 '13 at 5:35

You will able to solve it by using DIV element:

<div id="PostOnPage" class="fb-post" data-href="<%= lblLinkURL.Text %>" 
            data-width="350" style="pointer-events: none; ">

but the smaller width that facebook accept is range between 350px - 750px.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.