How to adjust facebook page plugin to 100%?

Question

I am using this facebook page plugin to integrate it to my website. However, it seems that the maximum width is only 500px. There are many advices on the internet about other plugins but not about this.

Does anyone know a workaround how to make this page plugin expand to 100% of my web page?

Answer 1

Actually, you can't!
As plugin page source code resides inside iframe where CSS styles are applied locally.
Moreover plugin page iframe is out of your domain/server, so you cannot modify any resources because the SOP.
See:

In some point facebook says:

The plugin will by default adapt to the width of its parent container on page load (min. 180px / max. 500px), useful for changing layout.

So no there's any workaround, even something ugly?

Yes, there is.
It's possible fetch the response page content (from iframe url) and replace the tag whith inline CSS from 500px to 100%, like this:

<?php 

$url = 'IFRAME URL GOES HERE'; #copy and paste url from iframe plugin
$http_headers = array(
    'User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:40.0) Gecko/20100101 Firefox/40.0',
    'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
    'Accept-Language: pt-BR,en-US;q=0.7,en;q=0.3',   
);

$opener = curl_init($url);
curl_setopt_array($opener, array(
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_SSL_VERIFYHOST => false,
    CURLOPT_HTTPHEADER => $http_headers,        
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_AUTOREFERER => true,
    CURLOPT_RETURNTRANSFER => true,        
));
$content = curl_exec($opener);
curl_close($opener);
# Maybe you want to use DomDocument + DOMXPath
echo str_replace('width: 500px', 'width: 100%', $content);

However, it isn't a proper solution. If some user click over button "like", for instance, the facebook popup can't open properly, then this may be a problem.