angularjs - reactivos - tablas angular 4

Angularjs con problemas para compartir en las redes sociales

Question

Antes que nada, quiero aclarar que estoy usando prerender.io y que todo está bien. Si pego la URL en Facebook, el sitio se comparte correctamente.

El problema está en el botón Me gusta / Tweet de la red social que tengo en el sitio.

1) El primer problema que tengo es que los botones de Facebook y las secciones de comentarios aparecen "a veces" Quiero decir ... En algunas ocasiones, aparecen, pero si actualizo la página o si intento un horario diferente para cargar la página, los botones no están ahí. No pude encontrar ninguna relación para obtener la causa raíz ... 2) La segunda es que cuando los botones para compartir (Facebook) y para twittear (Twitter) no cargan la URL completa. La URL se compone del servidor + una ruta a la página + la identificación del video (es una página web para ver videos). Pero cuando hago clic en los botones, en algunos casos, la identificación del video no está en la URL, lo cual es muy extraño.

El enlace al sitio del que estoy hablando es: https://www.granojo.com/video/10334

El código es:

<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>

Y en mi core.run tengo:

$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

Su función no parece ser llamada. De forma manual, en la consola de Chrome, ejecuté window.fbAsyncInit(); y tu facebook como un botón, etc. cargado bien. Parece que el fbAyncinit(); no está siendo llamado en el momento correcto.

Me gustaría vincular la función al evento de carga al hacer clic en cualquier cosa, por lo que cuando la página termine de cargar una llamada simple:

 window.fbAsyncInit();

Si eso no funciona, agregaría un pequeño retraso de quizás 250 ms antes de llamarlo.