是否有可能给Facebook页面插件圆角？

Question

I'm using the Page Plugin from Facebook which displays a Facebook page feed on a website. The plugin is only a small amount of HTML code that goes into whatever file your using to make your website.

This is the code:

<div class="fb-page" data-href="https://www.facebook.com/pages/UrchinBooks-Shop/922785527788785?fref=ts" data-width="250" data-height="340" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/UrchinBooks-Shop/922785527788785?fref=ts"><a href="https://www.facebook.com/pages/UrchinBooks-Shop/922785527788785?fref=ts">UrchinBooks Shop</a></blockquote></div></div>

I've tried using the classes of the div's in my stylesheet but that doesn't do anything. I also tried to add a style tag to all the div's as well. Nothing there either.

Is it possible to give the box that displays on the webpage, the one that's generated by the plugin, rounded corners?

Answer 1

This is how to give the plugin rounded corners;

Go into the developer tools in your browser and go through the HTML until you find the place where the HTML code for the plugin is located. Expand all the div's, spans and anything else until you find the iFrame tag. You will need to use this iFrame tag in your stylesheet. For me it was:

.fb_iframe_widget iframe

but it may be different for other people as the plugin may work differently.

Basically, you use that iFrame in your stylesheet. For me, I used the developer tools to find the iFrame tag, then I found a CSS selector associated with that iFrame tag, and I used that CSS selector in my stylesheet.