Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add Google plus +1 button dynamically and IE8 problem

Are there any ways to add Google plus +1 button by js dynamically? I need that because a page has many URL's to share and they gotten by AJAX. So, when I get needed URL's I want to generate "+1"-s in some places of the page.

I have written test code which works in all browsers except IE8 (IE7 is not supported by Google at all):

<div class="googlePlusBtn"></div>
<a href="#" class="addGooglePlus">Click me!</a>
<script type="text/javascript">
jQuery(function(){
    jQuery('.googlePlusBtn').html('<g:plusone annotation="inline"></g:plusone>');
    jQuery('a.addGooglePlus').click(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);
        return false;
    })
})
</script>

Could you please help me?

UPD: Fixed. The solution is below:

<div id="googlePlusBtn"></div>
<a href="#" class="addGooglePlus">Click me!</a>
<script type="text/javascript">
jQuery(function(){
            var po = document.createElement('g:plusone');
            var s = document.getElementById('googlePlusBtn');
        s.appendChild(po);
    jQuery('a.addGooglePlus').click(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);
        return false;
    })
})
</script>

So, just changed create document method from jQuery to clean Javascript. IE8 works with that!

like image 964
Eugene Kuzmin Avatar asked Sep 13 '11 09:09

Eugene Kuzmin


1 Answers

The solution is below:

<div id="googlePlusBtn"></div>
<a href="#" class="addGooglePlus">Click me!</a>
<script type="text/javascript">
jQuery(function(){
            var po = document.createElement('g:plusone');
            var s = document.getElementById('googlePlusBtn');
        s.appendChild(po);
    jQuery('a.addGooglePlus').click(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);
        return false;
    })
})
</script>

So, just changed create document method from jQuery to clean Javascript. IE8 works with that!

like image 64
Eugene Kuzmin Avatar answered Oct 29 '22 21:10

Eugene Kuzmin