En las aplicaciones Angular hay dos opciones al incorporar código JavaScript personalizado.
Una opción es incorporar el código directamente en el HTML, y la otra mejor solución es crear un Componente.
Incorporar código en cualquier lugar de la página
Esta es una opción conocida y la manera más fácil de proceder. Así, puedes simplemente acceder al HTML en cualquiera de tus archivos Angular y pegar directamente el código de EmbedSocial.
Aquí hay un ejemplo:
2. Crear un Componente
Hay dos pasos que debes seguir para lograr esto:
Crear el componente
Usar el componente
En el terminal, usa el siguiente comando
ng generate component EmbedSocialWidgetpara crear un componente angular llamadoEmbedSocialWidget.Después de crear el componente, abre
EmbedSocialWidget.component.tsy añade una cadena decorada con@Input()llamadarefIdjusto encima del constructor.En ese mismo archivo, dentro de la función
ngOnInit(), añade el JavaScript de embedsocial, que es responsable de construir el widget.
Tu archivo de componente EmbedSocialWidget.component.ts debería lucir como la imagen a continuación:
Usando el componente
First, login to your EmbedSocial account and go to Widgets. Open one of the widgets that you want to embed and get the EmbedSocial data-ref attribute value (as mentioned above).
Primero, inicia sesión en tu cuenta de EmbedSocial y ve a Widgets. Abre uno de los widgets que quieras incorporar y obtén el valor del atributo data-ref de EmbedSocial (como se mencionó anteriormente).
El atributo data-ref debería lucir así:
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Una vez que tienes el data-ref, puedes usar libremente el componente EmbedSocialWidget recién creado en cualquier lugar dentro de tu proyecto Angular. Simplemente edita la vinculación refId del componente con el refId que copiaste de EmbedSocial anteriormente.
Aquí hay un ejemplo de cómo usar el componente:
Eso es todo.
Espero que esto haya sido útil, y si tienes preguntas o necesitas asistencia, no dudes en contactar a:
support@embedsocial.com