1 Reply Latest reply on Jun 22, 2014 10:02 AM by OdeePoot

    How to add a google+ share button to a composition?

    Gil1 Level 1

      I am working on a little app for which I want to add share buttons.

       

      I don't have problems adding Facebook share and Twitter buttons, However I cannot find a way to add a Google+ share button.

       

      For FB I create a rectangle and name it fbBtn. Then on click I add the foolowing code:

      FB.ui({

                method: 'feed',

                name: 'Win designer fashion jewelry from Baloka',

                link: ' http://www.mysite.com/',

                picture: 'http://www.mysite.com/external-xfbml/share-image.gif',

                caption: 'Win designer fashion jewelry from Baloka',

                description: 'Baloka is giving away 22 designer fashion jewelry by Maria Mizrahi. Check this out. Do you want to win? You could...',

                message: ''

      });

       

      For Twitter I create a rectangle and name it twitterBTN. Then I add this code to document.compositionReady:

      var twitter = sym.$("twitterBTN");

      var c = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://baloka.com/content/socialApp/fb.html" data-text="Win cool trendy designer fashion jewelry - check this out" data-via="BalokaDesign" data-count="none" data-hashtags="BalokaSweepstakes">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id =id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(docu ment,"script","twitter-wjs");</script>';

      twitter.html(c);

       

      For Google + I found two ways to add a share button:

      First:

      Adding this snipped to the html document (not in EA):

      div class="edgeLoad-EDGE-467457915"><a href="https://plus.google.com/share?url={http:baloka.com}" onclick="javascript:window.open(this.href,

        '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img

        src="https://www.gstatic.com/images/icons/gplus-16.png" alt="Share on Google+"/></a></div>

       

      and adding this to the head:

      <!-- Add the following three tags inside head. -->

          <meta itemprop="name" content="Baloka Sweepstakes">

          <meta itemprop="description" content="Win designer fashion jewelry by Maria Mizrahi - Baloka.

          There are 22 prizes including earrings, bracelets, necklaces and a couple of $100 gift certificates.

         

          Please share with your friends.">

          <meta itemprop="image" content="http://cdn2.bigcommerce.com/server2100/a154e/products/102/images/243/LittleTotemEarrings__ 55527.1355162788.1280.1280.jpg">

       

      This works as expected, but I am having a hard time position the button in the right place on my page. I can see the button in EA, but the position I set it in there is not maintained once the file is published.

      Thus, I would like to know how to include the code directly in EA as I am doing with the Twitter and facebook buttons.

       

      Second:

      Adding this to the html document (not in EA):

      <div id="gplus1" data-action="share" data-annotation="bubble" class="edgeLoad-EDGE-467457915"></div>

                 

      <!-- Place this tag after the last share tag. -->

      <script type="text/javascript">

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

       

      Again, this works, although with this code I don't know  how to customize the name, description and image for the info I am sharing.

      In this case I was able to include the code on EA adding the following to document.compositionReady:

      var googleplus = sym.$('googleplus');

      var click = "javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');";

      var g = '<a href="https://plus.google.com/share?url={http://baloka.com/content/socialApp/fb.html}" onclick="click";return false;"><img src="https://www.gstatic.com/images/icons/gplus-16.png" alt="Share on Google+"/></a>';

      googleplus.html(g);

       

      The problem here is that instead of opening a window, it replaces the page with the one supposed to be on a different window, which I don't like.

       

      So, in short, I need some help figuring out how to include the code directly in EA for the first method for Google+.