I'm following what is shown on the Google+ API documentation. For some reason, my button isn't clickable at all. Nothing shows up. Nothing happens. I'm running this from the url: file:///TestPage.html in Google Chrome.
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function onSuccess() {
//called fine.
}
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=onSuccess';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
function onSignInCallback(res) {
alert('callback'); //doesn't show up.
}
</script>
</head>
<!-- Not clickable -->
<button id='signInBtn' class="g-signin"
data-scope="https://www.googleapis.com/auth/plus.login"
data-clientid="1085488274737.apps.googleusercontent.com"
data-callback="onSignInCallback"
data-theme="dark"
data-approval-prompt="force"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-width="wide">
</button>
</html>
Any ideas why nothing happens? Why is my button not even clickable?
As akonsu said, see the console of browser
Please access the page from a local web server, not a simple way like file:// URL.
Related
I am working vehicle tracking website, here I have to share some dynamic content in google plus share that is as prefilled text. Issue is the content I am sharing in google plus is shared,when first time I click google plus share, after the content get refresh automatically one minute once through ajax, the prefill text content getting updated, but i click share button in google plus share window the content not getting posted to anyone.
Here is the sample code
<html>
<head>
<title>Share Demo: Deferred execution with language code</title>
<link rel="canonical" href="http://www.example.com" />
</head>
<body>
<script type="text/javascript" src="https://apis.google.com/js/client:plusone.js"></script>
<div id ="sharePost" action="share">Share</div>
<script>
function add(){
var options = {
contenturl: 'https://plus.google.com/pages/',
contentdeeplinkid: '/pages',
clientid: 'xxx',
cookiepolicy: 'single_host_origin',
prefilltext: 'Hai happy friday'+Math.random(),
calltoactionlabel: 'CREATE',
calltoactionurl: 'http://plus.google.com/pages/create',
calltoactiondeeplinkid: '/pages/create'
};
// Call the render method when appropriate within your app to display
// the button.
gapi.interactivepost.render('sharePost', options);
}
setInterval(function(){
add();
},2000);
add();
</script>
</body>
</html>
I can able to share interactive post using java script render method.The main point we need to noted is, we need to use same url for contenturl and calltoactionurl.
<html>
<head>
<title>Share Demo: Deferred execution with language code</title>
<link rel="canonical" href="http://www.example.com" />
</head>
<body>
<script>
window.___gcfg = {
lang: 'en-US',
parsetags: 'explicit'
};
</script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<div id ="sharePost">Share</div>
<script>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'http://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
var options = {
contenturl: 'http://www.google.com',
contentdeeplinkid: '/pages',
clientid: 'xxxxxxxxxxx.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
prefilltext: 'Hai happy friday',
calltoactionlabel: 'INVITE',
calltoactionurl: 'http://www.google.com'
};
// Call the render method when appropriate within your app to display
// the button.
gapi.interactivepost.render('sharePost', options);
</script>
</body>
</html>
Using Addon SDK I am trying to inject script to page on every page load. To test things, plugin is trying to add variable to window object and page should read it. When I run this, I can see "injecting" alert, but page gives me error "undefined property window.myVar". What am I doing wrong? Btw I don't want to use unsafeWindow.
main.js:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*",
contentScriptFile: data.url("inject.js"),
contentScriptWhen: "start",
onAttach: function(worker) {
worker.port.emit("inject", "unused param");
}
});
inject.js
function inject(arg) {
var script = document.createElement("script");
script.innerHTML = 'alert("injecting"); window.myVar=54564;';
document.head.appendChild(script);
}
self.port.on("inject", inject);
page.html
<html>
<head>
</head>
<body>
<script>
alert(window.myVar);
</script>
</body>
</html>
EDIT:
I tried canuckistani's code and it shows some weird behavior. Btw I am on Firefox 31. Here is my code
function inject(arg) {
var myVar = 123;
unsafeWindow.myVar = cloneInto(myVar, unsafeWindow);
}
self.port.on("inject", inject);
and page
<html>
<head>
</head>
<body>
<script>
alert(window.myVar); <!--This shows empty alert box-->
alert(window.myVar); <!--This shows alert box with right value (123)-->
</script>
</body>
</html>
Starting with Firefox 30 ( almost 2 versions ago! ) you can use some new apis to do this. This would look like:
let myVar = {1:2};
self.port.on("inject", function() {
unsafeWindow.myVar = cloneInto(myVar, unsafeWindow);
});
For more information, see this blog post:
Is there a way to open the Google+ interactive post dialog without the need of clicking the button first?
I would like to have it displayed in a website directly.
Below is the related code from the G+ examples.
JavaScript:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
HTML:
<button
class="g-interactivepost"
data-contenturl="https://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="xxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Engage your users today, create a Google+ page for your business."
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Tell your friends
</button>
Add an id to that button element (You can possibly use a different element entirely as long as you include all the supplied attributes -- can't be sure without testing) and style it to be hidden.
From there, just trigger a click on it on whatever event you want.
I.E.
HTML:
<button
id="thisdumbbutton"
class="g-interactivepost"
data-contenturl="https://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="xxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Engage your users today, create a Google+ page for your business."
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Tell your friends
</button>
CSS:
#thisdumbbutton{ display: none; }
JS:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
$('#something').hover(function(){
$('#thisdumbbutton').click();
});
})();
</script>
I used Google Plusone button in my web page and it appears with problem.
Please tell me what do I have to do ? The text is out of the box, and the left side of the box is not normal.
This is what I put in my code:
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I used to use this snippet to re-render a Tweet button.
var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();
But it looks like widgets.js (http://platform.twitter.com/widgets.js) has been modified so twttr.TweetButton is no longer a constructor.
Can anyone help with this issue?
I found the answer on the web. The idea is to re-request the Twitter javascript file. As it is cached, there is no download overhead.
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
For anyone stumbling onto this, there's a new, easier way to do it (as of 5/28/12 if not before). A quick glance didn't find it in the documentation, but you can do twttr.widgets.load(). That'll [re]load all the widgets on the page.
EDIT: It is documented, after all. Check out this page's "Optimization" section (which you can't link to directly)
you just need to call twttr.widgets.load() after your ajax call. no need to reload a script that is already loaded.
Looks like the twttr.TweetButton constructor was never supported, and now no longer works after the last API update:
http://groups.google.com/group/twitter-development-talk/browse_thread/thread/bcda486acdf4ab42/6a557050f850ccf2?lnk=gst&q=+twttr.TweetButton#6a557050f850ccf2
The supported method is to create an iframe-based Tweet button dynamically:
http://dev.twitter.com/pages/tweet_button#using-an-iframe
Although note #Runningskull’s answer for updated information.
First, make sure you have jQuery included in your document's head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Then create a link that has the same URL as the eventual tweet button, along with an empty div where your button will be rendered:
<div id="tbutton"></div>
At the bottom of your page, right above the /body tag, include the javascript from Twitter and the function that will render the button, as well as the listener that will activate the function when the desired event takes place:
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
Lastly, add a link to your page somewhere that will activate the function above based on some event:
Hover here to render a tweet button to div#tbutton.
That's it.
If you want the entire test HTML page to see how I've got it working, see here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Twitter Button Render Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="tbutton"></div>
Hover here to render a tweet button to div#tbutton.
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
</body>
</html>
I just had the same problem, this works in JQuery:
$.getScript('http://platform.twitter.com/widgets.js');
Try the #Anywhere library. Sample js code:
twttr.anywhere(function (T) {
T("#tweetbox").tweetBox({
counter: false,
defaultContent: "Default text in a Tweet box...",
label: "Share this page on Twitter"
});