1

I would like to add a Google+ badge on my site. When I copy/paste code from Google configuration tool, the badge does not work. I thought the problem might be in the JavaScript so I created an empty index.html and copy/paste the Google Code... but it still does not work:

Google Code:

<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="250" data-href="https://plus.google.com/110789175777197362579" data-theme="dark" data-rel="publisher"></div>

FULL HTML in index.html

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>

<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="250" data-href="https://plus.google.com/110789175777197362579" data-theme="dark" data-rel="publisher"></div>

<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
</body>
</html>

In the console I can see the following errors:

  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). person
  • Use of getAttributeNode() is deprecated. Use getAttribute() instead. rs=AGLTcCOasCY_GkJWPJtHt2mUGUYuzPzTCg%20line%209%20%3E%20eval:34:434
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). person
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
Travis
  • 12,001
  • 8
  • 39
  • 52
steelbull
  • 131
  • 4
  • 14
  • [Works fine for me.](https://jsfiddle.net/b9x4svf9/) Are you trying to put it in an iframe or something? – Mike Cluck Apr 26 '16 at 16:56
  • Hmmm... Im using exactly the same html code, like I published here... and not works. I was try Firefox, Firefox Developer and Chrome. Not works :-( – steelbull Apr 26 '16 at 17:01
  • Possible duplicate of [Google API in Javascript](http://stackoverflow.com/questions/21710842/google-api-in-javascript) – Mike Cluck Apr 26 '16 at 17:03

1 Answers1

4

The issue may be that the Google+ badge may require you to run the code through a web server instead of viewing it locally through the filesystem.

Instead of just opening the HTML file, try to host it using a web server. There are many options here. If you have Python installed, you could try running:

cd [directory where file is located]
python -m SimpleHTTPServer 8080

and then viewing it in a web browser at http://localhost:8080

The reason I think this may be the issue is that I also get errors when running it locally off the filesystem (though not the same errors as you), but when I view it through a web browser, it works fine, like so:

https://jsfiddle.net/wwkdgL5b/

Travis
  • 12,001
  • 8
  • 39
  • 52