issue with fb like and gplus share functionality - facebook

Question

Here is the page where I have Google Plus, Twitter and Facebook sharing enabled. You can try and see the behavior:
https://www.famometer.com/usatoday
Twitter sharing button works like a charm, but having major nightmares making g+ and fb like button to work.
First issue:
When Like button is clicked, it shows comment dialogue for a sec and then on subsequent clicks just keeps on flickering, does not allow to share. I tried with FF to look for any javascript errors or such but no errors are seen.
Here is the code:
Right after the <h:body> I have this Java Script code:
Namespace used: xmlns:fb="http://ogp.me/ns/fb#"
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '489611804432300',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// All your canvas and getLogin stuff here
//
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and then in the viewAd.xhtml, I have this code:
<fb:like id="fbLike" href="https://www.famometer.com/usatoday" send="false" width="100" show_faces="false" layout="button_count" action="like" style="top:-3px"></fb:like>
I have done everything by the book, but still not working properly. If I am not logged in to FaceBook, the dialogue pops to sign in, but after signing in, the popup keeps flickering every time the like button is clicked. Can someone shed some light what is wrong in its implementation.
Second issue is with g+ button
It is not populating the url, title and description provided by microdata structure.
Here is the code:
Namespace used: xmlns:g="http://base.google.com/ns/1.0"
<div itemscope="itemscope" itemtype="http://schema.org/Product">
<span style="font-weight: bolder; font-size: 20px;" itemprop="name">#{adBB.business.businessName}</span><br/>
<span style="font-weight: bolder; color:gray;" itemprop="description">#{adBB.business.description}</span>
<h:panelGrid>
... some code here...
<g:plusone href="https://www.famometer.com/#{adBB.business.socialMedia.famometer}" size="medium" count="false"></g:plusone>
... some code here
</h:panelGrid>
</div>
Here is JavaScript - asynchronous one at the bottom of the page.
<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>
I have tried everything but it still reads info from meta tags and not from microdata tags.
Truly appreciate your help in solving these issues.
Thanks,
Sundeep

Answer 1

While the markup appears fine at a glance, the testing tool is not finding your schema.org values. I see the result of that by the share snippet preview not being accurate.
The issue with the dialog might be related to the redirects that you have in place. These should normally be okay. Is there a way you can test without the redirect? Like using https://www.famometer.com/views/viewAd.xhtml?ad=usatoday to test?