Looks like this doesn’t work anymore. Maybe Facebook stopped respecting the “css” attribute? Does this still work for anyone?
Facebook has deprecated the Fan Box (introduced in 2009) in favor of the new Like Box. While the features of each are similar, they use different JavaScript APIs.
You can still customize the appearance of the Fan Box with your own external CSS, but it's unclear how long Facebook will continue to support this ability.
Here's some sample FBML code that shows how the Fan Box accepts external CSS:
<div id="fb-root"></div>
<fb:fan
profile_id="104818966496"
backgroundshow_faces="true"
stream="false"
header="false"
connections="8"
css="http://example.com/css/stylesheet.css?1310162522">
</fb:fan>
<script>
// Initialize Facebook JavaScript SDK
// http://developers.facebook.com/docs/reference/javascript/FB.init
window.fbAsyncInit = function() {
FB.init({
appId: '136570223089806',
xfbml: true
});
};
// Asynchronously Load Facebook Fan Box Social Plugin
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Some things to keep in mind:
Your custom CSS will be filtered through Facebook's content rendering servers and needs to be public facing. (Meaning, you'll have to upload/edit your CSS file to a web server to test how it looks when making changes).
It's recommended to append (and update) a query string to your CSS during development, since Facebook will heavily cache your CSS. After making a change, update your query string variable to instruct Facebook to fetch a new copy of your stylesheet.
Facebook will prefix all your HTML/CSS/JS elements with a "namespace" created using your application id. By doing this, Facebook ensures that your CSS can't manipulate standard Facebook elements and layouts.
Be aware, not all CSS properties and selectors are allowed, and Facebook will remove many CSS3 rules from your CSS.
Most frustrating of all though, is that Facebook seems to remove allow some vendor prefixes while disallowing others. For example, Facebook removes Webkit vendor prefixes (-webkit-border-radius) but allows Mozilla prefixes (-moz-border-radius). Annoying!
This means that rounded corners, drop-shadows and other vendor specific CSS may not appear in all browsers for your custom Facebook Fan Box. So, try as you might, you just may not be able to get your Facebook Fan Box to look the same in all browsers.
Related
I'm currently integrating multiple microservices ui into a web portal. I have a navigation sidebar with link to microservices which will be loaded into an iframe in the central area.
I have lot of issue with iframe (security with frame option header, window sizing, etc...)
Do you know about a better alternative to an iframe?
If your micro services have a REST API available, you can use an embeded javascript code instead of iframe. Your embed code would look something like:
<div id="embed_id"></div>
<script type="text/javascript">
(function(){
var embededJavascriptElement = document.createElement("script");
embededJavascriptElement.type = "text/javascript";
embededJavascriptElement.charset= "utf-8";
embededJavascriptElement.id = "embed_script";
embededJavascriptElement.src = "<path to your script>";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body") [0]).appendChild(embededJavascriptElement);
})();
</script>
The script above will insert another script tag into your DOM. That script will be interpreted, will search for the element with id ="embed_id" and will render the embeded code into that div (you need to implement this behavior).
You already tagged your question accordingly with spring-cloud and Zuul. I'd suggest this is exactly the way to go cause this way you can avoid the browsers sandbox as well as to manage CORS headers on your services. Just use start.spring.io and include Zuul as a requirement and define your rules. I suggest you start with static routes and if you then are familiar and confident with Zuul, embed a service registry and discovery like Eureka, consul or etcd.
I couldn't find any solutions on google which can make the newly introduced facebook posts embed to responsive. Does anyone got a solution or tricks? Thanks
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766" ><div class="fb-xfbml-parse-ignore">Post by Facebook Security.</div></div>
Set data-width to auto to use fluid width:
<div class="fb-post" data-href="url" data-width="auto"></div>
I've created a small jQuery plugin to fix this. Since the Facebook Embedded Posts plugin renders the correct width when using the data-width attribute, we can listen for width changes on our page, update the data-width attributes and then re-render the plugins.
See http://jsfiddle.net/brohde/GRcen/
Usage: $('#post').autoResizeFbPost();
Plugin logic:
On document ready:
Save original HTML of $('#post') to preserve any <div class="fb-post"> elements – the Facebook SDK removes this from the DOM.
The Fix: Update all <div class="fb-post"> elements with the correct data-width attribute (Uses $('#post').width() ).
On window resize, run The Fix again and also call FB.XFBML.parse(); to render the Facebook plugin(s). The plugin will wait 1 second after the last window resize to avoid multiple DOM updates and FB.XFBML.parse(); calls.
If you mean "responsive" as in "responsive design", you can't. Facebook uses a cross-domain iframe for JS/CSS isolation and session security, and it generates the iframe dimensions dynamically based on contents using privileged cross-domain communication, so you can't just play around with CSS to get things how you want them. See this section on official page for the social plugin:
Can I customize how the post is displayed on my web page?
Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.
If you mean that the plugin is not displaying properly, you should follow the instructions with the Get Code button on the official page for the social plugin.
Details:
Your markup is missing an app ID. Where did you find this markup? You need to specify an app ID. If you load the JS SDK manually, that means adding it to the parameters of FB.init as seen here. In your case, you are using the shortened URL-based init, where the SDK URL has parameters in its fragment: #xfbml=1 in your example. You will need to change it so it is more like #xfbml=1&appId=1234567890.
Update: You should use the console in your browser's built-in developer tools (or Firebug, etc.) to see info about errors with the JS SDK. When I tried your code on an https:// site, I got this error:
[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.
so I changed the URL from http://connect.facebook.net/... to a protocol-relative URL: //connect.facebook.net/...
Another option would have been to just try on an http:// site only. At that point, I got the following errors:
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
This confirms my suspicion -- you need an app ID. I added an app ID and it works.
Found it frustrating I couldn't find anything more elegant than utilizing overflow and max-width 100% to force a horizontal scrollbar.
Added - style="overflow-x: auto; max-width: 100%;"
To result in the following fb-post portion of the embed;
<div class="fb-post" style="overflow-x: auto; max-width: 100%;" data-href="https://www.facebook.com/photo.php?fbid=406800492780796&set=a.202870829840431.42585.202866106507570&type=1" data-width="550">
If you want a little more elegance can always implement styling on the scrollbar.
CSS Webkit Scrollbars - http://css-tricks.com/custom-scrollbars-in-webkit/
jQuery Tiny Scrollbar - http://baijs.nl/tinyscrollbar/
Hope someone finds this useful.
If yours posts are video, you can use Embed Videos instead of Embed Posts, they are responsive. You can get all others datas from open graph and create your own design.
https://developers.facebook.com/docs/plugins/embedded-video-player
I need to use the extra powers of the swfobject api. This object is a new way of embedding Youtube videos into web sites.
Pasting code that I found from Google's tutorial directly into the WordPress editor was in-effective. WordPress would not treat this as active code.
So, I created a new template file and inserted my code into that file. This worked relatively well. The code went live and I got the extra feature that I was looking for, which was that I am able to have the visuals of the video autoplay, and to have the sound muted by default.
However, this has messed up the layout and flow of my menus which where just above the video.
Can anyone tell me where to proper place to put this code is, or is this question too specific. If it will help you can see the messed up page at:
http://bestoftimesusa.com/home-mute-test/
and how it is supposed to look at:
http://bestoftimesusa.com
The fully functional code that got embedded is this:
<script type="text/javascript" src="/wp-includes/js/swfobject/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var ytplayer = false;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/IBjstQceGBk?enablejsapi=1&playerapiid=ytplayer&version=3&autoplay=1",
"ytapiplayer", "370", "238", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.mute();
}
</script>
</div>
Unless you want the same youtube video to appear on all pages (of a certain type), I don't think putting that entire block in your template files makes sense. The only part that really makes sense for a template file is the first line. The lines after that are video-specific.
By default, WordPress filters out javascript from posts. You can disable that filtering with a plugin which would allow you to include javascript in your posts.
Using that plugin, you can set javascript filters on a global or per-post basis. It seems like a per-post basis would work for you so I'd go with that, just enabling it on the page I wanted.
Two last things:
You could put the first line in one of your template files to eliminate having to put that in every post
You have one opening <div> tag but two closing </div> tags, that could be expected, but I'd double check.
I am writing a Firefox extension and I am using their Add-on SDK; but I can't figure out how to inject a local CSS file from the data folder into the webpage. It would be great if there were a way to do it via page_mod package.
As of Add-on SDK 1.14 there's experimental (API may change) support for this in the page-mod module:
var pageMod = require("sdk/page-mod").PageMod({
include: "*",
contentStyleFile: require("sdk/self").data.url("my-style.css")
});
See Modifying Web Pages Based on URL for an elaborate guide to using page-mod.
There's a page on the Addon SDK's wiki discussing issues with the current implementation, although it seems a bit outdated.
Under the hood it uses nsIDOMWindowUtils.loadSheet() to add the stylesheet without touching the page's DOM. (This API was added in Firefox 18, see bug 737003. Before that you had to use nsIStyleSheetService which was similar, but not tab-specific.)
Before that you could use the page-mod's content script to insert the link or style element (example). [edit] thanks to lwburk's comment, here's a more elaborate elaborate description in Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox By Mark Pilgrim: "Alter a Page's Style" section.
To insert CSS from main.js one can now use "page-mod":
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.org",
contentStyleFile: data.url("my-page-mod.css")
});
I developed one asp.net web site with functionality of finding route, find place
through bing map control.
My Problem is when I am opening this web site from windows mobile with internet explorer 6.
All controls are appearing but map control is not appearing why?
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">
</script>
<script type="text/javascript">
function OnPageLoad()
{
var myMap = document.getElementById("myMap");
var LA = new VELatLong(41.2666452, -96.0011320,VELatLong.RelativeToGround);
myMap.style.display='';
map = new VEMap('myMap');
map.LoadMap(LA, 1, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
}
</script>
can any one help me?
Thanks
Knowing IE Mobile, I'd say it's something to do with your JavaScript probably.
How are you showing the map? Posting some code to your question would certainly help people narrow down the issue.
Looking at the directions service from bing.com on IE mobile, the map is a static image with the directions rendered on top - is this what you're doing? Or are you trying to call the default js map controls?
Edit to respond to update:
If you take a look at bing mobile you'll see that they aren't using the fully featured client side API, but are doing the bulk of the lifting on the server, culminating in a simple img tag being sent to the mobile browser to generate a static image request.
This sort of process is also talked about in this article on "Getting a map with the Virtual Earth Web Service", which concludes:
VEWS provides static images (on the fly), so you can insert them anywhere that support HTTP requests - mobile devices, JavaScript disabled browsers - or insert them into other documents such as PDFs.