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>
Related
Example from: https://hitbtc.com/widget
How can I place 2 widgets at a time on one webpage? How I can "construct widget dynamically"?
<div id="hitbtc-ticker" class="hit-medium" data-hue="28"></div>
<script type="text/javascript">
(function() {
var po = document.createElement("script");
po.type = "text/javascript";
po.async = true;
po.src = "https://hitbtc.com/get_widget?pair=btcusd";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
// You can construct widget dynamically by calling hitbtc.widget("myDiv", "medium", 28, "btcusd");
</script>
One hitbtc widget will work:
<div id="hitbtc-ticker" class="hit-medium" data-refId="59aeac9f76e23"></div>
<script type="text/javascript">
(function() {
var po = document.createElement("script");
po.type = "text/javascript";
po.async = true;
po.src = "https://hitbtc.com/get_widget?pair=ethbtc";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
// You can construct widget dynamically by calling hitbtc.widget("myDiv", "medium", null, "ethbtc", "59aeac9f76e23");
</script>
Two widget will fail to show the second widget, because HTML cannot treat 2 objects with the same ID on one page:
<div id="hitbtc-ticker" class="hit-medium" data-refId="59aeac9f76e23"></div>
<script type="text/javascript">
(function() {
var po = document.createElement("script");
po.type = "text/javascript";
po.async = true;
po.src = "https://hitbtc.com/get_widget?pair=ethbtc";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
// You can construct widget dynamically by calling hitbtc.widget("myDiv", "medium", null, "ethbtc", "59aeac9f76e23");
</script>
<div id="hitbtc-ticker" class="hit-medium" data-refId="59aeac9f76e23"></div>
<script type="text/javascript">
(function() {
var po = document.createElement("script");
po.type = "text/javascript";
po.async = true;
po.src = "https://hitbtc.com/get_widget?pair=ethbtc";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
// You can construct widget dynamically by calling hitbtc.widget("myDiv", "medium", null, "ethbtc", "59aeac9f76e23");
</script>
Trying to change the div id to any other id will result to a widget which cannot be loaded (css use id,childs after the widget is load: #hitbtc-selector,#hitbtc-selector-label,#hitbtc-main-value have unique id) , which force you have to keep hitbtc-ticker as div id
<div id="hitbtc-ticker-A" class="hit-medium" data-refId="59aeac9f76e23"></div>
<script type="text/javascript">
(function() {
var po = document.createElement("script");
po.type = "text/javascript";
po.async = true;
po.src = "https://hitbtc.com/get_widget?pair=ethbtc";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
// You can construct widget dynamically by calling hitbtc.widget("myDiv", "medium", null, "ethbtc", "59aeac9f76e23");
</script>
To conclude:
As HTML cannot treat 2 objects with same ID on the same page, in my opinion, you cant place two widgets because the div id has to be different.
You may try to intercept (after the download) the script source then modify innerHtml before the evaluation to allow the use of differents id, but it is complicated and will not be acceptable from the hitbtc side.
Regards
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.
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>
Since i'm using Google CSE, the main idea is to show the "Top Search Terms" under the CSE Search box. But in the CSE panel, Google is saying:
No queries were sufficiently popular to be listed
So anyway (i don't want to wait it to be sufficient enough and) .. i want to implement it on my own.
What is the best way to capture the submit of the search string (to Google) ?
Or
What is the best way to capture the returning results (back from Google) so i can assume the Search Term has been used. So i can mark/save the current search term.
.
As a reference, this is all i've done so far:
<!-- Goolge CSE -->
<script language="JavaScript">
(function() {
var cx = 'xxxx3941849086xxxxx:xxxxmtk5xxxxxx';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<body>
<!-- GCSE Search Box -->
<div class="global-search">
<gcse:searchbox-only linktarget="http://www.example.com/search" queryParameterName="query"></gcse:searchbox-only>
</div>
<!-- GCSE Result Div -->
<div id="googlecse-result">
<gcse:search linktarget="_parent" queryParameterName="query"></gcse:search>
</div>
</body>
I find the value of the search term here and save in my own db:
google.search.cse.element.getElement('standard0').getInputQuery()
I wouldn't advise you hardcoding 'standard0'.
If you give your gcse elements a name using gname="SomeName" then you can use this as a reference.
google.search.cse.element.getElement('SomeName').getInputQuery()
I have 3 google +1 buttons in the same wordpress page. But one of them fails when is clicked (in then float lateral widget) showing an exclamation mark.
When click again the following page is opened:
+1 button is unavailable or has stopped working. I am pretty sure that none of the described possible reasons occur.
The code for both is practically the same:
// float code (malfunction)
<div id="float_plusone">
<g:plusone size="tall" href="<?php echo urlencode(get_permalink()); ?>" count="true"></g:plusone>
</div>
<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>
// above/below posts code (works)
<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>
<g:plusone size="medium" callback="googleplus_click"></g:plusone>
Any suggestion about is very welcome.
This is the URL the button is sending to the server to +1.
"id":"http://bestpushchairs.net/qc21/disclosure-policy/http%3A%2F%2Fbestpushchairs.net%2Fqc21%2Fdisclosure-policy%2F"
It looks like the button is taking the href value and assuming it is relative to the current path. Try not using urlencode.