Social Media JavaScript (buttons) not getting along Google+, Facebook, YouTube etc

Question

I built a quotation mashup. I added a bunch of social sharing buttons. It worked.

I decide to add Google+ and it does not get along with the other JavaScript / HTML. So I commented out all the other social sharing buttons and the Google+ button still doesn't work. Then I try a different quotation, one without a YouTube video it works, one with a YouTube video does not show a Google+ button. That is what I have discovered.

Switching YouTube display code does help, but Facebook like doesn't seem to work now, but Facebook Share does and I'm not 100% sold on my OpenGraph and thus Google+ meta data. Facebook updated their button recently and now I find 'Share' works better than 'Like'. Both can be tracked in Google Analytics in theory. I would like the quotation to appear in the description, that was working for Facebook but I can't get that to happen on Google+. Perhaps I need more meta data. I changed to og:type article that seems to help.

Quotation Collection

Quotation with Video

Quotation with no YouTube Video

I use PHP to build the JavaScript but the Google+ button as far as I can tell gets everything from the metadata. There also might be something wrong with my metadata as I don't do it as cleanly as I do on this page I've revised much of my meta data to try and get my shares to look their best. I need last.fm to provide bigger images or to revisit what I can get out of the wikipedia.

I got all four buttons well 5 social sharing buttons working on my blog, but I used two plugins, the Pinterest button is probably not tracked by Google Analytics but the other four are. I'm pretty sure I almost had it working last night, scarily the li tag seems to make a difference if you use divs and a bunch of CSS it seems to work better than using a list with one button in each item.

<!-- Professional Share Plugin--><div class="ProfessionalShareBox"><div class="PSBtn"><script type="IN/Share" data-counter="right" data-showzero="true" data-onsuccess="LinkedInShare"></script></div><div class="PSBtn"><a href="https://twitter.com/share" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://twitter.com']);" class="twitter-share-button" data-lang="en" data-via="MuskieMcKay"></a></div><div class="PSBtn"><div class="g-plusone" data-size="medium"></div></div><div class="PSBtn"><div class="fb-like" data-href="http://blog.muschamp.ca/2013/11/24/back-from-mexico/" data-send="false" data-width="90" data-layout="button_count" data-show-faces="false" data-action="recommend"></div></div></div><div id="fb-root"></div><div class='yarpp-related yarpp-related-none'>

I might switch to not using an ordered list of buttons and I also might steal from arguments from Ken's plugin seeing as I already gave him advice on how I would do it. ;-) Twitter Cards FTW!

Answer 1

I solved my basic problem. I changed how I was including YouTube videos, switching from probably the iFrame based include to the object include. Now I need to tweak my meta data to get it to display even better in Google+. I also tweaked my OpenGraph and Twitter Card meta data and am trying to find larger images through various APIs. My best effort at this can be seen in this blog post.