I am trying put place a Facebook Like-Box on a page on my site, and then style it via my own CSS (chiefly to increase the height awarded to div#stream_content. (The idea is to have the FB feed act as a news feed, but I don't want the user to have to scroll to see more the top two items or so as it does by default).
I have read and experimented with suggestions from these articles and more:
http://stackoverflow.com/questions/4064038/customizing-facebook-like-box,
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/,
http://hitech-tips.blogspot.com/2010/05/facebook-like-button-xfbml-tutorial.html
I am going the FBML route (rather than using an iframe) as I gather is required for applying a cross-domain stylesheet. I gather also that I need this doctype declaration for my webpage:
<!doctype html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
So then I have this in the body of the page:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box
profile_id="***my ID here***"
width="450"
height="600"
colorscheme="dark"
show_faces="false"
stream="true"
header="false"
logobar="0"
css="http://***my domain here***/css/FBstyles.css?1"
href="http://www.facebook.com/***my page name here***"
></fb:like-box>
But I still get these sorts of errors:
"(4) Unsafe JavaScript attempt to access frame with URL ...(my webpage)...from frame with URL http://www.facebook.com/plugins/likebox.php?channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Dfd907a0e%26origin...blahblahblah. Domains, protocols and ports must match."
Where am I screwing up?
I went this route too. Although you are using FBML, the actual embedded code ends up being an iframe anyway. (you can see it in the DOM with an HTML inspector after it loads). About the only thing I was able to do was put it in a div with a colored background, since the iframe is transparent, and a border.
You are probably getting errors since the javascript on the Facebook server is trying to access the CSS on your server. I didn't think you could do this.
EDIT:
In the StackOverflow link you provided, the posted answers clearly state that using your own CSS only works with a "Fan" box, not with a "Like" box.
Related
Our webapp displays untrusted html uploaded by end users. At the moment, we display the html in an iframe, which nicely isolates the html from the rest of the site. Any css contained in the html can't mess up anything outside the iframe.
Unfortunately, the iframes are causing problems as we try to migrate to a mobile-friendly site. We're having trouble getting mobile touch event handlers to function correctly inside an iframe.
Is there any alternative to iframes for this app? We'd like to load the html into a plain <div>, but <html> and <head> tags aren't really valid inside a div and we'd have to play a bunch of games to get the css to work. And then we'd have to prevent the css from affecting anything else on the site.
We could try to sanitize the html, but we really do need to allow end users to apply their own arbitrary css to the html. The nature of the app requires it.
I want to apply css to google calender iframe. I had tried with Jquery but it gives JavaScript security error. However I also tried this link
Got success but many of its links goes to 404 page as it takes my domain as base URL
You will face a security error when you apply css using javascript to an iframe that contains a page in a different domain. but this problem has a workaround by using document.domain if both documents are on the same top level domain, are using the same protocol & you can add the following line of JavaScript to the page in the iframe:
document.domain = "example.com";
the page containing the iframe needs the same line to make the domains match. Once this is in place, the script running on your main page is allowed to access properties of the document in the iframe element –
You cannot apply css to a iFrame ...
An iframe is a 'hole' in your page that displays another web page
inside of it. The contents of the iframe is not in any shape or form
part of your parent page.
From here
The reason behind that is security. If you have blabla.com in one
window and gmail.com in another one, then you’d not want a script from
blabla.com to access or modify your mail or run actions in context of
gmail on your behalf.
From here
If the iFrame is on the same domain and it doesnt violate the "Same-origin policy", you can work around this situation like this:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
Solution posted here
Anyway, if you are not violating the "Same-orgin policy", you probably don't want to use an iFrame.
How to add Open Graph properties to an iframe?
For example, this is a Facebook "Like" button generated by default by prettyPhoto (lightbox-like jquery plugin for displaying full-screen images):
<iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href=http%3A%2F%2Fexample.com%2F%23prettyPhoto%2F2%2F&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowtransparency="true"></iframe>
This code has the following problems:
in practice, it Likes the page http://example.com instead of the
dynamic photo page (which is http://example.com/#prettyPhoto/2/)
It shows title and description from page http://example.com instead of the dynamic photo page
The http://developers.facebook.com/tools/debug tool, when I pass my dynamic image page address to it (http://example.com/#prettyPhoto/2/) tells me that:
Inferred Property: The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
Will setting those properties help to have the correct url and description for the image? How to insert those properties into the "Like" button iframe? For example, let's assume that the og:title is "My super image". How should the mentioned above iframe code look like with this property set, where to put it?
How to add Open Graph properties to an iframe?
Not at all, of course.
Those properties are put into the HTML code of URLs delivering HTML documents; the “iframe” has nothing to do with it whatsoever.
This code has the following problems:
in practice, it Likes the page http://example.com instead of the dynamic photo page (which is http://example.com/#prettyPhoto/2/)
It shows title and description from page http://example.com instead of the dynamic photo page
Those are not problems of the like button code, but of the site at http://example.com.
The hash part of an URL has only client-side meaning – it does not even get transferred to the web server at all. So http://example.com/#prettyPhoto/2/ and http://example.com/ are the exact same URL, from the web server’s view (the server serving example.com). So it will deliver the same data for requests to “both” of those URLs, and that is totally not the like button’s or for that matter Facebook’s fault.
It is most likely the fault of the noob who set up that page on example.com using fancy AJAX an’ stuff, thinking that’s cool and whatnot, but lacking basic knowledge about the techniques involved at the same time.
Will setting those properties help to have the correct url and description for the image?
No; not until the matter of making the individual contents of the site available under individual URLs is not resolved first.
Due to network or some other reasons, some sites do not have their css files loaded and you will see unformatted/un-layout-ed ugly page.
It happened to pages I did before also. Kind of beyond control from a developer/design point of view.
I'm thinking of something like this place at the top of the page and obvious:
/*.... header and stuff */
<body>
<h2 id="hiddennote">If you do not see this page properly, please refresh</h2>
/*.... rest of the page .... */
The external stylesheet have a definition like this:
/* other styles defined */
#hiddennote {display: none;}
Functionally I know it'll work. Any drawbacks?
Another potential drawback is that it depends on the user knowing what the page is supposed to look like. You could fix that by changing the language of the message to something like, "This page is not displaying properly! While you are free to use the content below, you may want to refresh your browser to try loading the layout and styling information." You could also include a screenshot, assuming your images are not hosted on the same troublesome network.
The obvious drawback is if the page fails to load the CSS the second time.
I can see this web site is somewhat over my head, but I'm having trouble finding an answer.
I want to put my header, with links to other pages, over external content. Here's why: My MLM gives me a replicated web site that they maintain. I want to add links to my blog, contact info, even meta tags to the site. I though I had it done by using an iframe. I have my content at the top, and the MLM site shows up in the iframe. (here is the link www.trivanijoanne.com) The problem is that the iframe doesn't resize when the external content changes, and it is confusing for the user to need to scroll up to see the page. Also, the pdf pages don't load inside the iframe.
I looked around online and see that iframes are a thing of the past. What should I be using to accomplish this task?
you could use PHP to get the page markup (possibly using cURL or fopen) and display it whilst putting your own content into the body section
(str_replace()
<body>
with
<body><div id='header'>my content</div>
)
and attach your own css stylesheet with
*{
position:relative;
top:-100px;
}
if you cant use PHP for some reason then this could also be done using javascript and iFrames