Ao integrar botões para compartilhar seus post nas redes sociais, você esta a dar ao seus leitores um método rápido para ele também partilhar os mesmos em suas redes sociais favoritas. Isso irá ajudá-lo a direcionar mais tráfego de ajudar a melhorar o ranking nos motores de pesquisa.
As redes sociais tornaram-se uma parte tão integral da internet que, para a maioria dos blogs, o tráfego das redes sociais é umas das maiores fonte de tráfego!
O código que aqui mostramos irá adicionar os botões para compartilhar os post de seu blog WordPress nas redes sociais. Você pode optar por adicionar os botões sociais abaixo do conteúdo, acima do conteúdo, ou ambos.
O código não usa javaScript e adiciona o CSS necessário para colorir os botões com suas cores oficiais da marca.
Passo 1: adicione o código seguinte no arquivo de funções de seu tema
<?php
// display or return social media share buttons
function my_social_share( $return = false ) {
$url = get_permalink();
$title = get_the_title();
$blog_name = get_option( 'blogname' );
$encoded_url = urlencode( $url );
$tweet_text = $title . ' | ' . $blog_name;
$media = has_post_thumbnail() ? wp_get_attachment_url( get_post_thumbnail_id() ) : '';
$out = '<div class="share">';
// Twitter
$out .= '<a href="https://twitter.com/share?text=' . urlencode( $tweet_text ) . '&url=' . $encoded_url . '" target="_blank" class="as-twitter" title="Tweet">Tweet</a> ';
// Facebook
$out .= '<a target="_blank" href="http://www.facebook.com/sharer.php?u=' . $encoded_url . '" class="as-facebook" title="Share on Facebook">Share</a> ';
// Google+
$out .= '<a target="_blank" href="https://plus.google.com/share?url=' . $encoded_url . '" class="as-gplus" title="Share on G+" rel="nofollow">G+</a> ';
// Pinterest
$out .= '<a href="http://www.pinterest.com/pin/create/button/?url=' . $encoded_url . '&media=' . $media . '&description=' . urlencode( $title . ' - ' . $url ) . '" class="as-pinterest" target="_blank" rel="nofollow">Pin it</a> ';
$out .= '</div>';
if ( $return ) {
return wp_kses_post( $out );
} else {
echo wp_kses_post( $out );
}
}
// Add CSS styles for social media share buttons
function hook_css() {
?>
<style type="text/css" id="share-css">.share{margin:30px 0 0;}.share a{margin:10px 5px;line-height:1;color:#fff;padding:3px 6px 4px;text-decoration:none;font-family: Verdana, Geneva, "Bitstream Vera Sans", sans-serif;border-radius: 3px;box-shadow: 1px 1px 3px #888;}.share a:hover{color:#fff;text-decoration:none;}.share .as-facebook{background-color:#3B5998;}.share .as-twitter{background-color:#00aced;}.share .as-gplus{background-color:#dd4b39;}.share .as-pinterest{background-color:#cb2027;}</style>
<?php
}
add_action('wp_head', 'hook_css');
?>
Passo 2: posicione os botões no lugar em que preferir
Você pode escolher mais de uma das seguintes variações, todos eles podem trabalhar ao mesmo tempo. Para usar uma dessas variações, adicione o código seguinte no arquivo de funções de seu tema, assim como você adicionou o código acima.
Mostrar botões no inicio do post:
<?php
// Add Social Media share buttons above content on WordPress posts
function my_social_share_above_content( $content ) {
$content = my_social_share( true ) . $content;
return $content;
}
add_filter( 'the_content', 'my_social_share_above_content' );
?>
Mostrar botões no final do post:
<?php
// Add Social Media share buttons after content on WordPress posts
function my_social_share_after_content( $content ) {
$content = $content . my_social_share( true );
return $content;
}
add_filter( 'the_content', 'my_social_share_after_content' );
?>
Com isto terá 4 botões com uma borda ligeiramente arredondado, bem como uma sombra de luz para dar alguma profundidade…