El widget de EmbedSocial es un widget insertable independiente del framework: un <div> con un atributo data-ref, más un pequeño script de carga. Como eso es HTML plano, el mismo código encaja en cualquier proyecto de framework de JavaScript o TypeScript. Esta guía cubre React, Vue y Angular.
Inserta el widget en React
En este tutorial te explicaré paso a paso cómo insertar tu widget en una aplicación de React.
1. El primer paso es copiar el código del widget que has creado:
2.Una vez copiado el código, tendrás que separar el código HTML del JavaScript, por ejemplo:
Este es el código del widget de EmbedSocial:
<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>
<script> (function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); </script>
Código HTML:
<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>
Código JavaScript:
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));
3. Después ve a tu aplicación de React, crea un componente nuevo en tu directorio components y pega el código HTML dentro de la función render:
Pega el código JavaScript dentro del método de ciclo de vida componentDidMount:
4. Ve a la página donde quieres mostrar el widget, en nuestro caso lo añadiremos al App.js principal, e importa el componente que acabamos de crear:
5. ¡Listo! Cuando hagas esto y guardes los cambios, el widget aparecerá en tu página.
Si tienes alguna pregunta, haz clic en el icono de chat de la esquina inferior derecha para hablar con nuestro equipo de atención al cliente o escríbenos a support@embedsocial.com. Estamos aquí para ayudarte 🙏
Insertar en Vue
En las aplicaciones de Vue hay dos opciones para insertar código HTML/javascript personalizado:
- Composition API
- Options API
Primero tendrás que copiar el código de tu widget:
Una vez copiado el código, tendrás que separar el HTML del javascript, por ejemplo:
Código del widget de EmbedSocial:
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>
<script>
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));
</script>HTML
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>JavaScript
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));1. Insertar el widget con la Options API
Para insertar el código del widget de EmbedSocial en una aplicación de Vue que usa la Options API, sigue los pasos de abajo:
Primero, ve a tu aplicación de Vue y crea un componente nuevo en tu directorio components:
Pega el código HTML del widget de EmbedSocial dentro de las etiquetas <template>:
Pega el código javascript del widget de EmbedSocial dentro del hook de ciclo de vida created:
Ahora que has creado el componente del widget de EmbedSocial, solo tienes que importar el componente y mostrarlo en tu sitio web.
Abre el archivo o la página donde quieres mostrar el widget e importa el componente. En este caso lo importamos en App.vue:
Estos son los resultados de este código usando la Options API
2. Composition API
La Composition API es una incorporación al framework Vue creada para resolver las limitaciones de la Options API que se usaba en Vue2.
Para insertar el código de tu widget en una aplicación de Vue que usa la Composition API, tendrás que seguir los pasos de abajo:
Primero, ve a tu aplicación de Vue y crea un componente nuevo en tu directorio components:
Después, pega el código HTML del widget de EmbedSocial dentro de las etiquetas <template>:
Después tendrás que importar la función onMounted de Vue y pegar el código javascript del widget de EmbedSocial dentro de la función onMounted:
Siguiendo los pasos de arriba has creado el componente del widget de EmbedSocial. Ahora hay que importar el componente y mostrarlo en tu sitio web.
Abre el archivo o la página donde quieres mostrar tu widget e importa el componente. En este caso lo importamos en App.vue:
Cuando lo hayas hecho, tu widget se mostrará en tu sitio web.
¡Listo!
Si tienes alguna pregunta, haz clic en el icono de chat de la esquina inferior derecha para hablar con nuestro equipo de atención al cliente o escríbenos a support@embedsocial.com. Estamos aquí para ayudarte 🙏
Insertar en Angular
En las aplicaciones de Angular hay dos opciones para integrar código JavaScript personalizado.
Una opción es insertar el código directamente en el HTML, y la otra, que es la mejor solución, es crear un componente.
- # Insertar el código en cualquier parte de la página
Es la opción más conocida y la más sencilla. Solo tienes que acceder al html en cualquiera de tus archivos de Angular y pegar el código de EmbedSocial directamente.
Aquí tienes un ejemplo:
2. Crear un componente
Hay dos pasos que tienes que seguir para conseguirlo:
- Crear el componente
- Usar el componente
1. En el terminal, usa el siguiente comando `ng generate component EmbedSocialWidget` para crear un componente de angular llamado `EmbedSocialWidget`
2. Una vez creado el componente, abre `EmbedSocialWidget.component.ts` y añade una cadena `@Input() decorated` llamada `refId` justo encima del constructor.
3. En ese mismo archivo, dentro de la función `ngOnInit()`, añade el javascript de embedsocial, que es el que se encarga de construir el widget.
Tu archivo de componente `EmbedSocialWidget.component.ts` debería verse como en la imagen de abajo:
Usar el componente
Primero, inicia sesión en tu cuenta de EmbedSocial y ve a Widgets. Abre uno de los widgets que quieres insertar y consigue el valor del atributo data-ref de EmbedSocial (como se ha indicado arriba).
El atributo data-ref debería verse así:
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Cuando tengas el data-ref, puedes usar libremente el componente `EmbedSocialWidget` recién creado en cualquier parte de tu proyecto de angular. Solo tienes que editar el binding `refId` del componente con el refId que copiaste antes de EmbedSocial.
Aquí tienes un ejemplo de uso del componente:
¡Listo!
Usar el widget insertable en un proyecto de TypeScript
En el propio código de inserción no cambia nada, porque el widget es HTML plano más un script de carga. En un proyecto de framework de TypeScript solo tipas el envoltorio que construyes a su alrededor. El ejemplo de Angular de arriba ya es TypeScript: refId se declara como una cadena @Input() dentro de EmbedSocialWidget.component.ts. Haz lo mismo en React o en Vue, tipa la ref del widget como una prop string en tu propio componente y mantén el script de carga en el hook de ciclo de vida de montaje.
Esperamos que te haya resultado útil y, si tienes preguntas o necesitas ayuda, no dudes en escribirnos a: support@embedsocial.com