Que tal, ahora les traigo algo que quizás habrán estado buscando quienes utilizan la plataforma de Blogger, implementar emojis en los comentarios.
Aunque también es cierto que algunos piensan que no son necesarios. Sin embargo, está la disposición para quienes deseen implementarlos, porque así desean y además no dependerán de algún código de un sitio externo.
☝ Cómo decía un buen amigo, “el blog es mío y lo presento como yo quiero”. Siendo también tu caso, la implementación de los emojis en los comentarios, podría no estar de más si deseas darle ese toque a los comentarios que dejen los visitantes de tu web.
Los emojis.
Los emojis son un tipo de imágenes o ideogramas que se utilizan en diversas plataformas de mensajería para comunicar ideas, emociones o situaciones cotidianas.
😊 😟 😄 😉 😋 😜 😇 😎 😱 🤡
👍 👎 👋 👏 🌟 💓 💩
Existen cientos de imágenes de emojis, pero para el caso que nos concierne en esta publicación he seleccionado algunos de los más utilizados y que puedes implementar en tu blog de Blogger.
Además, cabe recalcar que como alternativa para colocar los emojis que se hace en esta publicación, estos se disponen mediante la utilización de emoticones (combinaciones de signos o letras con el teclado), debido a que Blogger se torna un poco difícil a la hora de aceptar ciertos códigos al respecto.
Prácticamente, la caja de comentarios de Blogger, no permite la inserción de caracteres provenientes de una acción externa, como lo sería hacer un clic sobre un emoji. También, porque como medidas de seguridad se activa lo que se conoce como “sanitización de datos” que se hace antes de hacer los envíos mediante el uso del formulario de comentarios.
Por cierto, quizás también te interese:
Cómo y para qué pedir que compartan, comenten o se suscriban al sitio
Cómo incorporar los emojis en los comentarios de Blogger
He simplificado la incorporación de los emojis en solo tres sencillos pasos para que no tengas problemas, si lo haces correctamente. Estos pasos son:
- Configurar la ubicación de comentarios en modo Incorporados.
- Añadir el código “mágico” a la plantilla.
- Añadir el código para la ubicación de los emojis.
Paso 1 – Configurar la ubicación de comentarios en modo Incorporados.
Quizás ya lo sepas, pero Blogger tiene la disposición de cuatro modalidades de ubicación de comentarios, que son: Incorporados, Página completa, Ventana emergente y Oculto. Cada una de estas modalidades sigue una codificación interna diferente, por lo cual si se aplica algo a una de las modalidades no se tendrá los mismos resultados en las otras y si se quisiera hacerlo se haría más extenso el asunto.
La que usaremos es la ubicación de comentarios: Incorporados
Si ya tienes la configuración de comentarios en Incorporados, puedes saltarte este paso.
Si no tienes configurado el modo Incorporados:
- Ve a la barra de menú a la izquierda en tu blog de Blogger.
- Selecciona la opción Configuración.
- Busca a la derecha y dale clic a la opción Ubicación de comentarios.
- Selecciona Incorporados y dale clic en Guardar
Paso 2 – Añadir el código mágico a la plantilla.
Je, je, je. Este código es prácticamente el que se encarga de hacer la “magia” de convertir los caracteres emoticones en emojis que se presentarán en los comentarios después de que estos sean enviados. Es decir, si el usuario escribe :) , esto se convertirá en 😊, después de que haga clic en el botón de publicar (envío).
Abre la plantilla del tema de tu blog y saca respaldo por si tienes algún problema (aunque no lo creo, porque lo que harás es sumamente sencillo):
- Ve a la barra de menú a la izquierda en tu blog de Blogger.
- Selecciona la opción Tema.
- Busca a la derecha el botón que dice Personalizar y dale clic a la flechita.
- Al abrirse el menú, selecciona la opción Editar HTML.
- Al presentarse el código de la plantilla, dale clic en cualquier parte y pulsa las teclas CTRL F
- En el cuadrito de búsqueda que se presenta en la esquina superior izquierda, escribe </body> y pulsa Enter para localizar esta etiqueta.
Copia el siguiente código:
<!-- Script para presentar emojis en los comentarios -->
<script>
// Mapa de reemplazos de texto a emoji
const emojiMap = {
":)": "😊",
":(": "😟",
":d": "😄",
";)": "😉",
":p": "😋",
";p": "😜",
"b)": "😎",
":#": "😱",
":u": "🤡",
"8(": "😨",
"o:)": "😇",
":-)": "😀",
"::o": "😵",
":-(": "😭",
":3": "😙",
":*": "😘",
"yy)": "😍",
"x(": "😫",
"xp": "😝",
"xs": "😖",
"!!(": "😠",
"77)": "😈",
"-y": "👍",
"-n": "👎",
"-h": "👋",
"-j": "👏",
"-p": "💪",
"+h": "💓",
"-s": "🌟",
"-c": "💯",
"-a": "🥇",
"-k": "💩"
};
// Función para convertir texto a emojis
function convertTextToEmoji(text) {
// Convertimos todo el texto a minúsculas antes de buscar los emojis
return text.replace(/:\)|:\(|:D|;\)|:P|;P|B\)|:#|:U|8\(|O:\)|:-\)|::O|:-\(|:3|:\*|YY\)|X\(|XP|XS|!!\(|77\)|-Y|-N|-H|-J|-P|\+H|-S|-C|-A|-K/gi, function(matched) {
// Convertimos el "matched" a minúsculas para buscar en el mapa
return emojiMap[matched.toLowerCase()];
});
}
// Función para convertir emojis en los comentarios publicados
function convertPublishedComments() {
// Seleccionamos todos los comentarios publicados
const comments = document.querySelectorAll('.comment-content'); // Ajusta el selector según la estructura HTML de Blogger
comments.forEach(function(comment) {
// Convertimos los caracteres en emojis en cada comentario
comment.innerHTML = convertTextToEmoji(comment.innerHTML);
});
}
// Ejecutar la conversión cuando la página se carga completamente
window.onload = function() {
convertPublishedComments();
};
</script>
<!-- FIN Script para presentar emojis en los comentarios -->
Pega el código que copiaste, justo antes de la etiqueta </body> que localizaste en la plantilla.
Dale clic a guardar (botoncito disquete en la esquina superior derecha).
Después de guardar, sale del Editor HTML de la plantilla, para evitar cualquier cambio inconsciente.
Paso 3 – Añadir el código para la ubicación de los emojis.
El siguiente código presentará la barra de emojis debajo de la caja de comentarios. En ella se presenta la referencia de las combinaciones a usarse para insertar los emojis.
Repito, se presentará para que el usuario vea la combinación de caracteres que puede hacer para que se presente el emoji seleccionado.
Copia el siguiente código:
<!-- Código para presentar el Botón de Emojis -->
<button id="BotEmoji" style="background:lightgray; font-size:20px; padding:4px; margin:4px; border:none; border-radius:4px;" onclick="toggleContent()">😜🔼</button>
<script>
function toggleContent() {
var content = document.getElementById('divEmoji');
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
}
</script>
<!-- Código para posicionar la barra de emojis debajo de la caja de comentarios -->
<div id="divEmoji" class="BarraEmojis" >
<pre>:)😊 :(😟 :D😄 ;)😉 :P😋 ;P😜 B)😎 :#😱 :U🤡 8(😨 O:)😇</pre>
<pre>:-)😀 ::O😵 :-(😭 :3😙 :*😘 YY)😍 X(😫 XP😝 XS😖 !!(😠 77)😈 </pre>
<pre> -Y👍 -N👎 -H👋 -J👏 -P💪 +H💓 -S🌟 -C💯 -A🥇 -K💩</pre>
</div>
<script>
var commentElement = document.querySelector(".comment-form");
var botEmojiElement = document.getElementById("BotEmoji");
var divEmojiElement = document.getElementById("divEmoji");
// Mueve el divEmoji después de comment y lo muestra
if (commentElement && divEmojiElement) {
commentElement.insertAdjacentElement("afterend", botEmojiElement); commentElement.insertAdjacentElement("afterend", divEmojiElement);
}
</script>
<!-- Estilo de la barra -->
<style>
.BarraEmojis {
background: #dfdfdf; /* color fondo de barra */
color: black; /* color de texto */
border-radius: 7px;
text-align: center;
padding: 4px;
display: none; /* No cambiar esto */
}
</style>
En modo diseño, inserta el código en un gadget.
- Ve a la barra de menú a la izquierda en tu blog de Blogger.
- Selecciona la opción Diseño.
- Busca a la derecha una de las opciones Agregar un Gadget. De preferencia de las que están por la parte de abajo en el pie (Footer)
- Al abrirse el menú, elige agregar un gadget HTML/JavaScript.
- Al abrirse la ventanita:
En Título no escribas nada.
En contenido, pega el código que acabas de copiar.- Dale clic en Guardar.
¡Listo! Eso es todo. Si has seguido estos tres sencillos pasos correctamente, ya podrás ver un botoncito que despliega la barra implementada para insertar emojis en los comentarios, semejante a como vemos en la siguiente imagen.
Si un usuario utiliza la combinación de caracteres correspondiente de algún emoji y decide enviar un comentario, se podrá apreciar la conversión al presentarse el comentario enviado.
😎 Je, je, je. Aunque también podría darse el caso de que sencillamente copie el emoji y lo pegue. Pero, al menos, está a la disposición, más a la mano del visitante.
Un par de detalles extras
Si solo deseas presentar la opción de Copiar y pegar los emojis, puedes eliminar el código que insertaste en la plantilla y dejar solo el que insertaste en el gadget.
Luego, en el gadget, podrías eliminar los caracteres de combinación y también dejar solamente el mensaje de “Copia y pega los emojis”.
Si deseas puedes modificar el estilo de la barra para que se presente según los colores de tu tema.
En el código insertado en el gadget, puedes modificar el color de fondo de la barra y del texto en el fragmento que define los estilos:
<style>
.BarraEmojis {
background: #dfdfdf; /* color fondo de barra */
color: black; /* color de texto */
border-radius: 7px;
text-align: center;
padding: 4px;
display: none; /* No cambiar esto */
}
</style>
Recuerda que para los colores puedes usar código hexadecimal o una referencia textual del color. Por ejemplo:
background: blue;
color: white;
background: transparent;
color: white;
Espero que esta publicación, sobre “Emojis en los comentarios de Blogger”, haya sido de tu agrado y cumpla con las expectativas de lo que buscabas.
¿Te gustó esta publicación? “Por favor, ayúdame a difundirla compartiéndola con tus amigos y seguidores.”
💬 Déjame tus comentarios, estaré complacido de responder.
⭐ También puedes dejar tu calificación a este post. (Te toma solo unos segundos)
📧 Y nunca olvides que también puedes suscribirte para que no te pierdas nada. (Es rápido y gratuito)
Quizás también te interese:
- Más sobre el autor
Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.
Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.
Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.
En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta también ver la vida en el proceso de las plantas y el respeto a los animales.
Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing. Aunque sobre varias temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.
Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo. Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión).
Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.
Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.
Comparte tu enlace
Es muy interesante y divertido. 😜
😀 Je, je, je. Así es Federico. En ocasiones queremos darle un poco de gracia a los comentarios, o al menos hacerlos más expresivos de otra manera. 😎
Gracias por comentar.
Saludos.
👍