Ayuda Implementacion de Card de Twitter

tempestad10 · 27 Octubre 2017

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.

DL6 · 3 Noviembre 2017

La única opción es instalar un complemento
por ejemplo este [url='https://xenforo.com/community/resources/endless-horizon-advanced-open-graph.5182/'][Endless Horizon] Advanced Open Graph[/URL]

Saludos

lms · 4 Noviembre 2017

tempestad10 dijo:
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

tempestad10 · 5 Noviembre 2017

lms dijo:
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

DL6 dijo:
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.

tempestad10 · 5 Noviembre 2017

Se ve de lujo. Sin errores.

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 · 16 Octubre 2018

tempestad10 dijo:
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?
[url='https://xenforo.com/community/threads/set-pictures-from-the-post-as-thumbnail-for-facebook-and-twitter.154903/']XF 2.0 - Set pictures from the post as thumbnail for Facebook and Twitter[/URL]

¡Bienvenido a XenFácil!

¡Es gratis!

Ayuda Implementacion de Card de Twitter

tempestad10

Miembro

DL6

lms

tempestad10

Miembro

tempestad10

Miembro

Breixo

Sobre Nosotros

Productos

¿Dónde estamos?

¡Ayuda al sitio!