Home / Questions / 271733
Accepted
Miguel
Asked: 2020-06-13 22:07:31 +0800 CST 2020-06-13 22:07:31 +0800 CST

Problems sharing on social networks using open graph

  • 772

I've created a blog from scratch and now I'm making them share the news on both Facebook and Twitter.

It is something that I did some time ago in a project and it worked for me , but in this new page that I have set up (on a new server) it does not load neither the image nor the text of the news in what it shares.

I understand that with this code I load the image and the text that the news carries:

<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; ?>" />

I have this script for the share buttons to do their job:

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

  });

This is the Facebook button:

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

2 Answers

  1. Best Answer

    Correcting open graph fields

    After correcting and adding the four required open graph fields ( og:title, og:type, og:imageand og:url) I requested during the chat conversation to check the Facebook web debug data at the following URL:

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

    We noticed that the page showed us, somewhat hidden, a cURL error message that prevented the required fields from being obtained. We were able to reproduce the error as follows:

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

    Problem with HTTPS certificate

    The main problem for which neither Facebook nor Twitter collected the information correctly was due to an error in the certification chain of the web server certificate.

    Using opensslit we saw that the server delivered only one certificate:

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

    So everything pointed to the lack of an intermediate certifying entity ( Encryption Everywhere DV TLS CA - G1) to add to the certificate delivered by the web server.

    From the official website of the certifying entity we download the certificate of the intermediate entity and convert it to PEM as follows:

    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

    Then we generate the certificate including the intermediate certifying entity in the chain after the issued certificate:

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

    When concatenating we realized that there was no separation between the end of one block and the beginning of the next:

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

    So we had to split it with the following statement:

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

    Being now correctly separated:

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

    We change the certificate that loads the web server (an nginx) as follows:

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

    After restarting the nginx server everything should work fine and both Facebook and Twitter should get the information from the open graph without problems.

    • 5

  2. You probably have your code correct, but you have a problem with the digital certificate, specifically with the certificate chain, and it is related to the fact that the certificate is of type wildcard (*.depildiodo.com). Something similar happened to me. If you enter the following URL you can check the error:

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

    Shared Content Debugger - Facebook for Developers

    You can check for certificate issues on multiple sites:

    SSL Labs SSLShopper

    Chain issues - Incomplete

    • 2