O widget do EmbedSocial é um widget incorporável independente de framework: um <div> com um atributo data-ref, mais um pequeno script de carregamento. Como isso é HTML simples, o mesmo código encaixa em qualquer projeto de framework JavaScript ou TypeScript. Este guia cobre React, Vue e Angular.
Incorpore o widget no React
Neste tutorial, vou dar-lhe um guia detalhado sobre como incorporar o seu widget numa aplicação React.
1. O primeiro passo é copiar o código do widget que criou:
2.Depois de copiar o código, tem de separar o código HTML do JavaScript, por exemplo:
Este é o código do widget do 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. A seguir, vá à sua aplicação React, crie um novo componente na sua diretoria components e cole o código HTML dentro da função render:
Cole o código JavaScript dentro do método de ciclo de vida componentDidMount:
4. Navegue até à página onde quer apresentar o widget; no nosso caso, vamos adicioná-lo ao App.js principal, e importe o componente que acabámos de criar:
5. É tudo. Assim que fizer isto e guardar as alterações, o widget aparece na sua página.
Se tiver alguma questão, clique no ícone de chat no canto inferior direito para falar com a nossa equipa de apoio ao cliente ou envie-nos um email para support@embedsocial.com. Estamos aqui para si 🙏
Incorporar no Vue
Nas aplicações Vue, há duas opções para incorporar código HTML/javascript personalizado:
- Composition API
- Options API
Primeiro, tem de copiar o código do seu widget:
Depois de copiar o código, tem de separar o HTML do javascript, por exemplo:
Código do widget do 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. Incorporar o widget através da Options API
Para incorporar o código do widget do EmbedSocial numa aplicação Vue que usa a Options API, siga os passos abaixo:
Primeiro, vá à sua aplicação Vue e crie um novo componente na sua diretoria components:
Cole o código HTML do widget do EmbedSocial dentro das tags <template>:
Cole o código javascript do widget do EmbedSocial dentro do lifecycle hook created:
Agora que criou o componente do widget do EmbedSocial, só precisa de importar o componente e apresentá-lo no seu site.
Abra o ficheiro/página onde quer apresentar o widget e importe o componente; neste caso, estamos a importá-lo no App.vue:
Aqui estão os resultados deste código e do uso da Options API
2. Composition API
A Composition API é uma adição à framework Vue, criada para resolver as limitações da Options API usada no Vue2.
Para incorporar o código do seu widget numa aplicação Vue que usa a Composition API, tem de seguir os passos abaixo:
Primeiro, vá à sua aplicação Vue e crie um novo componente na sua diretoria components:
A seguir, cole o código HTML do widget do EmbedSocial dentro das tags <template>:
Depois tem de importar a função onMounted do Vue e colar o código javascript do widget do EmbedSocial dentro da função onMounted:
Ao seguir os passos acima, criou o componente do widget do EmbedSocial; agora temos de importar o componente e apresentá-lo no seu site.
Abra o ficheiro/página onde quer apresentar o seu widget e importe o componente; neste caso, estamos a importá-lo no App.vue:
Feito isto, o seu widget é apresentado no seu site.
É tudo.
Se tiver alguma questão, clique no ícone de chat no canto inferior direito para falar com a nossa equipa de apoio ao cliente ou envie-nos um email para support@embedsocial.com. Estamos aqui para si 🙏
Incorporar no Angular
Nas aplicações Angular, há duas opções para integrar código JavaScript personalizado.
Uma opção é incorporar o código diretamente no HTML, e a outra melhor solução é criar um componente.
- # Incorporar código em qualquer parte da página
Esta é uma opção conhecida e a forma mais fácil. Basta aceder ao html em qualquer um dos seus ficheiros Angular e colar o código do EmbedSocial diretamente.
Aqui está um exemplo:
2. Criar um componente
Há dois passos que tem de seguir para conseguir isto:
- Criar o componente
- Usar o componente
1. No terminal, use o seguinte comando `ng generate component EmbedSocialWidget` para criar um componente angular chamado `EmbedSocialWidget`
2. Depois de criar o componente, abra `EmbedSocialWidget.component.ts` e adicione uma string `@Input() decorated` chamada `refId` logo acima do construtor.
3. Nesse mesmo ficheiro, dentro da função `ngOnInit()`, adicione o javascript do embedsocial, que é responsável por construir o widget.
O seu ficheiro de componente `EmbedSocialWidget.component.ts` deve ficar como a imagem abaixo:
Usar o componente
Primeiro, inicie sessão na sua conta EmbedSocial e vá a Widgets. Abra um dos widgets que quer incorporar e obtenha o valor do atributo data-ref do EmbedSocial (como referido acima).
O atributo data-ref deve ter este aspeto:
data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"
Assim que tiver o data-ref, pode usar o componente `EmbedSocialWidget` recém-criado livremente em qualquer parte do seu projeto angular. Basta editar o binding `refId` do componente com o refId que copiou antes do EmbedSocial.
Aqui está um exemplo de uso do componente:
É tudo.
Usar o widget incorporável num projeto TypeScript
Nada muda no próprio código de incorporação, porque o widget é HTML simples mais um script de carregamento. Num projeto de framework TypeScript, só tipifica o wrapper que constrói à volta dele. O exemplo Angular acima já é TypeScript: refId é declarado como uma string @Input() dentro de EmbedSocialWidget.component.ts. Faça o mesmo no React ou no Vue: tipifique a ref do widget como uma prop string no seu próprio componente e mantenha o script de carregamento no lifecycle hook de montagem.
Esperamos que isto tenha sido útil e, se tiver questões ou precisar de assistência, sinta-se à vontade para nos contactar: support@embedsocial.com