Cómo agregar un botón de like a tus posts !!!!! ദ്ദി ˉ͈̀꒳ˉ͈́ )✧

 

Bueno, como MUCHOS se habrán preguntado (1 persona) cómo hice lo de los likes, don't worry, I got u girl 

En este post van a encontrar cómo poner su propio botón de like para su blog, que funcione de manera independiente para cada post. 

Empezamos yendo a likebtn.com

Les va a aparecer una interfaz con estos dos botones:

Nosotros vamos a darle en Get Code, y nos va a llevar para abajo.

Ahí les van a aparecer todas las opciones para customizar sus botones de like y dislike (intenten no tocar nada que sea vip o pro)

En Custon Theme pueden quitar el ícono del Like y ponerle un gif o una imagen que prefieran, y que pueda cambiar una vez ya le hayan dado like. Yo puse gifs de pixels, que en un próximo blog les voy a dar páginas con esos recursos. También le pueden cambiar la fuente del texto y lo que vaya a decir, más adelante.

Ahora, una opción importante es la siguiente:

En esa opción, por predeterminado va a estar seleccionado "Custom name", que no nos sirve en este caso, ya que queremos que el botón se adapte al blog. 

Entonces, vamos a darle en "Use URL" y lo dejamos así.

Si siguen yendo para abajo pueden explorar las diferentes opciones para su botón, si quieren que haya solo uno, o que se muestren los números, etc, etc. Es cuestión de probar y dejarlo como más gusten.

Una vez terminado, van a ir a la parte del código y lo van a copiar

Cuando ya tengan su código, antes de ponerlo en el blog, hay que hacerle unos arreglos.

Cuando yo lo estaba intentando ayer, le mandé mi código a Gemini para verificar que estaba correcto, me agregó una línea de código que es necesaria para que los links sean individuales por post. Les voy a poner un ejemplo:

<!-- LikeBtn.com BEGIN -->

<span class="likebtn-wrapper"

 data-theme="custom"

 data-icon_l_url="https://files.catbox.moe/rry5wm.gif" 

data-icon_l_url_v="https://files.catbox.moe/2vidun.gif" 

data-icon_d_url="ejemplo.gif" 

data-icon_d_url_v="ejemplo2.gif" 

data-f_family="Brush Script MT" 

data-label_fs="ri" 

data-counter_fs="ri" 

data-ef_voting="push" 

data-show_dislike_label="true" 

data-voting_both="true" 

data-i18n_dislike="ejemplo" 

data-i18n_dislike_tooltip="ejemplo" 

data-i18n_undislike_tooltip="ejemplo"></span>

<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>

<!-- LikeBtn.com END -->

Entre las dos líneas rojas, van a poner enter y esta otra línea:

expr:data-identifier='data:post.id'

Que les quede algo así:

<!-- LikeBtn.com BEGIN -->

<span class="likebtn-wrapper"

 data-theme="custom"

expr:data-identifier='data:post.id'

 data-icon_l_url="https://files.catbox.moe/rry5wm.gif" 

data-icon_l_url_v="https://files.catbox.moe/2vidun.gif" 

data-icon_d_url="ejemplo.gif" 

data-icon_d_url_v="ejemplo2.gif" 

data-f_family="Brush Script MT" 

data-label_fs="ri" 

data-counter_fs="ri" 

data-ef_voting="push" 

data-show_dislike_label="true" 

data-voting_both="true" 

data-i18n_dislike="ejemplo" 

data-i18n_dislike_tooltip="ejemplo" 

data-i18n_undislike_tooltip="ejemplo"></span>

<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>

<!-- LikeBtn.com END -->

Así, el código ya va a estar listo para pegar.

Aviso !!! Si reemplazas los textos de like o dislike, asegúrate de no poner, por ejemplo, un corazón (<3) porque te va a saltar error debido al uso de < (me pasó)

Ahora, dónde debo pegar mi código listo?

Vamos a la página de blogger y vamos a Temas. Donde nos aparece "Personalizar", al lado hay una flechita apuntando hacia abajo. Hacemos click y vamos a Editar HTML

En la página de código, vamos a hacer click en cualquier parte del texto y vamos a presionar la combinación Ctrl + F  para abrir la barra de búsqueda, donde van a pegar este código:

<data:post.body/>

Le dan enter y, donde aparezca, hacen click y le dan enter para incorporar una nueva fila de código, pegando su código terminado de like (recomiendo que lo pongan en el block de notas) Les queda más o menos así:

(por las dudas yo le borré donde decía <!-- LikeBtn.com BEGIN --> y END)

Denle guardar y vean si no les da algún error. Pero no termina ahí; el código de <data:post.body/> puede aparecer más de una vez (en mi caso, 2 veces) por lo que deberán buscar el otro y pegar el código del botón de like una vez más (buscando otra vez <data:post.body/> y apretando la flechita de abajo).

Cuando se aseguren de que no hay más, denle a guardar y observen sus cambios.

Gracias por leer y espero que les haya sido de ayuda este post 
Si tienen alguna pregunta no duden en consultarme, y no se olviden de darle al like jiji

De qué más quieren que hable?