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
Related
Facebook recommends the following code be added to a webpage to allow conversion tracking. This is one of several similar "beacons" we have installed on our site. Many of them are using the "createElement" method to insert the script tag dynamically into the document model...
<script>
(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
_fbq.push(['track','1234567890',{'value':'10.00','currency':'USD'}]);
</script>
Question, can the code be simplified to use the following script tag...
<script src="//connect.facebook.net/en_US/fbds.js" async></script>
<script>
window._fbq = window._fbq || [];
_fbq.loaded = true; // This may not even be needed anymore
_fbq.push(['track','1234567890',{'value':'10.00','currency':'USD'}]);
</script>
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 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.
I have this self-executing function:
<script type="text/javascript">
(function() {
var sc = document.createElement('script');
sc.src = 'http://blahblah.com/test.js';
sc.type = 'text/javascript';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(sc, s);
})();
</script>
All that is contained in test.js is:
document.write('ping!');
However, it hangs -- am I doing something incorrect?
I found a way to go around the document.write but now the only question is why does this not work.
var nc = document.createElement('div');
nc.appendChild(document.createTextNode('blah'));
var scr = document.getElementsByTagName('script')[0];
scr.parentNode.insertBefore(nc, scr);
I have no idea what you're trying to accomplish, but your code is valid as long as it's hosted on http://blahblah.com/.
Your browser won't let you execute remote code to manipulate the original page. It's not that dumb.