I'm trying to add css styling to Facebook Like Box XFBML file but it doesn't take the stylesheet the regular way – its own stylesheet comes after yours. So I did some search and found posts that said to add css="youstylesheetlink.css" to the fb:like-box like this:
<fb:like-box href="https://www.facebook.com/example" width="496" height="120" show_faces="true" border_color="" stream="false" header="false" css="http://example.com/css/style.css?2"></fb:like-box>
But no matter what I try it doesn't take the stylesheet. Can anybody guide me how I can achieve this?
Thank you.
Facebook used to allow you to pass custom css to their like box, and that is why you see examples of it happening. But they stopped allowing you to do this for now.
If you could do it, it would be documented here.
IMHO, you cannot tinker with Facebook's corporate branding... they want a consistent user experience everywhere on the Internet, otherwise, you'll have people not trusting things that look like homemade "like" boxes.
Also see this...
Embedded Facebook Like-Box won't let me style it. Why?
Unless your website happens to have the same matching protocol, domain and port as the Facebook iframe, you can not modify it because of Same Origin Policy.
Related
Has anyone been able to format a Facebook feed in a Twitter Bootstrap site? I have a site that uses the Facebook feed that currently does not use Bootstrap. Curious to know what issues and advice anyone has about it. The feed is but so flexible; I've had issues with fitting it in the current site.
Thanks in advance.
Got some bad news for you. Most Facebook embeddable items are <iframe>'s. That means Facebook is in complete control of the look, feel and behavior of the content. Because of the same origin policy you can't even use Javascript to attempt to force styles upon the <iframe>.
Facebook does give you some basic options like width, height and color scheme when you embed it. If you're looking for 100% control and customization you probably want to look into the Graph API instead.
Please Note: This question is not related directly to Server-side detection that a page is shown inside an IFrame, as I'm showing you an instance where it would appear that the guys at MDN (Mozilla Developer Network) are already detecting that content is being delivered to an iframe, although, if you read through this, I discuss the possibility that this isn't server-side related at all; it might be some sort of "rights" issue declared some how or in some way I don't know about. The point is to understand how something already existing works.
First of all, I do not desire to rip off MDN (Mozilla Developer Network) content as my own. I'm asking this because I'm truly puzzled by it. The guys at MDN seem to have pulled of a nice trick, and I'd like to know it, but maybe its simpler than I realized.
The code is only:
<iframe src="https://developer.mozilla.org/en-US/docs/HTML/HTML5"></iframe>
Take, for example, this fiddle:
http://jsfiddle.net/jfcox/D3UNZ/
Do you notice how there's no content in the iframe? There doesn't appear to be any content related to the request on the Chrome network tab.
I assure you, that'd work on a "normal" website, like example.org. see http://jsfiddle.net/jfcox/nPwcu/
So, I ask, what is it that they are doing to detect that a request is being made from an iframe?
Is there some Browser-Fu I don't know about? Oddly enough, that might be the case. From IE9.
To help protect the security of information you enter into this
website, the publisher of this content does not allow it to be
displayed in a frame.
Wow! Ok, so maybe it's not server-side, maybe it's all Browser-Fu. Even so, how does IE9 and these other browsers know what I don't know? What do I need to look up to learn about this?
I have my own suspicions, namely that there's some file at the root of the website like crossdomain.xml for flash that defines permissions about content usage or whatever, but I still wouldn't even know where to start if that's the case.
Turns out, it's a pretty simple copy protection. All you need to do is set a response header.
https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options
https://datatracker.ietf.org/doc/html/draft-ietf-websec-x-frame-options-00
Yes, "frame", instead of "iframe".
:eyeroll:
I suppose the name makes sense, considering the possibility somebody could still attempt to use old HTML 4 frame tags for whatever purpose, and I would expect most browser/DOM engines have baked-in support of frame tags given HTML history. Netscape created/supported frames as early as version 2.0 and iframe was a later, purely-Microsoft invention that found wide adoption, IIRC.
I had a video that stopped being controllable when I appended a safety feature: I added
"&origin=http://mydomain.com" to the attributes of the iframe that had the video. (By not controllable I mean that the youtube api stopped working). So I decided to use the "sandbox" feature, which is also for security.
Unfortunately, it works too well - it blocks content too.
So if all I want to do is prevent the iframe from causing mischief, but I also want to play third party videos, should I use:
sandbox=""
or
sandbox="allow-same-origin"
I don't quite understand it from the W3schools description.
Thanks,
You should be able to set the origin= parameter on the URL that you include as the src= for your iframe tag.
One thing to try is URL escaping the :// characters in the parameter's value, e.g. origin=http%3A%2F%2F//mydomain.com. Does that help? If so, we'll get the example updated to reflect the need to escape.
If that doesn't help, could you please provide the full iframe tag, including all the attributes and their values, that you're using?
origin only works on html pages, not on asp.net pages. I tested it.
I'm developing a website and I decided to use Facebook comments to provide commentable behaviour. But, unfortunately, I met some problems.
While trying to customize look of news page, ex. http://buchman.pcspace.pl/aktualnosci/ept-snowfest-podsumowanie-czwartego-dnia.html, I am not able to apply CSS to view: everything appears correctly in HTML source, but doesn't change view.
What's wrong?
According to this blog post the new fb:comments no longer supports custom CSS.
After log research I noticed that while loading fb frame, it doesn't use css given as param.
It causes all parts don't work..
I really hate asking about Facebook Connect on SO, but their own development forums are horrendous.
We're implementing a Facebook share button using this:
<fb:share-button class="url" href="http://oursite.com/"></fb:shared-button>
This is documented(poorly) here: http://wiki.developers.facebook.com/index.php/Fb:share-button
I need to be able to change the text from "Share" to something else. I've spent 2 hours looking for an answer to this and have come up short.
If you really want to customize the facebook share button, look at the url you would use for a desktop app. Makes it much better. You can also use AddThis the same way to get some analytics from the share.
With the replacement like social plugin (the one you should be using now instead of the deprecated fb:share-button), you have two choices for the button text: Like or Recommend.
https://developers.facebook.com/docs/reference/plugins/like/