Angularjs with issue to share in social networks

Question

First of all, I want to clarify that I'm using prerender.io and everything is good. If I paste the URL in Facebook the site is shared correctly.

The issue is on the Like/Tweet button from the social network that I have on the site.

1) The first issue that I have is that the Facebook buttons and comment sections appear "sometimes" I mean... In some occasions, they appear, but if I refresh the page or if I try a different time to load the page, the buttons are not there. I couldn't find any relationship to get the root cause... 2) The second one is that when the buttons to share (Facebook) and to tweet (Twitter) not load the full URL. The URL is composed of the server + a route to the page + the id of the video (is a web page to watch videos). But when I click on the buttons in some cases the video id is not in the URL, which is very weird.

The link to the site I'm talking about is: https://www.granojo.com/video/10334

The code is:

<div class="text-center">
    <div class="fb-like"  style="top: -5px;" data-send="true" data-href="{{ENVIRONMENT.WEB}}/video/{{values.object.id}}" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
    <a data-url="{{ENVIRONMENT.WEB}}/video/{{values.object.id}}" data-text="{{values.object.name}}" href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-hashtags="{{values.object.name | nospace}}">Twittear</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    <!-- Place this tag where you want the +1 button to render. -->
    <div class="g-plusone" data-size="medium" data-href="{{ENVIRONMENT.WEB}}/video/{{values.object.id}}"></div>

    <!-- Place this tag after the last +1 button tag. -->
    <script type="text/javascript">
        window.___gcfg = {lang: 'es'};

        (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>
</div>

And in my core.run I have:

$window.fbAsyncInit = function() {
    FB.init({
        appId: 'xxxxxxx',
        xfbml: true,
        version    : 'v2.6'
    });
};
(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/es_LA/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}

Answer 1

Your function doesn't seem to be getting called. I manually in Chrome console ran window.fbAsyncInit(); and your facebook like button etc loaded fine. It seems that the fbAyncinit(); is not getting called at the right time.

I would bind the function to the load event when you click anything, so when the page finishes loading simple call:

 window.fbAsyncInit();

If that doesnt work i would add a small delay of maybe 250ms before calling it.