Add custom stylesheet inside iframe
I want to customize the Facebook feed design, for this I want to add a custom stylesheet inside the Facebook iframe.
What do I have
<iframe width="1000px" height="1000px" frameborder="0" name="f1e348592ed856c" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" style="border: medium none; visibility: visible; width: 340px; height: 500px;" src="http://www.facebook.com/v2.3/plugins/page.php?app_id=&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FKTWTb9MY5lw.js%3Fversion%3D41%23cb%3Df46f9e2a3b7b8%26domain%3D10.0.0.101%26origin%3Dhttp%253A%252F%252F10.0.0.101%252Ff24c367e49e04c%26relation%3Dparent.parent&container_width=1584&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&locale=en_US&sdk=joey&show_facepile=true&show_posts=true" class=""></iframe>
What i tried
$(document).ready(function(){
var $head = $("iframe").contents().find("head");
$head.append($("<link/>",
{ rel: "stylesheet", href: "style.css", type: "text/css" }));
});
or
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['iframe'].document.body.appendChild(cssLink);
I have google a lot but cannot find any working solution. some scripts work in normal iframe, but without facebook iframe nothing works.
I also created a jsFiddle
Any help would be greatly appreciated!
source to share
You cannot access or modify the IFrame content this way because it is cross domain iframe. Your browser will refuse any action like this. And this is exactly what you get: http://screencast.com/t/Uu6TXWFW
source to share
Yes, you can usually change content, styles, etc. iframe, but only if it is not a cross-domain domain - from your domain, you cannot modify the content of the Facebook iframe.
Secondly - I'm not sure if this is ok in terms of Facebook rules - I mean changing the styles of my widgets and plugins.
source to share