Depois de termos dado a conhecer alguns tutorias que o ajudam a personalizar o tema do seu site, chegou agora a hora de dar a conhecer outro guia que o ajudará a criar um menu de subscrição com contador tal como o que temos aqui no Escola Blog. Muitos webmasters costumam ter este menu, mas através de plugins. No entanto, este contador que vou aqui apresentar hoje, não usará qualquer plugin!

Escola Blog

Tal como já referi anteriormente, é muito importante deixar o WordPress livre de plugins (pelo menos o mais possível), para que este carregue mais rápido e sobrecarregue menos os servidores. Por isso mesmo, muitos dos tutoriais que temos estado a apresentar nos últimos dias, ensinam algumas coisas importantes para um layout bem feito sem o uso destas ferramentas!

Como criar o menu de subscrição?

Para criar o menu de subscrição, temos que adicionar umas funções ao nosso ficheiro functions.php, que irão puxar o número de subscritores ou seguidores das redes sociais e do FeedBurner. Para adicionar estas funções, copie o seguinte código e cole-o no fundo do ficheiro, imediatamente antes da tag ?>:

// PUXAR SUBSCRITORES

function escolablog_twitter( $username = 'USERNAME TWITTER' ) {
    $cache_key = "escolablog_twitter_{$username}";
    if ( false !== $followers = get_transient( $cache_key ) )
        return $followers;
    $result = wp_remote_retrieve_body( wp_remote_get( 'http://api.twitter.com/1/users/show.json?screen_name=' . urlencode($username) ) );
    if ( empty($result) ) {
        set_transient( $cache_key, $followers, 60 );
    }
    $data = json_decode( $result );
    if ( !isset( $data->followers_count ) )
        set_transient( $cache_key , $followers, 60 );
    $followers = (int) $data->followers_count;
    set_transient( $cache_key, $followers, 30 );
    return $followers;
}
function escolablog_rss(){
        $feed_url = 'LINK DO FEED';
        $count = get_transient('feed_count');
        if ($count != false) return $count;
	$count = 0;
        $data  = wp_remote_get('http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri='.$feed_url.'');
   if (is_wp_error($data)) {
        return 'error';
   }else{
	$body = wp_remote_retrieve_body($data);
	$xml = new SimpleXMLElement($body);
	$status = $xml->attributes();
	if ($status == 'ok') {
		$count = $xml->feed->entry->attributes()->circulation;
	} else {
		$count = 300; // fallback number
	}
   }
	set_transient('feed_count', $count, 30); 
	echo $count;
}
function escolablog_facebook(){
         $fb_id = 'ID DA PÁGINA DO FACEBOOK';
         $count = get_transient('fan_count');
    if ($count !== false) return $count;
         $count = 0;
         $data = wp_remote_get('http://api.facebook.com/restserver.php?method=facebook.fql.query&query=SELECT%20fan_count%20FROM%20page%20WHERE%20page_id='.$fb_id.'');
   if (is_wp_error($data)) {
         return 'whoa error!!!';
   }else{
         $count = strip_tags($data[body]);
   }
set_transient('fan_count', $count, 60); 
return $count;
}

Estas funções irão puxar, respetivamente, os seguidores do Twitter, subscritores de RSS e fãs da sua página no Facebook. Para tudo funcionar corretamente, altere os valores que estão indicados no código como USERNAME TWITTER, LINK DO FEED e ID DA PÁGINA DO FACEBOOK.

O funcionamento deste código é muito simples. Usa duas funções muito interessantes, que são o wp_remote_get e o set_transient. O primeiro, é o responsável por “puxar” o número de subscritores dos respetivos sites e guardá-lo numa variável. Já o segundo, é o que define o cache do contador, para que quando haja erros de leitura possa mostrar sempre o último número válido. De uma forma muito sucinta, este código resume-se a puxar um valor (wp_remote_get), guardar esse valor (set_transient) e mostrá-lo depois através do echo em HTML.

Depois de configuradas as funções que irão puxar os subscritores, vamos ao código HTML, que irá colar onde quer que apareça o menu:

    <a href="LINK DO SEU FEED" target="_blank" style="float:left; margin-right:2px; width:100px;"><div class="subscreverrss"><li style="padding-left:10%;">RSS Feed</li><li style="background:#CDC8B1;padding-left:40%;"><?php echo escolablog_rss() ?></li></div></a>
     
    <a href="LINK DA PÁGINA DO FACEBOOK" target="_blank" style="float:left; margin-right:2px; width:100px;"><div class="subscreverfacebook"><li style="padding-left:15%;">Facebook</li><li style="background:#CDC8B1;padding-left:40%;"><?php echo escolablog_facebook() ?></li></div></a>
     
    <a href="LINK DO TWITTER" target="_blank" style="float:left; width:100px;"><div class="subscrevertwitter"><li style="padding-left:25%;">Twitter</li><li style="background:#CDC8B1;padding-left:40%;"><?php echo escolablog_twitter() ?></li></div></a>

Mais uma vez, deve alterar os campos corretamente para que quando os seus visitantes clicarem no menu se dirijam para as suas páginas! Poderá personalizar o posicionamento dos botões a seu gosto, alterando as propriedades do HTML.

No entanto, para personalizar ainda mais o seu menu, cole o seguinte código CSS no seu ficheiro style.css:

.subscreverrss{background:#BEBEBE;padding:5px;border-radius:3px;font-weight:bold;cursor:pointer;color:#1C1C1C;font-size:110%;}
.subscreverrss:hover{background:#FFA500;cursor:pointer;color:#fff;}
.subscreverfacebook{background:#BEBEBE;padding:5px;border-radius:3px;font-weight:bold;cursor:pointer;color:#1C1C1C;font-size:110%;}
.subscreverfacebook:hover{background:#4169E1;color:#fff;}
.subscrevergoogleplus{background:#BEBEBE;padding:5px;border-radius:3px;font-weight:bold;cursor:pointer;color:#1C1C1C;font-size:110%;}
.subscrevergoogleplus:hover{background:#FF0000;color:#fff;}
.subscrevertwitter{background:#BEBEBE;padding:5px;border-radius:3px;font-weight:bold;cursor:pointer;color:#1C1C1C;font-size:110%;}
.subscrevertwitter:hover{background:#40E0D0;color:#fff;}

Pode alterar o código CSS ao seu gosto, para que seja um menu exclusivamente seu! E está pronto, agora já tem o seu menu de subscrição!

Até já!