3

I want to customize the design of Facebook feed, for this I want to add a custom style-sheet inside a Facebook iframe.

What 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=&amp;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&amp;container_width=1584&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;show_posts=true" class=""></iframe>

What I have 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 lots but can't find any working solution. some scripts are working in normal iframe but incase of facebook iframe nothing works.

I have also create a jsFiddle File

Any help will be greatly appreciated!

Roy Sonasish
  • 4,451
  • 18
  • 31
  • 1
    This can't work in this way. You try to access cross origin domain Iframe – freethinker May 11 '15 at 06:34
  • 2
    @OlegYudovich I don't know about cross origin domain Iframe, are you talking about this {http://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame} – Roy Sonasish May 11 '15 at 06:38

2 Answers2

2

You can't access or change IFrame content in this way, because this is cross domain Iframe. You browser will refuse any action like this. And this is exactly what you get: http://screencast.com/t/Uu6TXWFW

freethinker
  • 1,838
  • 2
  • 19
  • 44
  • Is it possible with any other way?? – Tanmoy May 11 '15 at 06:51
  • 1
    Yes. If second domain provides API. Api calls or pass custom parameters inside URL or some way to customize your IFrame – freethinker May 11 '15 at 07:13
  • For example, i have a website: somesite.com, and you want to show my site page inside your site : someanothersite.com by using IFrame. I tell you: "You can show my site page and customize header color by pass this parameter like this: somesite.com?headercolor=red" and you can pass this parameter inside IFrame url : – freethinker May 11 '15 at 07:57
1

Yes, usually you can modify contents, styles etc. of iframe but only if it is not cross-domain - from your domain you can't modify contents of Facebook's iframe.

Secondly - I am not sure if it is OK in terms of Facebook's regulations - I mean modifying styles of its widgets and plugins.

kamil-mrzyglod
  • 4,673
  • 1
  • 18
  • 27