Google+ Button Mutates Tweet Button into another Google+ Button

Question

I'm designing a web site where I've got a blog post and have the Facebook Like, Google Plus, Tweet buttons under the post. Google Plus documentation says that I should put the script at the head tag, but this just slows down the loading of my site, as sometimes my site won't load (white, blank page) until it loads the script for the Google Plus button (which sometimes takes about 3-4 seconds to connect and load completely). So I've (reading some recommendations on the web) taken the script tag to the bottom of my body tag (inside the body tag anyway).

Here is my code for the buttons:

    <div id="ExtrasBox">
                <table>
                    <tr>
                        <td>
                            <iframe src="http://www.facebook.com/plugins/like.php?app_id=192609804132243&amp;href&amp;send=false&amp;layout=button_count&amp;width=46&amp;show_faces=true&amp;action=like&amp;colorscheme=dark&amp;font=lucida+grande&amp;height=21"
                                scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 46px;
                                height: 21px;" allowtransparency="true"></iframe>
                        </td>
                        <td>
                            <g:plusone size="medium" count="false"></g:plusone>
                        </td>
                        <td>
                            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
                            <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal"
                                data-via="canpoyrazoglu" data-related="can16358p:kişisel hesabım">Tweet</a>
                        </td>
                    </tr>
                </table>
            </div>

I've also got the Google+ script at the end of body.

However, now I'm facing a very weird problem. SOMETIMES (and I have no idea what is the cause) when the page loads, my Tweet button will just change into a Google+ button. So the correct one is this:

correct one

But sometimes (I tried refreshing and full refreshing a few times but couldn't reproduce it right now, it was just like this photoshopped version) I am getting this:

wrong one

And the button just behaves like the Google+ button, inspecting in Firebug just shows me two Google+ buttons, and no trace of any Tweet button. I have my tags closed right (they are in different TD's anyway) and the weirdest thing is that this problem is just randomly occuring. It isn't happening now, but it happened multiple times (each individually after full refreshs etc.) today. I don't know if it has anything to do with the script tag being after the body either (putting the tag into head is no option for me, I don't want to delay my super-fast page load with about 4-5 seconds for a Google+ button), since the problem is NOT reproductable.

Any ideas of what can be the reason? Any useful/non dirty/hacky workarounds/solutions are welcome.

Can you please post some of your HTML/JavaScript code? Otherwise no one will be able to point you in the right direction. — Tom van Enckevort, Aug 01 '11 at 12:40
In English, there is no most weird. Next time write weirdest. — the_drow, Aug 01 '11 at 12:44
Can you use Opera Dragonfly to get the HTML code, so it might hopefully change that `g:plusone` tag into real HTML code for you to update the code sample with? — desbest, Aug 01 '11 at 12:54
Well, I don't want to install Opera, if there are some alternatives that do the same for Firefox 3.6, IE 9 or Chrome. Is there, or should I go and install Opera (as the worst-case)? — Can Poyrazoğlu, Aug 01 '11 at 13:23
@can poyrazoğlu: Were you refering to me? It's just a grammar issue. Call it a compiler error if you will. — the_drow, Aug 01 '11 at 13:36
In Firefox, highlight something and view the selection source, if that helps. I think it won't. — desbest, Aug 01 '11 at 13:40
@desbest i just used firebug to paste the contents of the TD that the +1 is in, not sure if it helps, but: http://pastebin.com/RVtcHRFg but the problem isn't consistent, I just can't reproduce it now.. — Can Poyrazoğlu, Aug 01 '11 at 13:49
@the_drow it wasn't adding anything to the problem, though I'm open to corrections, it was like a bit offensive.. sorry if it wasn't intended. it was fixed anyway. — Can Poyrazoğlu, Aug 01 '11 at 13:51
Try removing all CSS from your document, including CSS resets, and seeing if that fixes it. You might have conflicting CSS. — desbest, Aug 01 '11 at 14:07
Nothing changes, though I haven't got the error ever again after I posted the question.. — Can Poyrazoğlu, Aug 01 '11 at 17:28
@can poyrazoğlu I apologize that it came off harsh. Had I edited your question without commenting to you would have never learned. — the_drow, Aug 02 '11 at 08:27
@the_drow yeah you are right, I am sometimes too aggressive, nevermind :) — Can Poyrazoğlu, Aug 02 '11 at 22:10

score 2 · Answer 1 · answered Aug 01 '11 at 12:40

2

Sharing buttons are actually iframes, so try enclosing each sharing javascript inside into three divs or table cells.

answered Aug 01 '11 at 12:40

desbest

4,746
11
51
84

The OP specifies that the buttons are in different table cells. – the_drow Aug 01 '11 at 12:44
That is exactly what I am doing. Updated the question and added the relevant markup. – Can Poyrazoğlu Aug 01 '11 at 12:45

score 0 · Accepted Answer · answered Aug 06 '11 at 10:28

0

Just for everyone to know: I never had this issue ever again, I think it was most probably a temporary bug due to cache or a script. I've been testing the same site for days and it never happened again.

answered Aug 06 '11 at 10:28

Can Poyrazoğlu

33,241
48
191
389

Google+ Button Mutates Tweet Button into another Google+ Button

2 Answers2