I am using a like button from different social media site like g+, facebook like, xing, and twitter. Facebook like button works find in all browsers except in IE7. It displays like this image below:
According to the forum, I got help to use fb:like:width="115". However, it does not help to fix this browser issue. Also I have tried to use my own style with !important but it still does not overwrite because my style is called at the top of the page and it's at the bottom of the body of the page.
Does anyone know how to fix this without adding additional styles manually?
You will find that Facebook no loner supports IE7 so the Like button will never be fixed to appear in IE7 correctly. It's broken because it's not compatible with IE7 (at least not the way FB has coded the Like button). You should get users to use a compatible browser (ideally IE9, Chrome or FF).
3 Steps to Fix Facebook Like Button (with Count) for Internet Explorer 7
This example uses XFBML, since HTML5 is not yet supported by all browsers.
Step 1 or 2 is usually where people go wrong.
Step 1
First check if you have included the Facebook namespace in the html tag:
<html xmlns:fb="http://ogp.me/ns/fb#">
Step 2
Now include this meta tag in the head section of your page:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
How does this work?
IE=edge forces IE to use the latest rendering engine (even in an intranet)
chrome=1 forces Chrome Frame to use the latest IE rendering engine
Step 3
Finally, include the Facebook XFBML & JavaScript SDK on your page:
XFBML
<fb:like send="false" layout="button_count" width="450" show_faces="false"></fb:like>
JavaScript SDK
<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 = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This above issue has been solved. I just add a like to the facebook opengraph and it works.
<html xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
Related
Can anybody explain me where this tags come from and how could I delete/disable/handle it?
I can't find anything of google in all the code (fresh created next js 13 project).
<script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id={id}=dataLayer&cx=c"></script>
script async="" src="https://www.googletagmanager.com/gtm.js?id={id}"></script>
I'm new to next js and have only googled and searched in the code but sadly I didn't find anything about that.
Next does not automatically inject Google Tag Manager scripts into your project.
I would expect something else is injecting those tags into your page, possibly a browser extension. To confirm this you can open the page in an incognito window and check if you can still find the tag.
I have tried to add an iframe of google doc inside my application (react). The iframe works - I can see the doc, and edit it. but I keep getting these errors:
I have added the X-Frame-Option header to my Nginx with "SAMEORIGIN" always attribute without success. (didn't work)
Also added some sandbox configuration to the iframe itself so it can't redirect.
The HTML file head:
HTML head
Please let me know if you have more ideas.
I've got a chrome extension working nicely w/ a popup, but can't get local images in the popup to render in the ported firefox webextension. the popup renders no images and the HTML rendered is:
<img ng-src="assets/img/start_your_day_right.png" src="unsafe:moz-extension://d45045df-43fa-654a-b95c-70de00a23f5a/assets/img/start_your_day_right.png">
After researching this error, I've tried various permutations of the CSP setting in the manifest.json file. Here's the code in the manifest file I've used (also included is the web accessible resources, which was recommended as well):
"web_accessible_resources": [
"assets/img/*.png"
],
"content_security_policy": "img-src 'self' 'unsafe-eval'; script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",
I'm rendering the image w/ angular in the popup.html page:
<img ng-src="{{ tile.imgSrc | htmlSafe }}" />
(where 'tile.imgSrc' renders to a relative path link to the image - eg. 'assets/img/start_your_day_right.png'.
I've tried including various permutations of the img-src setting, including 'unsafe-inline', removing 'self', etc.
The error I can't seem to escape is:
screenshot of ffox console error
I'm running the latest version of FireFox (52.0) w/ an older version of angular (v1.5.5). I have seen that this older version of Angular may cause issues during the submission of the app to FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470), but I've seen no indication that this would be a factor w/ testing and the current error. (And I'm trying to solve this before I introduce any further errors w/ an Angular upgrade).
Any tips out there?
The issue here is that Angular sanitizes ng-src URLs for images and links.
Prepending unsafe: renders the link unusable, and signals that Angular does not recognize it as valid.
This is a known behavior in extensions:
Angular changes urls to "unsafe:" in extension page
ng-src doesn't work in Chrome app, even with ng-csp
As shown in the links above, this behavior can be overridden by patching $compileProvider's imgSrcSanitizationWhitelist and aHrefSanitizationWhitelist. Angular developers officially blessed this workaround and decided not to modify core Angular code for non-web use.
Since the extension you're porting is working in Chrome, it should already contain this patching. All you need to do is to add moz-extension: to the whitelist. Using the bugtracker's example, modified to work in both Chrome and Firefox:
var myModule = angular.module('myApp', [...], function($compileProvider) {
...
$compileProvider.imgSrcSanitizationWhitelist(
/^\s*(https?|ftp|file|chrome-extension|moz-extension):|data:image\//
);
$compileProvider.aHrefSanitizationWhitelist(
/^\s*(https?|ftp|mailto|file|chrome-extension|moz-extension):/
);
});
It should be similarly modified for other non-web platforms, i.e. for Edge or node-webkit.
Here is my code snippet how I am including the favicon in my personal website which was built with Angular JS.
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico"/>
With this code, the favicon is appearing on Chrome and IE browsers. But the favicon is not appearing for Angular JS templates on Firefox browser.
I looked at the similar websites made with Angular JS, the same issue is repeated.
Please refer the following website,
https://www.madewithangular.com/#/
Thanks.
I am seeking an easy and light weight way to upload a small file to a REST API using CORS.
I am using the following plugin:
angular-file-upload
The problem is that it uses swf fallback for deprecated browsers, that don't support the formData object(such as IE 8 and IE 9).
I have opened an issue on github on this matter, but no luck so far.
Which means that I cannot upload a file using CORS on those browsers, which is something I cannot allow (many users still use IE).
angular-file-upload has a solution for old broswers(such as ie8,9),
just put those code before "angular-file-upload-shim.js"
<script>
//optional need to be loaded before angular-file-upload-shim(.min).js
FileAPI = {
jsPath: '/js/FileAPI.min.js/folder/',
staticPath: '/flash/FileAPI.flash.swf/folder/'
}
</script>
you can visit this page on github for more detail.