Cómo agregar un botón Me gusta a su Facebook Pestañas

<img class = "alignright native-lazyload-js-fallback" style = "margin-left: 5px; margin-right: 5px;" title = "medios sociales como" alt = "medios sociales como” width=”190″ height=”166″ loading=”lazy” src=”https://www.socialmediaexaminer.com/images/how-to-pose.png”>¿Alguna vez te has preguntado qué tan seguro Facebook paginas agregar botones Me gusta a sus pestañas personalizadas? No busque más.

Muchos me han preguntado cómo los sitios como Threadless pueden agregar múltiples botones Me gusta y comentarios a su página de Fans, lo que permite a los visitantes comprar, hacer Me gusta y comentar cualquier camiseta en su pestaña Tienda.

Bueno, resulta que en realidad es bastante fácil, usando el fb: comenta la etiqueta FBML.

Utilizando fb: comentarios, usted puede agregue un botón Me gusta y cuadros de comentarios en varios lugares en su Facebook pestañas y, cada uno puede ir acompañado de una sección de comentarios del usuario. Esto proporciona más vías para que los fanáticos interactúen y compartan su contenido.

The Threadless Fan Page – ¿Cómo hacen eso?

los Fan Page sin hilos La pestaña "Comprar" muestra una selección de seis camisetas de su catálogo, y los visitantes pueden ordenar, hacer Me gusta y / o comentar sobre cada una.

threadless "width =" 480 "height =" 348 "loading =" lazy "class =" native-lazyload-js-fallback "src =" https://www.socialmediaexaminer.com/images/1110tw-threadless.jpg ">
Cada producto Threadless tiene "Agregar al carrito", un botón Me gusta y Comentarios.</figure>
<p>La columna izquierda en la ilustración anterior es una imagen del producto y una opción de selección desplegable. Una vez que un usuario realiza una selección y hace clic en "Agregar al carrito", se lo redirige al sitio web Threadless.com para completar la compra.</p>
<p>El contenido de la columna derecha se crea utilizando el <strong>fb: comentarios</strong> Etiqueta FBML:</p>
<p><strong><fb:comments xid=”UNIQUE-IDENTIFIER” canpost=”true” candelete=”false” reverse=”true” returnurl=”http://www.threadless.com/product/1295/And_How_Are_You_Feeling_Today”><br />
<fb:title></fb:title><br />
</fb:comments></strong></p><div class='code-block code-block-3' style='margin: 8px auto; text-align: center; display: block; clear: both;'>
<div data-ad=

Los parámetros y valores utilizados para fb: comentarios

  • xid: Este es el identificador único para esta instancia de la fb: comentarios etiqueta. Debe incluir un valor, y sugiero usar algo breve y descriptivo. Está limitado a caracteres alfanuméricos, guiones, signos de porcentaje, puntos y guiones bajos. El usuario no verá este contenido; es solo para crear un valor al que puedan acceder los desarrolladores con fines de programación.
    Algunos ejemplos son:
    xid = ”Producto-205 ″
    xid = ”Producto-Zapatos-azules
    xid = "Tan_50%"

  • canpost: Lo más probable es que desee "verdadero" para este valor, lo que indica que el usuario puede publicar un comentario.
  • candelete: Querrá "falso" para esto, lo que significa que un usuario no puede eliminar ninguno de los comentarios.
  • contrarrestar: Al establecer esto en "verdadero", se coloca el cuadro "Agregar un comentario" debajo de los comentarios publicados, como se hace en la página Sin hilos.
  • returnurl: Este es el valor más importante! Esta es la URL que le gusta al usuario cuando hace clic en el botón Me gusta. Si el usuario marca la casilla "Publicar comentario en mi Facebook Perfil ", el comentario aparecerá en su muro como" Me gusta (usuario) (Etiqueta de título del sitio web) en (URL) ". Puede tener cualquier URL válida para el "retorno"Parámetro. Threadless tiene la página del producto en su sitio web como "retorno"Valor.

Uso de CSS para ocultar elementos no deseados en la etiqueta fb: comments

Puedes eliminar eso "Facebook plugin social "texto y logotipo con CSS.

Puede ocultar fácilmente este elemento para que no se muestre. Utilizando el Complemento de Firefox "Firebug" (¡algo imprescindible para los programadores!), determiné que el pequeño Facebook logotipo y "Facebook el texto del complemento social "está contenido en un DIV asignado a la clase"subtitle_left", Y este DIV puede ocultarse, en todos los navegadores, con CSS.

Para ocultar este contenido, simplemente agrega:

.subtitle_left {display: none;}

a su hoja de estilo, que oculta el DIV:

¡Presto! El DIV que contiene el logotipo y el texto están ocultos con la pantalla: ninguno.

¿Solo quieres el botón Me gusta? Use CSS para ocultar el cuadro de comentarios

Si desea el botón Me gusta y no el cuadro de comentarios, puede utilizar el "pantalla: ninguno"Propiedad CSS para ocultar el cuadro de comentarios no deseados.

Debido a que todas las características de comentarios están contenidas en un DIV asignado a la clase "comentario_cuerpo"(¡Gracias de nuevo, Firebug!), Solo agrega la siguiente regla CSS a tu hoja de estilo:

.comment_body {display: none;}

El resultado:

Agregar múltiples instancias del botón Me gusta

Puede tener tantas instancias de fb: comentarios Etiqueta FBML en su pestaña personalizada como desee. Solo asegúrese de que cada uno tenga un valor único "xid".

Dar a los usuarios más opciones que simplemente Me gusta su página y / o compartirla significa más participación del usuario y más menciones de su marca que aparece en los muros de los usuarios.

Pruébalo y cuéntanos cómo funciona. Deje sus preguntas y comentarios en el cuadro a continuación.