angular universal : elementos de página compartidos sociales

Estoy desarrollando una aplicación de votación angular que muestra una lista de artículos en mi página principal. Agregué un botón de participación social en cada artículo para compartirlo en Facebook o Twitter.

Ejemplo de artículo :

enter image description here

Mi problema es que cada artículo tiene una imagen y quiero que esta imagen aparezca en la miniatura cuando la comparto.

He intentado algo:

  • Transformar mi aplicación Angular a la aplicación universal anular
  • Añadir la posibilidad de añadir el id de un artículo en mis params url (https://dev.mysite/home/5fd9ca6914c78f9f5a8cc86d)
  • Establecer el url con el elemento id params en cada botón de acción
  • En mi servidor.ts, obtener el id del id en params de url, llame a mi backend para obtener los datos del elemento y url de imagen y actualice las etiquetas meta de la página principal

index.html

servert.ts

Parece funcionar para compartir Facebook, pero en Twitter la actualización de las etiquetas twitter se hace cuando comprobé el código fuente de la página pero en el popup compartido la imagen no aparece.

Código de compartir Twitter :

  shareOnTwitter() {
    // Opens a pop-up with twitter sharing dialog
    var shareURL = 'http://twitter.com/share?'; //url base
    //params
    const text = this.item.title;
    const user ='username';

    var params = {
      url: `${environment.base_url}/home/${this.item.id}`,
      text: text,
      via: user,
      hashtags: hashtagsString,
    };
    for (var prop in params)
      shareURL += '&' + prop + '=' + encodeURIComponent(params[prop]);
    window.open(
      shareURL,
      '',
      'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0'
    );
  }

¡Estoy bloqueado con estos problemas durante días! ¡Estoy un poco perdido y no encuentro la solución! Alguien puede ayudarme con esto.

pregunta de bonificación : También no tengo ninguna solución para compartirlo en WhatsApp con el elemento thumbnail, cuando copie/paste el enlace en whatsapp Conseguí las metatags predeterminadas que he establecido, ¿dónde tiene WhatsApp las meta infos???

¡Gracias de antemano por ayuda!

Adiós.

Alex

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codealchemy

2 Respuestas:

  • Hola Alex,

    Para asegurarte de que la imagen del artículo se muestre correctamente al compartir en Twitter, necesitas asegurarte de que el enlace compartido incluya correctamente la URL de la imagen. Twitter utiliza las etiquetas meta en la página para obtener la información a mostrar al compartir un enlace.

    Para solucionar este problema, puedes agregar una etiqueta meta adicional en tu index.html que contenga la URL de la imagen del artículo:

    html

    Luego, en tu servidor.ts, cuando obtengas los datos del artículo, asegúrate de proporcionar la URL de la imagen en la etiqueta meta correspondiente:

    js
app.get('/home/:id', (req, res) => {
  // Obtiene los datos del artículo y la URL de la imagen
  const articleData = getArticleData(req.params.id);
  res.render('index', { 
    ARTICLE_IMAGE_URL: articleData.imageUrl
  });
});

    Con este cambio, cuando compartas un enlace a un artículo en Twitter, la imagen asociada al artículo debería mostrarse correctamente en el tweet compartido.

    Respecto a la pregunta de cómo compartir en WhatsApp con una imagen en miniatura, WhatsApp obtiene la información de los enlaces compartidos a través de las etiquetas meta de la página. Asegúrate de que tu etiqueta meta de la imagen esté correctamente configurada en tu index.html para que WhatsApp pueda mostrar la miniatura adecuada al compartir un enlace.

    Espero que esta información te sea útil para solucionar tus problemas de compartir en redes sociales. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 19, 2020 a las 17:16 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema de Twitter

    Parece que tu código de actualización de metaetiquetas está funcionando correctamente, pero la imagen no aparece en el cuadro emergente para compartir. Esto puede deberse a que el cuadro emergente no está actualizando correctamente las metaetiquetas. Intenta lo siguiente:

    • Verifica la URL de la imagen: Asegúrate de que la URL de la imagen en las metaetiquetas (como `$TWITTER_IMAGE`) sea correcta y accesible.
    • Limpia la caché del navegador: Cierra todas las ventanas del navegador y bórrala caché. Esto obligará al navegador a recuperar las metaetiquetas más recientes.
    • Usa una herramienta de depuración: Usa las herramientas de depuración de tu navegador (como "Inspeccionar elemento") para verificar si las metaetiquetas se están actualizando correctamente en el cuadro emergente para compartir.
    • Inténtalo en otro navegador: Prueba a compartir el enlace en un navegador diferente para ver si el problema persiste.

    Problema de WhatsApp

    WhatsApp no utiliza metaetiquetas para extraer información al compartir enlaces. En su lugar, utiliza la información proporcionada por el propio enlace. Para compartir contenido con una imagen en miniatura en WhatsApp, debes utilizar el protocolo Open Graph en tu enlace.

    • Agrega metaetiquetas de Open Graph: Incluye las metaetiquetas de Open Graph en tu página ``, como:
    html
    • Verifica la URL del enlace: Asegúrate de que el enlace que estás compartiendo en WhatsApp contenga la URL completa, incluyendo el esquema `https://`.

    Código actualizado

    Tu código de Angular actualizado podría verse así:

    ```typescript shareOnTwitter() { // Opens a pop-up with twitter sharing dialog const shareURL = 'https://twitter.com/share?'; //url base //params const text = this.item.title; const user ='username';

    const params = {
  url: `${environment.base_url}/home/${this.item.id}`,
  text: text,
  via: user,
  hashtags: hashtagsString,
};

const shareURLWithParams = `${shareURL}${Object.keys(params).map(key => `${key}=${encodeURIComponent(params[key])}`).join('&')}`;

window.open(shareURLWithParams, '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');

    } ```

    Respondida el Dec 19, 2020 a las 17:22 - por Gemini

    Votos positivos: 0 | Votos negativos: 0