• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Ayuda Implementacion de Card de Twitter

#1
Necesito ayuda para poder visualizar la imagen de un Post cuando lo comparto por Twitter. Por el momento solo encontré dos sentencias en llaves que invoca el Logo de mi Pagina y la Miniatura del Avatar del quien creo el Post. Pero deseo que se visualice una imagen que halla compartido en el Blog.

Se Visualiza el Avatar del Creador del Post:

{xen:helper avatar, $image, m, 0, 1}


Se visualiza el Logo de la Pagina:

[/CENTER] {xen:helper fullurl, {xen:property ogLogoPath}, 1}



Codigo donde se implementa:

HTML:
<xen:if is="{$avatar}">
    <meta name="twitter:image" content="{xen:raw $image}" /><xen:else />
    <meta name="twitter:image" content="{xen:helper avatar, $image, m, 0, 1}" /></xen:if>

Solo busco el codigo que sentencia una imagen que se halla subido al Post. Pero no encuentro información al respecto. No sirve dejar el Card de Twitter porque no toma ninguna imagen como lo hace en el Open Graph de Facebook.

Una ayudita.​
 

lms

Administrador
#3
Necesito ayuda para poder visualizar la imagen de un Post cuando lo comparto por Twitter. Por el momento solo encontré dos sentencias en llaves que invoca el Logo de mi Pagina y la Miniatura del Avatar del quien creo el Post. Pero deseo que se visualice una imagen que halla compartido en el Blog.

Se Visualiza el Avatar del Creador del Post:

{xen:helper avatar, $image, m, 0, 1}


Se visualiza el Logo de la Pagina:

{xen:helper fullurl, {xen:property ogLogoPath}, 1}

Codigo donde se implementa:

Rich (BB code):
<xen:if is="{$avatar}">
    <meta name="twitter:image" content="{xen:raw $image}" /><xen:else />
    <meta name="twitter:image" content="{xen:helper avatar, $image, m, 0, 1}" /></xen:if>

Solo busco el codigo que sentencia una imagen que se halla subido al Post. Pero no encuentro información al respecto. No sirve dejar el Card de Twitter porque no toma ninguna imagen como lo hace en el Open Graph de Facebook.

Una ayudita.
La imagen está en lo que te he puesto en negrita en tu mensaje. La parte {xen:helper fullurl, {xen:property ogLogoPath}, 1} es de donde obtiene la variable $image que se entrega de forma bruta (sin análisis). Deberá ser una url completa, al estilo de https://xenfacil.com/nombre-de-la-imagen.png y sustituir a {xen:raw $image}. Para que sea una imagen recién subida a ese mensaje, habría que hacerlo desde el código (que es desde donde se envía la variable $image y es bastante más complicado que una simple modificación.

Salud2
 
#4
La imagen está en lo que te he puesto en negrita en tu mensaje. La parte {xen:helper fullurl, {xen:property ogLogoPath}, 1} es de donde obtiene la variable $image que se entrega de forma bruta (sin análisis). Deberá ser una url completa, al estilo de https://xenfacil.com/nombre-de-la-imagen.png y sustituir a {xen:raw $image}. Para que sea una imagen recién subida a ese mensaje, habría que hacerlo desde el código (que es desde donde se envía la variable $image y es bastante más complicado que una simple modificación.

Salud2
La única opción es instalar un complemento
por ejemplo este [Endless Horizon] Advanced Open Graph

Saludos
Hola. Gracias por compartir su opinion. Efectivamente la informacion es muy poca y habria que usar ese complemento. Pero lo que menciona @lms es completamente acertado, hay que estudiar un poco como llamar ciertas funciones de Xenforo, al menos cosas basicas que se iran estudiando con el tiempo. Logre encontrar una solucion en la pagina de donde colaboran a programadores iniciados a mejorar sus productos, con unos simples pasos.

Paso 1: cambiar la plantilla Thread_view

Encuentra el siguiente código y agrégalo encima:

PHP:
<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
Agregue el siguiente código:

Insertar CODE, HTML o PHP:
<xen:if is="{$firstPost.attachments}">

    <xen:foreach loop="$firstPost.attachments" value="$attachment" i="$i" count="$count">
        <xen:if is="{$i} == 1 AND {$attachment.thumbnailUrl}">
            <xen:set var="$ogThumb">{xen:link full:attachments, $attachment}</xen:set>
        </xen:if>
    </xen:foreach>
    </xen:if>


Cambiar lo siguiente:

PHP:
<xen:set var="$avatar">{xen:helper fullurl, @ogLogoPath, 1}</xen:set>
Si no lo encuentra, busquenlo asi:

PHP:
        <xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
Remplazandolo en este código:

PHP:
<xen:set var="$avatar"><xen:if is="{$ogThumb}">{$ogThumb}<xen:else />{xen:helper fullurl, @ogLogoPath, 1}</xen:if></xen:set>

Paso 2: Cambie la plantilla open_graph_meta

Cambie todo a lo siguiente:

PHP:
   <meta property="og:site_name" content="{$xenOptions.boardTitle}" />
    <xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if>
    <xen:if is="!{$avatar}"><meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:if>
    <meta property="og:type" content="{xen:if $ogType, $ogType, article}" />
    <meta property="og:url" content="{xen:raw $url}" />
    <meta property="og:title" content="{xen:raw $title}" />
    <xen:if is="{$description}"><meta property="og:description" content="{xen:raw $description}" /></xen:if>
    <xen:if is="!{$description}"><meta property="og:description" content="{$xenOptions.boardDescription}" /></xen:if>
    {xen:raw $ogExtraHtml}
    <xen:if is="{$xenOptions.facebookAppId}"><meta property="fb:app_id" content="{$xenOptions.facebookAppId}" /></xen:if>
    <xen:if is="{$xenOptions.facebookAdmins}"><meta property="fb:admins" content="{xen:helper implode, {$xenOptions.facebookAdmins}, ','}" /></xen:if>

En caso de tener [bd] Social Share:

Cambie la plantilla bdsocialshare_open_graph_meta de la siguiente manera:

PHP:
<xen:if is="{xen:helper bdSocialShare_getOption, twitterCard}">
    <meta property="twitter:card" content="summary" />
    <meta property="twitter:title" content="{xen:raw $title}" />
    <xen:if is="{$description}"><meta property="twitter:description" content="{xen:raw $description}" /></xen:if>
    <xen:if is="!{$description}"><meta property="twitter:description" content="{$xenOptions.boardDescription}" /></xen:if>
    <xen:if is="{$bdSocialShare_imageSrc}">
        <meta property="twitter:image" content="{$ogThumb}" />
    <xen:else />
        <xen:if is="{$avatar}"><meta property="twitter:image" content="{$avatar}" /></xen:if>
        <xen:if is="!{$avatar}"><meta property="twitter:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:if>
    </xen:if>
    <meta property="twitter:url" content="{xen:raw $url}" />
</xen:if>

<xen:edithint template="open_graph_meta" />

Eso es todo. Si desea probarlo aquí:

Herramienta de rastreo de Facebook y Borrar Caché




Previsualizar Tarjetas de Twitter

Efectivamente me ha quedado justo como queria.
 
#5
Se ve de lujo. Sin errores. :) open.PNG card.PNG

Sino encuentra imagenes en el contenido, usa la imagen de Perfil del Usuario que Posteo, y en el caso de que tampoco contenga, usara el Logo.


Ahora solo me queda estudiar como implementar Vistas previas a mensajerias instantaneas como Telegram y Whatsapp. Pero es algo mas avanzado (SDK).

Espero les funcione tanto como a mi. Un abrazo.
 

Breixo

XenForoUser
#6
Se ve de lujo. Sin errores. :) Ver el archivo adjunto 4481 Ver el archivo adjunto 4482

Sino encuentra imagenes en el contenido, usa la imagen de Perfil del Usuario que Posteo, y en el caso de que tampoco contenga, usara el Logo.


Ahora solo me queda estudiar como implementar Vistas previas a mensajerias instantaneas como Telegram y Whatsapp. Pero es algo mas avanzado (SDK).

Espero les funcione tanto como a mi. Un abrazo.
Buenas! Lo has conseguido para XF2?
XF 2.0 - Set pictures from the post as thumbnail for Facebook and Twitter
 
Arriba