Cómo agregar un botón de Facebook a la página web

Cómo agregar un botón de Facebook a la página web

Añadir un botón similar a Facebook en el sitio web es una tarea fácil, sin embargo, es posible que tenga que tener en cuenta otros pocos problemas relacionados con el rendimiento que pueden ocurrir al añadirlo a su sitio web. Cuando añadimos dicho botón en nuestro sitio, el tiempo de carga de la página web disminuye un poco. Aquí veremos cómo ajustar el script (script asíncrono) de manera que no afecte a la carga de la página web.

Todos los siguientes scripts y códigos están tomados de la página de desarrolladores de Facebook, los acabo de mencionar de manera que puedas incrustarlos fácilmente en tu plantilla de temas.

Agregar un botón como el de Facebook a la página web

Botón de Facebook Código de 6 tipos:

Nota: Para hacer que un botón similar a Facebook se renderice en una página web. Necesitas añadir dos elementos a la plantilla del tema – código del botón parecido a Facebook (elige cualquiera de los 6 proporcionados abajo según la necesidad) y JavaScript (proporciona después el código de los tipos de botón).

Todos los fragmentos de abajo tienen un campo href como que toma el url de la página actual, esto es útil cuando quieres tener un botón similar en todos los mensajes o páginas. puedes simplemente añadir cualquiera de los siguientes códigos de botón en tu plantilla del tema como single.php etc. y el código por sí mismo obtendrá el url de la página o mensaje actual.

Sin embargo, si quieres tener un botón similar para una url específica (como la página de marca de Facebook del sitio web) entonces puedes especificar la url exacta en el atributo href en lugar de

1) Diseño estándar con botón de envío

Como ya se ha mencionado, el data-href =«» se está utilizando en todos los fragmentos de código siguientes, con el propósito de recoger la actual url de post/página. Si quieres un botón similar para una página en particular como http://example.com/fb-page entonces el data-href necesita ser actualizado de la siguiente manera-

data-href="http://example.com/fb-page"

como el código de facebook

<div data-href="<?php the_permalink() ?>"data-width="450" data-show-faces="false" data-send="true"></div>

2) Diseño estándar sin botón de envío

código del botón de facebook sin enviar

<div data-href="<?php the_permalink() ?>"data-width="450" data-show-faces="false" data-send="false"></div>

3) disposición button_count con enviar

como el botón de contar

<div data-href="<?php the_permalink() ?>"data-width="450" data-layout="button_count" data-show-faces="false" data-send="true"></div>

4) diseño button_count excluyendo el envío – Este es el más común como botón que se está usando en nuestro sitio web también. ¡Recomendado!

estándar fb como botón

<div data-href="<?php the_permalink() ?>"data-width="450" data-layout="button_count" data-show-faces="false" data-send="false"></div>

5) box_count + enviar

<div data-href="<?php the_permalink() ?>"data-width="450" data-layout="box_count" data-show-faces="false" data-send="true"></div>

6) box_count como un botón solo

Como una caja con contador.

<div data-href="<?php the_permalink() ?>"data-layout="box_count" data-show-faces="false" data-send="false"></div>

JavaScript

Nota importante: Por favor recuerda reemplazar el appid =xxxxxxxxxxxxx en los siguientes scripts, con tu ID de aplicación, de lo contrario el script no funcionará, si no tienes un ID de APP entonces puedes referirte a esta guía para obtener uno para ti.

Guión síncrono: Este no es el script preferido ya que hace que tu sitio web cargue lentamente. Los scripts asíncronos aseguran que la carga del script no interfiera en la carga de la página web.

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_US/all.js#xfbml=1&appId=xxxxxxxxxxxxxx"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk');</script>

Script asíncrono: El recomendado para una mejor permanencia de una página web.

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; si (d.getElementById(id)) retorna; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/es_US/all.js#xfbml=1&appId=xxxxxxxxxxxx"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk');</script>

La única diferencia entre los dos guiones anteriores es que el segundo guión tiene una línea extra js.async=true que hace que se cargue de forma asíncrona.

Agrega el botón «Como en Facebook» en la página web

Ahora, tendrías el código para el botón y el guión. Es hora de añadirlos a las plantillas de tu sitio web. Toma el botón y el guión apropiados de arriba.

¿Dónde pegar el código?

Pegue el guión después de abrir la etiqueta y antes de cerrarla (). Mencione el código del botón en el lugar donde quiere que se muestre el botón similar. Inclúyelo en el archivo single.php para que sólo se muestre en los mensajes.

Si estás usando cualquier marco de trabajo como el de la tesis, Génesis, entonces debes saber dónde incluir el código, en caso de cualquier pregunta sólo tienes que dejar un comentario y nos pondremos en contacto contigo lo antes posible.

Deje que Facebook entienda su contenido agregando Meta Tags de gráficos abiertos

¿Has visto antes las metaetiquetas de abajo?

<meta property="og:locale" content="en_US"/><meta property="og:type" content="article"/><meta property="og:url" content="https://beginnersbook.com/2013/09/add-facebook-like-button-website/"/><meta property="og:site_name" content="Easy Steps 2 Build Website"/><meta property="article:author" content="" /><meta property="article:publisher" content="https://www.facebook.com/es2bw" /><meta property="og:title" content="Cómo añadir un botón similar a Facebook a la página web" /><meta property="og:description" content="Añadir un botón similar a Facebook a la página web es una tarea fácil, sin embargo puede que necesites tener un ojo en otros pocos problemas relacionados con el rendimiento que pueden ocurrir mientras un(...)" /><meta property="og:image" content="https://beginnersbook.com/wp-content/uploads/2013/09/fblike1-150x150.jpg" />

Las etiquetas anteriores no son más que meta etiquetas de gráficos abiertos de Facebook, que ayudan a Facebook a entender su contenido. Dado que toda la información requerida ha sido proporcionada a Facebook en forma de estas meta etiquetas, las acciones de Facebook likebuttony Facebook share son totalmente diferentes a las de una página web normal sin etiquetas de gráfico abierto. Básicamente mejora la experiencia de compartir y fblike.

¿Cómo agregarlas en la página web de su sitio web?

Además de agregar manualmente estas etiquetas en su sitio web, puede utilizar plugins, si su sitio se ejecuta en WordPress. Plugins como WordPress SEO de Yoast y SEOPressor v5 pueden añadir automáticamente metadatos de gráficos abiertos a todas sus páginas web. Cubriré este tema en detalle en algún otro post.

En los próximos posts, veremos cómo añadir otros botones para compartir en las redes sociales (Google plus, StumbleUpon, LinkedIn y Twitter) en su sitio web.

Háganos saber si tiene alguna dificultad al configurar el código anterior para añadir el botón de Facebook a su sitio web. También, háganos saber si encuentra algún error o problema con cualquiera de los códigos/scripts mencionados.

Deja una respuesta