Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

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

$
0
0

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+.


Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>