I am working on a generator which helps in creating social buttons all under one roof. I was able to create generator for Facebook & Twitter but there is an issue with Google+ button at the very beginning.
I searched a lot but could not find a proper answer to "refused to display.... 'X-Frame-Options' to 'SAMEORIGIN'".
Issue
Refused to display 'https://apis.google.com/se/0/_/+1/fastbutton?usegapi=1&action=1&size=medium…d=I0_1438276469698&parent=http%3A%2F%2Flocalhost&pfname=&rpctoken=13424874' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Yes, I am testing locally but I even tried online on a website but it still throws this error.
Simple Code
jQuery( document ).ready( function( $ ) {
// GooglePlus script
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
// Add button markup
$( '#googleplus-container' ).html( '<div id="gp" class="g-plusone" data-action="1" data-size="medium" data-annotation="inline" data-width=""></div>' );
// Initialize button
if( typeof gapi !== 'undefined' ){
gapi.plusone.go( '#googleplus-container' );
}
});
Any straight forward solution to this problem?
Once this problem solved I will be dynamically changing the button and its parameters based on user input and then will be re-intializing the button so that changes can be seen live.
Is there any other approach that I can follow like directly adding the iframe?
Thanks!
Remove data-action="1"
from the g-plusone
div. It's not a supported attribute and changes the behavior somehow.