I create a Badge on Google plus developers : https://developers.google.com/+/web/badge/
but when I copy and past the code into my HTML file the badge not showing. Here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google + Badge</title>
</head>
<body>
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-href="https://plus.google.com/109600806421917664383" data-rel="publisher"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
What I'm doing wrong !? Thanks
adeneo's JSFiddle wasn't working for me either (Chrome 35, OSX). First I had to whitelist it in the Disconnect extension. Then I was getting the console error
Uncaught ReferenceError iframes is not defined
which, according to http://www.jesse-smith.net/fixed-google-plus-1-button-working/ and Google PlusOne Button has errors on Chrome, is caused by having 3rd-party cookies blocked.
If you're using Chrome as well (and the problem is caused for you by blocking 3rd-party cookies as well), there should be a cookie icon on the right-hand side of your URL bar. Click it, click "Show cookies and other site data...", change to the "Blocked" tab and allow all the 3rd-party cookies from *.google.com domains.
You can also go Settings > Show advanced settings > Privacy, click the “Content Settings” button and enable 3rd-party cookies everywhere.
Unfortunately I wasn't able to find a way to get your G+ button to work in browsers with 3rd-party cookies disabled.
Related
We have a Line it! share button on our page, it is blocking loading of our own resources with is causing a big performance issue.
With the implementation of the Line Share button proposed by line.me their line-button.js script needs to be included in the middle of the page, where ever the button should be shown. The button replaces the <script> element from where it's initiated:
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"en","type":"b"});
</script>
I can add the line-button.js script to the page after our own have completed:
function includeLine(callback) {
var script = document.createElement('script');
script.async = true;
script.onload = callback;
script.src = "//media.line.me/js/line-button.js?v=20140411";
document.body.appendChild(script);
}
Then I can inject the script element like this:
function initLine() {
var
script = document.createElement('script'),
line = ['new media_line_me.LineButton({"pc":false,"lang":"'];
line.push(util.getLang());
line.push('","type":"b"});');
script.text = line.join('');
publ.$elements.shareLine.append(script);
};
But in line-button.js media_line_me.LineButton attaches a listener to the window.onload event, which by this time has already happened.
I really want to make sure that everything else is done before any social media widgets start to load. But right now I'm kind of out of ideas.
Is there another solution to this that's not loading the JS file as text, rewriting it in our script and then eval() it?
Here is your perfect answer
dynamic LINE share button
Github -- naver LINE dynamic share button
Dynamic share button adds:
css class for both <a> and <img>
All options are now meta properties
loads async, no interaction needed!!
Example usage
<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta name="naver-line-selector" content="" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="http://www.google.com" />
<meta property="og:title" content="Dynamic Share button 0" />
<script src="jquery.js"></script>
<script>
jQuery(document).ready(function() {
$('meta[property="og\\:url"]').attr('content', 'https://www.google.com');
$('meta[property="og\\:title"]').attr('content', 'Lets exchange LINE');
$('meta[property="og\\:locale"]').attr('content', 'en_US');
$('meta[name="naver-line-selector"]').attr('content', '#after-this');
(function(d) {
var po = d.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'naver-LINE-share-button.js?v=20140411';
var s = d.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})(document);
});
</script>
</head>
<body>
<div id="after-this"></div>
</body>
</html>
Please note, implementation is pure javascript. jQuery $.ready used only on html for convenience
Call to action
Could use the following
A glossy button with rounded corners
spreading this javascript library far and wide
I'm having following problem. I have following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Me test site</title>
</head>
<body>
Click Me
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
var handler = function codeclick(event) {
var link_new = $('a').attr('co-target');
if (link_new) {
window.open(link_new, '_blank');
}
}
$('a').bind('click.codeclick', handler);
});
</script>
</body>
</html>
You can see it in action here
The expected behaviour on desktop is that the page in co-target attribute is opened in new tab/window and the one in href attribute is opened in current tab.
On internal mobile facebook browser it should open just the co-target attribute page (intended). But on Google mobile iOS app it opens the page in href attribute (unintended).
Does anyone encountered similar problem before and maybe have some clues what should I do to make it right? There is no need that the page in co-target has to open. I just want it that on both facebook and google app it open one of it, not different one in each.
I have written a Firefox extension that requires the background document's URL. Normally, JavaScript's document.URL could achieve this - but this is different.
Please see my example below:
As can be seen, there are 4 tabs open:
BBC Homepage
Add-ons Manager
Amazon.com
Stack Overflow
And, the page currently being viewed is StackOverflow.com (.. indeed).
My question is: how can I retrieve the URL of the user's active window? (i.e. http://www.stackoverflow.com).
Below is the panel.html code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href=panel.css rel="stylesheet" type="text/css">
</head>
<body>
<header><h3>Where aM I</h3></header>
This Mozilla extension will display the current <i>background</i> URL
<main>
<fieldset>
<legend>Click the Button</legend>
<button onclick="PageViewing()">Fetch</button>
</fieldset>
</main>
<script>
function PageViewing() {
alert(document.URL);
}
</script>
</body></html>
EDIT
If placed in the main.js file, this code snippet works:
var tabs = require("sdk/tabs");
console.log("URL of active tab is " + tabs.activeTab.url); //yields SO.com
So in the context of my example, how could I retrieve it from P-Name/lib, for use in the P-Name/data directory - as a variable?
You have to establish a communication protocol between module and content script. This is done with port.
In your main.js
panel.port.on('askactivetaburl', function(){
panel.port.emit('sentactivetaburl', tabs.activeTab.url);
})
and in your panel script
self.port.on('sentactivetaburl', function(activetaburl){
// work with activetaburl
});
self.port.emit('askactivetaburl');
I want to add <meta http-equiv="X-UA-Compatible" content="IE=edge"> for a particular page.
But my pages are rendered inside one HTML tag. Only the content is changing on clicking different templates. So i cannot add the <meta> in <HEAD> section.
Is there any way to add the <meta http-equiv="X-UA-Compatible" content="IE=edge"> using javascript ?
You can add it:
var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);
...but I wouldn't be surprised if by the time that ran, the browser had already made its decisions about how to render the page.
The real answer here has to be to output the correct tag from the server in the first place. (Sadly, you can't just not have the tag if you need to support IE. :-| )
$('head').append('<meta http-equiv="X-UA-Compatible" content="IE=Edge" />');
or
var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);
Though I'm not certain it will have an affect as it will be generated after the page is loaded
If you want to add meta data tags for page description, use the
SETTINGS of your DNN page to add Description and Keywords. Beyond
that, the best way to go when modifying the HEAD is to dynamically
inject your code into the HEAD via a third party module.
Found at http://www.dotnetnuke.com/Resources/Forums/forumid/7/threadid/298385/scope/posts.aspx
This may allow other meta tags, if you're lucky
Additional HEAD tags can be placed into Page Settings > Advanced
Settings > Page Header Tags.
Found at http://www.dotnetnuke.com/Resources/Forums/forumid/-1/postid/223250/scope/posts.aspx
Like this ?
<script>
var meta = document.createElement('meta');
meta.setAttribute('http-equiv', 'X-UA-Compatible');
meta.setAttribute('content', 'IE=Edge');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
As specified by #marcellothearcane, for modern browser, you can also use:
var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.head.appendChild(meta);
Supported browser here: document.head
Try
document.head.innerHTML += '<meta http-equiv="X-UA-..." content="IE=edge">'
Summary I have an app with a correctly functioning URL scheme that I'd like to launch from a web app stored on the home screen, and the normal JavaScript redirect methods don't seem to work.
Details I'm trying to create an iOS web app, to be opened in full-screen mode from a link saved on the Home Screen. The web app needs to open a specific native app. I have already registered the url scheme for the native app, and verified that it works correctly - I can open the native app by typing the scheme directly into my Safari address bar, for instance. I can also open it from other applications using the +openURL: method of UIApplication. I would like to also open it with certain arguments from a native web app that can be added to the home screen.
What I'm trying to do is use JavaScript like so inside the native app:
window.location = "myapp://myparam";
When using this code inside the web app I get an alert saying:
"Cannot Open myWebAppName - myWebAppName could not be opened. The
error was "This URL can't be shown".".
This same javascript when executed within Safari works correctly. I get the same result using window.location.replace("myapp://myparam").
The html for the web app is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Carl Veazey">
<!-- Date: 2012-04-19 -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
<script type="text/javascript" charset="utf-8">
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
if (window.navigator.standalone == true) {
window.location = "myapp://myparam";
} else {
document.write("please save this to your home screen");
};} else {
alert("Not iPhone!");
document.location.href = 'please-open-from-an-iphone.html';
};
</script>
</body>
</html>
What am I doing wrong here? I'm pretty inexperienced with javascript and mobile web so I suspect I'm just missing something obvious.
Your code works if its in mobile safari but NOT if its from a bookmark on the iOS desktop. Never tried it that way before, but thats the issue. If i just set your JS to
<script type="text/javascript" charset="utf-8">
window.location = "myapp://myparam";
</script>
It works in browser, but when bookmarked it fails. It might have to do something with how the url is loaded when its bookmarked since there is no chrome? My guess is that apple doesn't want booked mark pages to access local apps. Also, I've noticed that if I bookmark a locally hosted page, that works in mobile safari, I can't get it to load via bookmark. Its really odd....
Best recommendation I have for you is to make it
<meta name="apple-mobile-web-app-capable" />
instead of
<meta name="apple-mobile-web-app-capable" content="yes" />
This way it will be on the home screen, but will unfortunately load with the chrome. Thats the only solution I can think of.
If you need to open an iOS application if it is installed and also want to preserve your page's functionality, the location.href = 'myapp://?params=...'; won't help since if myapp:// is not registered, the redirect leads user to unreachable destination.
The safest bet seems to be in using an iframe. The following code will open an iOS app if it is installed and will not cause a failure if it is not (though it may alert a user that the page could not be reached if the app is not installed):
var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame);
// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
Try like this:
The index page
<html><head></head><body>
<?php
$app_url = urlencode('YourApp://profile/blabla');
$full_url = urlencode('http://yoursite.com/profile/bla');
?>
<iframe src="receiver.php?mylink1=<?php echo $app_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
<iframe src="receiver.php?mylink2=<?php echo $full_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
</body>
</html>
the receiver.php page:
<?php if ($first == $_GET['mylink1'])) { ?>
<script type="text/javascript">
self.window.location = "<?php echo $first;?>";
</script>
<?php } if ($second == $_GET['mylink2'])) { ?>
<script type="text/javascript">
window.parent.location.href = "<?php echo $second ;?>";
//window.top.location.href=theLocation;
//window.top.location.replace(theLocation);
</script>
<?php } ?>
To provide an update, iOS14 Beta7 doesn't appear to be opening any local apps via their registered x-callback URLs. 👎
<?php
// Detect device type
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
// Redirect if iPod/iPhone
if( $iPod || $iPhone ){
header('Location:http://example.com');
}
?>
The above will redirect the browser to the inputted URL (http://example.com/) if the device is an iPod or iPhone. Add the script to the top of your web app, make sure you save it as a .php file rather than .html.
Source:
http://www.schiffner.com/programming-php-classes/php-mobile-device-detection/