Tópicos:  Tutoriales

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: Martes 26 de julio de 2022
Integrar posting a YouTube a un FID
Integrar posting a Facebook a un FID
Integrar posting a Twitter a un FID
Integrar Facebook a un artículo
Integrar Twitter a un artículo
Compartir enlace de Artículos en Whatsapp
Compartir enlace de Artículos en Telegram
subir
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>
$(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 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.

subir
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>
$(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  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.

subir
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>
$(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 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.

subir
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>
subir
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-->
subir
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>
subir
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>
Tópicos:  Tutoriales