Google Plus Share

Table of Contents

1. Introduction
2. Copy Google Plus JavaScript - iframe
3. Google Plus Shared Link
4. Conclusion

Introduction

This post shows two approaches for adding a Google Plus share button to your web application: using an iframe and using a shared link.

Copy Google Plus JavaScript - iframe

The following screen shows the default Google Plus code. You just need to copy the following code and put it in your HTML.

<!-- Place this tag in your head or just before your close body tag. -->


<!-- Place this tag where you want the share button to render. -->

Google Plus Shared Link

This is a better choice, since it is not an iframe, so it will be easy to change the style.

The following are two examples of the HTML:

[![Share on Google+](https://www.gstatic.com/images/icons/gplus-64.png)](https://plus.google.com/share?url=http://www.dakehe.info/blog/post/facebook-share-button)

[](https://plus.google.com/share?url=http://www.dakehe.info/blog/post/facebook-share-button)

After improving the above a little bit, I rewrote it as follows:

var dhe = dhe || {};
dhe.share_core = (function () {

    function openPopup(url, height, width) {
        height = height || 500;
        width = width || 500;
        window.open(url, "myWindow", "status = 1, height = " + height + ", width = " + width + ", resizable = 0");
    }

    /*
     * get current url, remove the hash or querystring
     */
    function getCurrentUrl() {
        var _location = window.location;
        var url = _location.origin + _location.pathname;
        return url;
    }

    return {
        getCurrentUrl : getCurrentUrl,
        openPopup: openPopup
    };
})();

Also, the following is what the HTML looks like:

[](http://www.dakehe.info/blog/post/facebook-share-button)

Conclusion

Google Plus offered two main ways to add a share button: an iframe-based approach and a shared link approach. The shared link approach is more flexible and easier to style.