6

He creado un blog desde cero y ahora estoy haciendo que puedan compartir la noticia tanto en Facebook como en Twitter.

Es algo que hice hace algún tiempo en un proyecto y me funcionaba, pero en este nueva página que he montado (en un nuevo servidor) no carga ni la imagen ni el texto de la noticia en lo que comparte.

Entiendo que con este código cargo la imagen y el texto que lleva la noticia:

<meta property="og:title" content="<?php echo $res['titulo']; ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://depildiodo.com/ver-noticia.php?ID=<?php echo $idnot; ?>"/>
<meta property="og:image" content="https://www.depildiodo.com/images/noticias/<?php echo $res['foto']; ?>" />
<meta property="og:description" content="<?php echo $subject; ?>" />

Tengo este script para que los botones de compartir hagan su función:

  $(document).on('click', ".shared", function() {
    var url = window.location.href;
    var title = document.title;

    url = encodeURIComponent(url);
    title = encodeURIComponent(title);

    //Boton Facebook
    if($(this).hasClass('fb')){
      url = 'https://www.facebook.com/sharer/sharer.php?u='+url+'&t='+title;
      window.open(url, '_blank');

    //Boton Twitter
    }else if($(this).hasClass('tt')){
      user = 'Depildiodo';//Nuestro usuario de twitter para mostrar como @user
      url = 'https://twitter.com/intent/tweet?text='+title+'&url='+url+'&via='+user;

      window.open(url, '_blank');

    //Boton WhtsApp
    }else if($(this).hasClass('wa')){
      url = 'whatsapp://send?text="'+document.title+'" - "'+window.location.href+'"';

    //Boton correo electronico
    }else if($(this).hasClass('ce')){
      url = 'mailto:?subject='+title+'&body='+url;


    //Ningun boton valido
    }else return;

    //Abrimos la url

  });

Éste es el botón de Facebook:

<div class="shared-panel">
  <a target="_blank" class="shared fb" title="Facebook"></a>
  <a target="_blank" class="shared tt" title="Twitter"></a>
  <a  data-action='share/whatsapp/share' class="shared wa" title="WhatsApp"></a>
  <a class="shared ce" id="sml" title="Email"></a>
</div>
8
  • ¿Podrías facilitarnos la URL para ver si se está generando correctamente? Commented el 13 jun. 2019 a las 6:31
  • Hola @OscarGarcia he cambiado el código por uno que encontré pero me pasa los mismo. Te adjunto la URL, los botones están al final de la noticia https://depildiodo.com/ver-noticia.php?ID=2
    – Miguel
    Commented el 13 jun. 2019 a las 6:36
  • ¿Qué es lo que no te funciona? ¿Pulsar los botones o el resumen que generan al compartir? Por cierto, has olvidado eliminar las etiquetas html de la descripción (og:description). Commented el 13 jun. 2019 a las 6:42
  • Lo que necesito es que al compartir cargue la foto y descripción de la notica, eso es lo que no funciona, en la etiqueta og:description no es donde coge el texto para compartir???
    – Miguel
    Commented el 13 jun. 2019 a las 6:42
  • Sí, pero no puede contener etiquetas HTML (por lo que veo que no has usado htmlspecialchars() correctamente). Echa un vistazo a developers.facebook.com/docs/sharing/webmasters El texto que aparece en grande es lo que contiene og:title y en texto pequeño lo que tiene og:description, todo con el mismo formato. Commented el 13 jun. 2019 a las 6:46

2 respuestas 2

5

Corrigiendo los campos open graph

Tras corregir y agregar los cuatro campos open graph obligatorios (og:title, og:type, og:image y og:url) solicité durante la conversación del chat que comprobara los datos de depuración de la web de Facebook en la siguiente URL:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fdepildiodo.com%2Fver-noticia.php%3FID%3D2

Observamos que la página nos mostraba, algo escondido, un mensaje de error de cURL que impedía que se obtuvieran los campos requeridos. Pudimos reproducir el error de la siguiente manera:

$ curl 'https://depildiodo.com/ver-noticia.php?ID=2'
curl: (60) SSL certificate problem: unable to get local issuer certificate

Problema con el certificado HTTPS

El principal problema por el que ni Facebook ni Twitter recogían la información correctamente era por un error en la cadena de certificación del certificado del servidor web.

Usando openssl vimos que el servidor entregaba únicamente un certificado:

$ openssl s_client -host depildiodo.com -port 443 -showcerts
CONNECTED(00000003)
depth=0 CN = *.depildiodo.com
verify error:num=20:unable to get local issuer certificate
verify return:1
depth=0 CN = *.depildiodo.com
verify error:num=21:unable to verify the first certificate
verify return:1
---
Certificate chain
 0 s:/CN=*.depildiodo.com
   i:/C=US/O=DigiCert Inc/OU=www.digicert.com/CN=Encryption Everywhere DV TLS CA - G1
....
Verify return code: 21 (unable to verify the first certificate)

Por lo que todo apuntaba a que faltaba una entidad certificadora intermedia (Encryption Everywhere DV TLS CA - G1) por agregar al certificado que entrega el servidor web.

De la página web oficial de la entidad certificadora nos descargamos el certificado de la entidad intermedia y lo convertimos a PEM de la siguiente manera:

curl 'https://dl.cacerts.digicert.com/EncryptionEverywhereDVTLSCA-G1.crt' \
  > /etc/ssl/EncryptionEverywhereDVTLSCA-G1.crt
openssl x509 -inform der -in /etc/ssl/EncryptionEverywhereDVTLSCA-G1.crt \
  -out /etc/ssl/EncryptionEverywhereDVTLSCA-G1.pem

Luego generamos el certificado incluyendo a la cadena la entidad certificadora intermedia después del certificado expedido:

cat /etc/ssl/depildiodo.com_ssl_certificate.cer \
  /etc/ssl/EncryptionEverywhereDVTLSCA-G1.pem \
  > /etc/ssl/depildiodo.com_completo.cer

Al concatenar nos percatamos que no había separación entre el fin de un bloque y el comienzo del siguiente:

grep '\-\-\-' /etc/ssl/depildiodo.com_completo.cer
-----BEGIN CERTIFICATE----- 
-----END CERTIFICATE----------BEGIN CERTIFICATE----- 
-----END CERTIFICATE-----

Por lo que tuvimos que dividirlo con la siguiente instrucción:

sed -i 's#----------#-----\n-----#g' /etc/ssl/depildiodo.com_completo.cer

Quedando ahora correctamente separado:

grep '\-\-\-' /etc/ssl/depildiodo.com_completo.cer
-----BEGIN CERTIFICATE----- 
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE----- 
-----END CERTIFICATE-----

Cambiamos el certificado que carga el servidor web (un nginx) de la siguiente manera:

; Comentamos el antiguo certificado
; ssl_certificate /etc/ssl/depildiodo.com_ssl_certificate.cer;
; Dejamos configurado el nuevo con la entidad certificadora intermedia
ssl_certificate /etc/ssl/depildiodo.com_completo.cer;

Tras reiniciar el servidor nginx todo debería funcionar correctamente y tanto Facebook como Twitter deberían obtener la información de open graph sin problemas.

8
  • creo que debes cambiar la pregunta, seria interesante para otros usuarios saber que se necesitan los certificados ssl para consultar los servicios de facebook y/o twitter Commented el 13 jun. 2019 a las 15:36
  • 1
    Mañana intentaré editar la pregunta para que refleje mejor lo que le ocurría y mejorar el seo para otra gente que tenga el mismo problema. Commented el 13 jun. 2019 a las 15:40
  • Hola @OscarGarcia tengo el mismo problema de nuevo pero con algunos navegadores que me dan aviso de peligro por el SSL, pero releyendo lo que pones no se muy bien como hacerlo
    – Miguel
    Commented el 23 oct. 2019 a las 14:55
  • Hola @Miguel. ¿Es tu propio servidor en un PC tuyo, VPS o similar o, en cambio, has contratado alojamiento compartido con otra empresa? ¿Tienes un certificado contratado, gratuito o autogenerado? Commented el 23 oct. 2019 a las 17:08
  • Hola Oscar tengo con Ionos un servidor propio. Y ellos me dan los certificados, como con los otros que hicimos. Pero aqui el problema me viene cuando pongo las dominio.es me dice que pertenece a otro de mis dominios
    – Miguel
    Commented el 23 oct. 2019 a las 17:19
2

Probablemente tengas tu código bien, pero tienes un problema con el certificado digital, concretamente con la cadena de certificado, y está relacionado con que el certificado sea de tipo wildcard (*.depildiodo.com). A mí me ocurrió algo parecido. Si entras en la siguiente URL puedes comprobar el error:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fdepildiodo.com%2Fver-noticia.php%3FID%3D1

Depurador de contenido compartido - Facebook para desarrolladores

Puedes comprobar los problemas con el certificado en múltiples sitios:

SSL Labs SSLShopper

Chain issues - Incomplete

2
  • 1
    Muchas gracias @Pavel y bienvenido a la comunidad. No deberías redactar una respuesta si no soluciona el problema planteado. En su lugar deberías haber escrito un comentario, aunque aún no tienes reputación suficiente para hacerlo deberías tener paciencia hasta entonces. Además, si hubieras entrado en la sala de chat hubieras averiguado que llegamos a esa conclusión y hemos dedicado bastante tiempo y esfuerzo en arreglarlo. Commented el 13 jun. 2019 a las 8:28
  • No tenía ni idea que existían comentarios y respuestas. Tampoco el chat. Gracias por la aclaración.
    – Pavel
    Commented el 13 jun. 2019 a las 8:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.