Google+ button iframe error

Question

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!

Answer 1

Remove data-action="1" from the g-plusone div. It's not a supported attribute and changes the behavior somehow.