O wordpress possui funcionalidades extraordinárias e permite que sem qualquer conhecimento de código, os seus utilizadores possam efetuar alterações incríveis.
Os plugins wordpress permitem esta dinâmica, mas também criam alguns constrangimentos aos seus utilizadores, como por exemplo, tornar o carregamento de páginas mais lento e prejudicar o SEO, abrir janelas para ataques quando não atualizados com regularidade, entre outros.
Todavia, muitos dos plugins existentes no mercado são possíveis de evitar a sua instalação, permitindo que o utilizador do wordpress beneficie das mesmas funcionalidades sem prejudicar o seu blog.
Assim sendo, vamos ver como pode instalar no seu blog Thesis Theme os botões sociais de partilha sem necessitar de instalar qualquer plugin.
RESULTADO FINAL
ONDE ENCONTRAR OS BOTÕES SOCIAIS
Antes de começar terá que encontrar os botões sociais para criar a estrutura de código necessária para o Thesis Theme.
Novo botão Tweet
O novo botão do twitter pode ser encontrado no twitter e deverá ser personalizado de acordo com as suas preferência, conforme imagem.
Botão Facebook Share
Os códigos para colocar o botão Facebook share que desejar.
- Botão Facebook Share Grande
<a name=”fb_share” type=”box_count” href=”http://www.facebook.com/sharer.php”>Share</a>
<script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
- Botão Facebook Share Compacto
<a name=”fb_share” type=”button_count” href=”http://www.facebook.com/sharer.php”>Share</a>
<script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
Botão Google +1
Este botão necessita de alguns passos da sua parte. Para isso sugiro que personalize o seu botão no site da Google, conforme imagem:
Seguidamente, necessita de colocar o código na secção <head> do Thesis Theme. Esta é uma das ferramentas fantásticas do Thesis pois permite que coloquem os códigos que necessitem sem alterar os códigos originais.
Assim sendo, deverá ir a Painel do WordPress / Thesis / Site Options e procurar por “Additional Scripts” e cole o código. A imagem exemplifica o processo.
1º PASSO – ALTERAR CÓDIGO DA FUNÇÃO PARA THESIS
O código seguinte é a função que irá colocar na pasta custom_fuctions.php em Thesis Theme /custom file editor. Deverá colocar os códigos do botão entre os <divs>.
Código exemplificativo:
/*PARTILHA*/
function social_icons(){
if(is_single()){
?>
<div class="social">
<strong>Partilhar é Ajudar!</strong>
<div class="social_button tm">
Botão do Twitter
</div>
<div class="social_button fb">
Botão do Facebook
</div>
<div class="social_button su">
Botão do Google +1
</div>
</div>
<div class="clear"></div>
<?
}
}
add_action('thesis_hook_after_post','social_icons');
Exemplo Código Final:
/*PARTILHA*/
function social_icons(){
if(is_single()){
?>
<div class="social">
<strong>Partilhar é Ajudar!</strong>
<div class="social_button tm">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="dinheiropt" data-lang="pt">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="social_button fb">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="social_button su">
<g:plusone size="tall"></g:plusone>
</div>
</div>
<div class="clear"></div>
<?
}
}
add_action('thesis_hook_after_post','social_icons');
2º PASSO – COLAR CÓDIGO NO CUSTOM.CSS DO THESIS
Antes de iniciarmos a nossa função e para não correr o risco de um leitor consultar o blog enquanto instala o código dos botões, deverá criar a estrutura css para que quando inserir a função os botões estejam minimamente organizados.
Em custom.css "painel wordpress / Thesis Theme / custom file editor", cole o seguinte código que apresenta uma personalização igual ao nosso exemplo final, no entanto é perfeitamente personalizável.
/*PARTILHA*/
.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: 0px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; overflow: hidden; height:70px; }
.social .social_button.tm { margin: 0px 0 0 20px; padding-top: 4px;}
.social .social_button.fb { margin: 0 0 0 20px; padding-top:4px;}
.social .social_button.su { margin: 0px 0 0 20px; padding-top: 4px;}
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}
.clear{clear:both;}
3º PASSO – CHAMAR OS BOTÕES ATRAVÉS DO CUSTOM_FUNCTIONS.PHP
Como este procedimento tudo já se encontra concluído, basta que copie o código da função com os seus botões e instalar no custom_functions.php, em "painel wordpress / thesis / custom file editor".
O código é semelhante a este:
/*PARTILHA*/
function social_icons(){
if(is_single()){
?>
<div class="social">
<strong>Partilhar é Ajudar!</strong>
<div class="social_button tm">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="dinheiropt" data-lang="pt">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="social_button fb">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="social_button su">
<g:plusone size="tall"></g:plusone>
</div>
</div>
<div class="clear"></div>
<?
}
}
add_action('thesis_hook_after_post','social_icons');
Até já… E já agora porque não partilhar?
{ 1 comment… read it below or add one }
Mui bueno.