CODEWITHSUNDEEP
javascriptgoogle-plus
Joshc
Joshc

Reputation: 3853

Google share button - custom href url

I am struggling with this one.

You would think the documentation would give your simple straight forward examples.

All I want to do is get the share button to share a custom URL, instead of the current page it's on.

Documentation here... https://developers.google.com/+/web/share/

Then this is what I've tried below and all failed...

#1

<div id="g-plus-footer" class="g-plus" data-action="share" data-annotation="bubble"></div>

<script>
    (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);
      gapi.plus.render('g-plus-footer', {'href':'http://mysite.co.uk'});
    })();
<script>

#2

<div id="g-plus-footer" class="g-plus" data-action="share" data-annotation="bubble"></div>

<script>    
    (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);
    })();

    gapi.plus.render('g-plus-footer', {'href':'http://mysite.co.uk'});
</script>

#3

<div onClick="gapi.plus.render('g-plus-footer', {'href':'http://mysite.co.uk'});" id="g-plus-footer" class="g-plus" data-action="share" data-annotation="bubble" ></div>

<script>   
    (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>


The error that I seem to get for all of them (apart from number 3) is...

Uncaught ReferenceError: gapi is not defined


Can any one please help understand where I'm going wrong.

Thanks Josh

Upvotes: 3

Views: 7319

Answers (3)

Prisoner
Prisoner

Reputation: 50701

You have two concepts a little mixed up here, but you're on the right track.

Loading the gapi library asynchronously, which is what you're doing, will cause everything with the "g-plus" class to be rendered when it finishes loading. So you don't need to explicitly call anything.

You do, however, need to have the "data-href" attribute set on the div in question already. So you should use a tag something like

<div id="g-plus-footer" class="g-plus" data-href="http://example.com/" data-action="share" data-annotation="bubble"></div>

and have the library loaded just before the closing body tag as you specify in example 3:

<script>   
(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>

Upvotes: 8

Dominic Goulet
Dominic Goulet

Reputation: 8113

You have to add a data-href :

<div id="g-plus-footer" data-href="http://mysite.co.uk" class="g-plus" data-action="share" data-annotation="bubble"></div>

<script>   
    (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>

Upvotes: 2

Kyle
Kyle

Reputation: 4238

Have you made sure to include the Google API library before referencing your gapi?

<script src="https://apis.google.com/js/plusone.js"></script>

<script type="text/javascript">
 // gapi should now be defined
</script>

You are currently loading this asynchronously, meaning that gapi will be undefined until the script is retrieved. Do this synchronously and you should be good to go.

Upvotes: 2

Related Questions