Integración de Redes Sociales

Cómo integrar la publicación de datos de un artículo a redes sociales como Youtube, Facebook, Twitter o Whatsapp.

Publicado: Martes 11 de Diciembre de 2018 por David García
Última modificación: Viernes 8 de Marzo de 2019
Integrar posting a YouTube a un FID

Para subir a YouTube un video cargado en un artículo Prontus, debes por un lado obtener las credenciales de la app YouTube que recibirá el video, descritas en Configuración para Redes Sociales - YouTube, siguiendo las instrucciones que verás en la página Administrar → Configuración → Redes Sociales. Además de obtener las credenciales mencionadas, debes agregar el código necesario a tu FID, por ejemplo el siguiente:

<!DOCTYPE html>
<html lang="es"> <head> %%MACRO(_head.html)%% <script src="/prontus/cpan/youtube_post/js-local/PostingYoutube.class.js"></script> <script> var postear_a_youtube = '%%_postear_a_youtube%%'; $(document).ready(function () { %%MACRO(comun_head.html)%% %%MACRO(_configura_redes_sociales.js)%% <!-- resto del head --> <body> <!-- contenido del body --> %%PANEL(Posting a Youtube, bodyYT, _compartir_youtube.html, 1)%% <!-- resto de la plantilla de FID -->

Es decir, debes integrar el script /prontus/cpan/youtube_post/js-local/PostingYoutube.class.js, y las macros reservadas_configura_redes_sociales.js (en el head) y _compartir_youtube.html (en el body). Esto publicará el video cargado en la marca multimedia_video1.

Integrar posting a Facebook a un FID

Para subir a Facebook datos de un artículo Prontus, debes por un lado obtener las credenciales de la app de Facebook que recibirá el contenido, como describimos en Configuración para Redes Sociales - Facebook, siguiendo las instrucciones que verás en la página Administrar → Configuración → Redes Sociales. Además de obtener las credenciales mencionadas, debes agregar el código necesario a tu FID, por ejemplo el siguiente:


<html lang="es"> <head> %%MACRO(_head.html)%% <script src="/prontus/cpan/facebook_post/js-local/PostingFacebook.class.js"></script> <script> var postear_a_facebook = '%%_postear_a_facebook%%'; $(document).ready(function () { %%MACRO(comun_head.html)%% %%MACRO(_configura_redes_sociales.js)%% <!-- resto del head --> <body> <!-- contenido del body --> %%PANEL(Posting a Facebook, bodyFB, _compartir_facebook.html)%% <!-- resto de la plantilla de FID -->

Es decir, debes integrar el script /prontus/cpan/facebook_post/js-local/PostingFacebook.class.js, y las macros reservadas_configura_redes_sociales.js (en el head) y _compartir_facebook.html (en el body). Esto te permite publicar a Facebook un post con titular, bajada, y opcionalmente una imagen, que enlazan al artículo en tu Prontus.

Integrar posting a Twitter a un FID

Para publicar un tweet desde el FID de un artículo Prontus, debes por un lado obtener las credenciales de la app de Twitter que recibirá el contenido, como describimos en Configuración para Redes Sociales - Twitter, siguiendo las instrucciones que verás en la página Administrar → Configuración → Redes Sociales. Además de obtener las credenciales mencionadas, debes agregar el código necesario a tu FID, por ejemplo el siguiente:


<html lang="es"> <head> %%MACRO(_head.html)%% <script src="/prontus/cpan/twitter_post/js-local/PostingTwitter.class.js"></script> <script> var postear_a_twitter = '%%_postear_a_twitter%%'; $(document).ready(function () { %%MACRO(comun_head.html)%% %%MACRO(_configura_redes_sociales.js)%% <!-- resto del head --> <body> <!-- contenido del body --> %%PANEL(Posting a Twitter, bodyTW, _compartir_twitter.html)%% <!-- resto de la plantilla de FID -->

Es decir, debes integrar el script /prontus/cpan/twitter_post/js-local/PostingTwitter.class.js, y las macros reservadas_configura_redes_sociales.js (en el head) y _compartir_twitter.html (en el body). Esto te permite publicar a Twitter un post con opcionalmente una imagen, que enlaza al artículo en tu Prontus.

Integrar Facebook a un artículo

Para compartir los enlaces de  articulos Prontus en Facebook, debes editar la plantilla del Artículo  y agregar el siguiente código, de modo que puedas crear un boton que enlaza el artículo con el widget habilitado por Facebook para compartir enlaces en la red social:  

<!--facebook-->
<div class="fb">
 <a name="fb_share" target="_blank" type="button_count" href="http://www.facebook.com/share.php?u=https://%%_SERVER_NAME%%%%_FILEURL%%">Compartir</a>      
 <script type="text/javascript">
 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = 'http://static.ak.fbcdn.net/connect.php/js/FB.Share';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 </script>
</div>
<!--/facebook-->

El código anterior comparte la URL de la página que se está visualizando.

En el parametro share.php?u= se pueden dejar las marcas prontus correcpondientes a la URL del articulos, estas son las marcas 

%%_SERVER_NAME%%: esta marca es reemplazada por la URL del servidor o del ambiente al momento de generar el artículo.

%%_FILEURL%%: Esta marca es reemplazada por la URL relativa al momento de generar el artículo. 

Ejemplo de Plantilla de artículo con botón de compartir en Facebook:

<!DOCTYPE html>
<html>
<head>
<title>Fid de artículo con botón compartir en facebook</title> <script type="text/javascript">var Utiles = {   /**  * Zona de Configuraciones  */ 
dirCgiBin: '/cgi-bin', 
prontusName: '/miprontus', 
serverName: 'http://www.tusitio.cl', 
configComun: 'toolbar=0,status=0,menubar=0,location=0,directories=0', 
msgWin: 'Debes habilitar las ventanas emergentes en tu navegador para acceder a esta funcionalidad.', 
msgBadBrowser: 'Su browser no soporta esta característica',  widthEnviar: 400,  heightEnviar: 455,
  /**   
* Abre una ventana pop generica 
* @param loc Url de la pagina que se abrira en la pop 
* @param nom nombre de la ventana 
* @param ancho ancho de la ventana 
* @param alto alto de la ventana 
* @param posx posicion X de la ventana 
* @param posy posicion Y de la ventana  */ 
subWin: function (loc, nom, ancho, alto, posx, posy) { 
var thisposx = posx; 
var thisposy = posy; 
if(typeof thisposx === 'undefined') {  thisposx = 20;  } 
if(typeof thisposy === 'undefined') {  thisposy = 10;  } 
if ((typeof loc === 'undefined') || (loc === "")){  return false;  }
   var options = 'width=' + ancho + ',height=' + alto + ',scrollbars=1,resizable=1,' +  Utiles.configComun; 
var win = window.open(loc, nom, options); 
if(win) { 
win.focus();
     }else{ 
alert(Utiles.msgWin); 
return; 

win.focus(); 
win.moveTo(thisposx, thisposy);
   }
};
</script>
</head>
<body> 
<a href="#" onclick="Utiles.subWin('http://www.facebook.com/share.php?u=https://%%_SERVER_NAME%%%%_FILEURL%%', 'compartir', 550, 350); return false;" class="wp-box" title="Compartir Facebook"> 
Botón de Compartir articulo en Facebook 
</a>
</body>
</html>

En caso de querer compartir una url específica, se debe agregar el parámetro share_url a la etiqueta <a>, por ejemplo:

<a name="fb_share" type="button_count" share_url="http://URL_PAGINA" href="http://www.facebook.com/sharer.php">Compartir</a>
Integrar Twitter a un artículo

En el caso de twitter basta con agregar el siguiente código a la Plantilla de Artículo: 

<!--twitter-->
  <div class="tw">
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="es">
Tweet
</a>

  <script type="text/javascript">
  (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'http://platform.twitter.com/widgets.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  </script>
  </div>
<!--/twitter-->
Compartir enlace de Artículos en Whatsapp
<!DOCTYPE html>
<html>
  <head>
  <title>Fid de artículo con botón compartir en facebook</title>
  <script type="text/javascript">var Utiles = {
  /** * Zona de Configuraciones */
  dirCgiBin: '/cgi-bin',
  prontusName: '/miprontus',
  serverName: 'http://www.tusitio.cl',
  configComun: 'toolbar=0,status=0,menubar=0,location=0,directories=0',
  msgWin: 'Debes habilitar las ventanas emergentes en tu navegador para acceder a esta funcionalidad.',
  msgBadBrowser: 'Su browser no soporta esta característica', widthEnviar: 400, heightEnviar: 455,
  /**
* Abre una ventana pop generica
  * @param loc Url de la pagina que se abrira en la pop
  * @param nom nombre de la ventana
  * @param ancho ancho de la ventana
  * @param alto alto de la ventana
  * @param posx posicion X de la ventana
  * @param posy posicion Y de la ventana */
  subWin: function (loc, nom, ancho, alto, posx, posy) {
  var thisposx = posx;
  var thisposy = posy;
  if(typeof thisposx === 'undefined') { thisposx = 20; }
  if(typeof thisposy === 'undefined') { thisposy = 10; }
  if ((typeof loc === 'undefined') || (loc === "")){ return false; }
  var options = 'width=' + ancho + ',height=' + alto + ',scrollbars=1,resizable=1,' + Utiles.configComun;
  var win = window.open(loc, nom, options);
  if(win) {
  win.focus();
  }else{
alert(Utiles.msgWin);
  return;
  }
  win.focus();
  win.moveTo(thisposx, thisposy);
  },
  esMovil: function(loc, nom, ancho, alto){
  if (Utiles.isMobilePlatform()) {
  Utiles.subWin('whatsapp://send?text='+loc,nom,ancho,alto);
}
else {
  Utiles.subWin('https://web.whatsapp.com://send?text='+loc,nom,ancho,alto);
  }
  },
  isMobilePlatform: function() {
  return (Utiles.isPhone() || Utiles.isIpad());
  },
  isPhone: function() {
  return (Utiles.isIphone() ||
  Utiles.isAndroid() ||
  Utiles.isWindowsPhone());
  },
  isAndroid: function() {
  return navigator.userAgent.toLowerCase().indexOf('android') > -1;
  },
  /**
  * retorna si es un iphone o no
  * @returns {Boolean}
  */
  isIphone: function() {
  return navigator.userAgent.match(/(iPod|iPhone)/);
  },
  /**
  * retorna si es un ipad o no
  * @returns {Boolean}
  */
  isIpad: function() {
  return navigator.userAgent.match(/(iPad)/);
  },
  isWindowsPhone: function() {
  return navigator.userAgent.match(/(Windows Phone)/i);
  }
  };
  </script>
  </head>
  <body>
  <a id="whatsapp" href="#" onclick="Utiles.esMovil('https://%%_SERVER_NAME%%%%_FILEURL%% ', 'compartirredes', 550, 350); return false;" class="wp-box" title="Compartir Whatsapp">
  Compartir Whatsapp
  </a>
</body>
</html>
Compartir enlace de Artículos en Telegram
<!DOCTYPE html>
<html>
  <head>
  <title>Fid de artículo con botón compartir en facebook</title>
  <script type="text/javascript">var Utiles = {
  /** * Zona de Configuraciones */
  dirCgiBin: '/cgi-bin',
  prontusName: '/miprontus',
  serverName: 'http://www.tusitio.cl',
  configComun: 'toolbar=0,status=0,menubar=0,location=0,directories=0',
  msgWin: 'Debes habilitar las ventanas emergentes en tu navegador para acceder a esta funcionalidad.',
  msgBadBrowser: 'Su browser no soporta esta característica', widthEnviar: 400, heightEnviar: 455,
  /**
  * Abre una ventana pop generica
  * @param loc Url de la pagina que se abrira en la pop
  * @param nom nombre de la ventana
* @param ancho ancho de la ventana
  * @param alto alto de la ventana
  * @param posx posicion X de la ventana
  * @param posy posicion Y de la ventana */
  subWin: function (loc, nom, ancho, alto, posx, posy) {
  var thisposx = posx;
  var thisposy = posy;
  if(typeof thisposx === 'undefined') { thisposx = 20; }
  if(typeof thisposy === 'undefined') { thisposy = 10; }
  if ((typeof loc === 'undefined') || (loc === "")){ return false; }
  var options = 'width=' + ancho + ',height=' + alto + ',scrollbars=1,resizable=1,' + Utiles.configComun;
var win = window.open(loc, nom, options);
  if(win) {
  win.focus();
  }else{
  alert(Utiles.msgWin);
  return;
  }
  win.focus();
  win.moveTo(thisposx, thisposy);
}
  };
  </script>
  </head>
  <body>
  <a href="#" onclick="Utiles.subWin('https://t.me/share/url?url=https://%%_SERVER_NAME%%%%_FILEURL%%', 'compartir', 550, 350); return false;" class="wp-box" title="Compartir Telegram">
  Compartir en Telegram
  </a>
  </body>
</html>