Question

I’m trying to figure out how to allow users to click on a Google+ “+1” button from within Flash. From reading through the Google+ docs and examining that their script is doing, I don’t see a way and was wondering if anyone’s solved this yet.

The problem is that their script creates an iFrame which points at a Google subdomain. So I can’t trigger a button click due to cross-domain policy. I can’t simply call the same URI that they’re calling because it’s encoded and their encoding may change. I can’t find any documentation on how to programmatically call a +1, etc…

Any ideas?

Answer 1

Google Plus does not have a version of +1 button which can be directly embedded into flash, and the API they have just released is read-only, therefore you can’t use methods which normally works for the facebook like button.

What I’d suggest is to have an absolutely positioned DIV tag on top of your flash object which you will invoke when needed, and you can pass the correct URL to “like” using the href parameter. I’m using explicit mode for tag rendering to show how you can dynamically prepare the tag.

Here’s some sample code which uses jquery for the animations.

<style type='text/css'>
        .gplus-container {
           display: none;
           position: absolute;
           top: 8px;
           left: 98px;
       }
</style>

<div id="flash-container">
    Flash content, click!
</div>
<div class="gplus-container">
    <div class="g-plusone" data-href="http://jsfiddle.net" ></div>
</div>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {parsetags: 'explicit'}
</script>

<script type="text/javascript">    
$(function(){
    $('#flash-container').click(function(){
        $('.gplus-container').fadeIn();
            gapi.plusone.go();
        });        
});   
</script>

You can also test this sample code on jsfiddle.