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