#desenvolvimento

Como adicionar botões de compartilhamento de redes sociais – Google Plus


Olá gente.
Agora iremos implementar o compartilhamento pelo Google Plus para isto iremos adicionar o código abaixo no arquivo index.html.haml:

/ Botão de compartilhamento pelo Google Plus.
.span
  %g:plusone{:annotation => "none", :size => "medium"}
  :javascript
    (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();

Assim como o Facebook, o Google Plus não permitiu o compartilhamento devido a aplicação está rodando localmente. Você pode publicar sua aplicação no Heroku para poder testar. Acesse este post e veja como realizar o deploy da aplicação no Heroku.

Para mais detalhes sobre o button share do Google Plus acesse aqui.

Com isto terminamos a série de posts sobre compartilhamento através das redes sociais. Espero que seja útil.

Até breve 😉

Anúncios
Padrão
#desenvolvimento

Como adicionar botões de compartilhamento de redes sociais – Facebook


Olá pessoal.
Neste post iremos implementar o compartilhamento pelo Facebook utilizando um projeto RoR com HAML e Javascript. Com projeto criado iremos adicionar o código abaixo no arquivo index.html.haml:

/ Botão de compartilhamento pelo Facebook.
.span
  .fb-send{"data-font" => "arial", "data-href" => "http://#{request.host}:#{request.port}#{request.fullpath}"}
  #fb-root
    :javascript
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

Este botão do Facebook irá compartilhar o link da sua página que será formado por este código:

http://#request.host:#request.port#request.fullpath

Onde:
#{request.host} – Retorna o host da aplicação.
#{request.port} – Retorna a porta.
#{request.fullpath} – Retorna o caminho da página composto também pelas pastas.

Observação, o Facebook não permitiu o compartilhamento devido a aplicação está rodando localmente. Você pode publicar sua aplicação no Heroku para poder testar. Acesse este post e veja como realizar o deploy da aplicação no Heroku.

Para mais detalhes sobre o button share do Facebook acesse aqui.

Até breve 😉

Padrão
#desenvolvimento

Como adicionar botões de compartilhamento de redes sociais – Linkedin


Olá leitores.
Neste post iremos implementar o compartilhamento pelo Linkedin utilizando um projeto RoR com HAML e Javascript. Com projeto criado iremos adicionar o código abaixo no arquivo index.html.haml:

/ Botão de compartilhamento pelo Linkedin.
.span
  %script{:src => "//platform.linkedin.com/in.js", :type => "text/javascript"}
  %script{"data-url" => "http://#{request.host}:#{request.port}#{request.fullpath}", :type => "IN/Share"}

Este botão do Linkedin irá compartilhar o link da sua página que será formado por este código:

http://#request.host:#request.port#request.fullpath

Onde:
#{request.host} – Retorna o host da aplicação.
#{request.port} – Retorna a porta.
#{request.fullpath} – Retorna o caminho da página composto também pelas pastas.

Assim como o Twitter, o compartilhamento pelo Linkedin é super tranquilo. Para saber um pouco mais sobre o compartilhamento pelo Linkedin acesse a documentação disponível aqui.

Até breve 😉

Padrão
#desenvolvimento

Como adicionar botões de compartilhamento das redes sociais – Twitter


Olá.
Como prometido iremos implementar o compartilhamento pelo Twitter. Para isto adicione o código abaixo no arquivo index.html.haml:

.span
  .twshare.left
  / Link de compartilhamento pelo Twitter.
  %a.twitter-share-button.left{"data-count" => "none", "data-text" => "TEXTO QUE SERÁ COMPARTILHADO!!!", :href => "http://twitter.com/share"} Tweet
  %script{:src => "http://platform.twitter.com/widgets.js", :type => "text/javascript"}

É importante que o link tenha algumas propriedades básicas para o compartilhamento:

  • data-count
    • Para mostrar a quantidade de vezes que o conteúdo foi compartilhado.
  • data-text
    • O conteúdo que será compartilhado.

Você pode ver todas as propriedades disponíveis aqui.

Qualquer dúvida, é só comentar.

Até breve 😉

Padrão
#desenvolvimento

Como adicionar botões de compartilhamento das redes sociais


Olá pessoal.

Geralmente a primeira coisa que se pensa quando é preciso fazer algum compartilhamento através das redes sociais é: Vamos olhar a API! Entretanto nem sempre é necessário implementar uma integração para simplesmente poder compartilhar uma informação simples.

Por isto, procurei algumas maneiras para fazer isto de forma sucinta e irei partilhar com vocês a solução dividida em uma série com mais quatro posts para cada uma das redes sociais listadas:

Twitter
Linkedin
Facebook
Google Plus

Os botões serão adicionados em um projeto Ruby on Rails com a utilização de HAML e Javascript. Então para adiantar crie um projeto RoR:

rails new app_share

Apesar de utilizar HAML para os próximos post você pode utilizar o mesmo código para páginas HTML, sendo necessário algumas adaptações.

Até breve 😉

Padrão