|
   |
| Comunidade uCoz em Português » Desenvolvedores uCoz & uKit » Soluções Personalizadas » Botões de compartilhamento em redes sociais |
| Botões de compartilhamento em redes sociais |
Olá pessoal, tudo bem?
O uCoz tem a barra de redes sociais que é excelente e muito bem-vinda, não é mesmo? Pra que não gosta da barra do uCoz vocês podem criar os próprios botões de compartilhamento em redes sociais ou usar algum dos diversos serviço como o ShareThis, AddThis e AddToAny. Qual a vantagem de usa-lo em relação a barra de redes sociais do uCoz:
Neste widget estarei usando o GetShar.es um projeto Open Source personalizado. Vocês podem baixar todos os scripts originais no repositório do GitHub. Lembre-se! Não estamos na sua cabeça, então seja claro ao postar uma dúvida.
Não dou suporte por mensagem privada. Quem preferir suporte particular, procure no Painel de Controle do site ou na página http://www.ucoz.com.br/contact. |
Olá, já usei vários códigos para compartilhar o conteúdo no Facebook mas até agora nenhum compartilha a IMAGEM.
Agora tentei usar o serviço do Addthis colocando-o em uma página (módulo anúncios - página completa e com comentários relacionados). Ficou no local correto, (como todos que testei), mas enfim, a imagem não aparece após o compartilhamento. Qualquer código que eu use para compartilhar no Face não está compartilhando a imagem. Porquê? |
angel, para a imagem aparecer no compartilhamento você tem que usar as metatags do padrão da The Open Graph protocol (OGP). O Facebook usa o OGP, o Twitter tem suas próprias tags assim como o Google+.
Se você dá uma olhada no site do wmonline que foi feito no uCoz, verá que no código-fonte tem várias meta tags para isso. Ex.: http://wmonline.com.br/artigos....1-0-101 (para ver o código-fonte aperte control + u) lá vai ter essas tags especificando qual imagem (através do link) deve aparecer na hora de compartilhar. Código <meta property="og:image" content="http://wmonline.com.br/_pu/1/65223725.png"/> <meta name="twitter:image:src" content="http://wmonline.com.br/_pu/1/65223725.png"/> <meta itemprop="image" content="http://wmonline.com.br/_pu/1/65223725.png"/> Em geral, a primeira imagem da postagem eu faço de capa, ou seja, é ela que aparece como chamativo das postagens e também na hora de compartilhar nas redes sociais. Sobre o código de como fazer para colocar no seu site, aqui vai um exemplo do que uso no template de "postagem completa e seus comentários" que uso no módulo de anúncios. A partir deste código você pode usar-lo em qualquer página/módulo do seu site. Código <!-- usados por sites de busca (google) --> <title>$ENTRY_TITLE$ - $SITE_NAME$</title> <link rel="canonical" href="$ENTRY_URL$" /> <meta name="description" content="$OTHER1$"/> <meta name="keywords" content="$OTHER2$"/> <!-- usado pelo facebook --> <meta property="og:locale" content="pt_BR"/> <meta property="og:url" content="$ENTRY_URL$"/> <meta property="og:type" content="website"/> <meta property="og:title" content="$ENTRY_TITLE$"/> <meta property="og:description" content="$OTHER1$"/> <meta property="og:site_name" content="$SITE_NAME$"/> <?if($IMG_URL1$)?><meta property="og:image" content="$IMG_URL1$"/><?else?><meta property="og:image" content="http://exemplo.ucoz.com.br/images/padrao.png"/> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="600"/> <meta property="og:image:height" content="315"/><?endif?> <!-- usado pelo twitter --> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="$ENTRY_TITLE$"/> <meta name="twitter:description" content="$OTHER1$"/> <meta name="twitter:image:src" content="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://exemplo.ucoz.com.br/images/padrao.png<?endif?>"/> <meta name="twitter:domain" content="exemplo.ucoz.com.br"/> <!-- usado pelo Google+ --> <meta itemprop="description" content="$OTHER1$"/> <meta itemprop="image" content="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://exemplo.ucoz.com.br/images/padrao.png<?endif?>"/> Lembre-se! Não estamos na sua cabeça, então seja claro ao postar uma dúvida.
Não dou suporte por mensagem privada. Quem preferir suporte particular, procure no Painel de Controle do site ou na página http://www.ucoz.com.br/contact. |
| |||
| |||