Entre em Contato

(43) 999-576-125 Formulário de Contato Skype: alanpatrickk

Como criar botões de compartilhamento personalizados no WordPress

Ao decorrer da minha vida nesse ramo de criação de temas, templates e sites, diversas vezes me vi diante da necessidade de criar alguns botões personalizados para compartilhamento de links nas redes sociais através do WordPress. Esta é uma ideia bem interessante pra quem quer criar projetos um pouco diferentes, sem usar os botões oficiais das redes sociais para compartilhamento.

A técnica pra criar estes links é bem simples e consiste apenas em pegar as variáveis do WordPress e implementar dentro do link personalizado de cada rede social. Como a maioria das redes sociais possuem este link personalizado, a maior dificuldade seria descobrir quais são estes links. Para a sua sorte, vou listar aqui pra você a maioria destes links e facilitar sua vida. Segue abaixo a lista das principais redes sociais criar botões de compartilhamento personalizados no WordPress:


<!-- Facebook -->
<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no Facebook" target="_blank">Facebook</a>

<!-- Twitter -->
<a href="http://twitter.com/home?status=<?php the_title(); ?>+<?php the_permalink(); ?>" title="Compartilhar no Twitter" target="_blank">Twitter</a>

<!-- Google Plus -->
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="Compartilhar no Google Plus" target="_blank">Google Plus</a>

<!-- Pinterest -->
<a href="http://www.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&description=<?php the_title();" title="Pin it" target="_blank" ?>Pinterest</a>

<!-- Linkedin -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&source=<?php bloginfo('name'); ?>" title="Compartilhar no Linkedin" target="_blank">Linkedin</a>

<!-- Tumblr -->
<a href="http://www.tumblr.com/share?v=3&u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" title="Compartilhar no Tumblr" target="_blank">Tumblr</a>

<!-- Evernote -->
<a href="http://www.evernote.com/clip.action?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no Evernote" target="_blank">Evernote</a>

<!-- Digg -->
<a href="http://www.digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no Digg" target="_blank">Digg</a>

<!-- StumbleUpon -->
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no StumbleUpon" target="_blank">StumbleUpon</a>

<!-- Delicious -->
<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>]&notes=<?php the_excerpt(); ?>" title="Compartilhar no Delicious" target="_blank">Delicious</a>

<!-- Slashdot -->
<a href="http://slashdot.org/bookmark.pl?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no Slashdot" target="_blank">Slashdot</a>

<!-- Technorati -->
<a href="http://technorati.com/faves?add=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no Technorati" target="_blank">Technorati</a>

<!-- Pocket -->
<a href="https://getpocket.com/save?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no Pocket" target="_blank">Posterous</a>

<!-- Posterous -->
<a href="http://posterous.com/share?linkto=<?php the_permalink(); ?>" title="Compartilhar no Posterous" target="_blank">Posterous</a>

<!-- Reddit -->
<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no Reddit" target="_blank">Reddit</a>

<!-- Google Bookmarks -->
<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink(); ?>&title=<?php the_title(); ?>&annotation=<?php the_excerpt(); ?>" title="Compartilhar no Google Bookmarks" target="_blank">Google Bookmarks</a>

<!-- Newsvine -->
<a href="http://www.newsvine.com/_tools/seed&save?u=<?php the_permalink(); ?>&h=<?php the_title(); ?>" title="Compartilhar no Newsvine" target="_blank">Newsvine</a>

<!-- Ping.fm -->
<a href="http://ping.fm/ref/?link=<?php the_permalink(); ?>&title=<?php the_title(); ?>&body=<?php the_excerpt(); ?>" title="Compartilhar no Ping.fm" target="_blank">Ping.fm</a>

<!-- Friendfeed -->
<a href="http://www.friendfeed.com/share?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar no Friendfeed" target="_blank">Friendfeed</a>

Apenas para que a gente possa entender como funciona estes links, a explicação é bem simples: na tag < a > em que o usuário será redirecionado constam as informações como título e url da página a ser compartilhada e estas informações, no WordPress, podem ser obtidas facilmente utilizando as famosas template tags:


<?php the_title(); ?> // Exibir o título da página atual
<?php the_permalink(); ?> // Exibir o link permanente da página atual

Então, após a sua página ser carregada no navegador, o código completo ficará mais ou menos assim:


<a href="http://twitter.com/home?status=Titulo da Posagem+http://www.seulink.com.br/permalink-da-posategem/" title="Compartilhar no Twitter" target="_blank">Twitter</a>

A lista de links encontrei aqui neste post.

Este é apenas o código básico pra exibir os links. Use sua criatividade para produzir outros efeitos, usar imagens, css e muito mais. As possibilidades são infinitas!

Se você estiver precisando de algum outro link que não se encontra nessa lista, pode deixar um comentário logo abaixo que assim que eu ler eu pesquiso pra você e atualizo aqui no post ;)

< Até a próxima! />