Enquanto webmaster e blogueiro você irá necessitar da colaboração dos seus visitantes para crescer e ver o seu trabalho espalhado pela internet. Um dos métodos de partilha muito utilizados é o Twitter, sendo que existem milhões de usuários nesta rede social que nos dias de hoje é bastante influente. Como blogueiro você procura obter subscritores e seguidores nas redes sociais como o Facebook e o Twitter para ser bem sucedido no mundo dos blogs e nas redes sociais. Para fazer com que os visitantes se sintam tentados a partilhar os conteúdos, além da qualidade dos mesmos poderá também oferecer algo em troca, como freebies em forma de eBooks, Pacotes de Texturas, Plugins, entre outros elementos. Para fazer esta troca, você poderá utilizar um plugin que quando o visitante clicar para partilhar o seu conteúdo no Twitter, lhe seja enviado algo em troca, definido por si. Assim, neste artigo vamos-lhe ensinar a criar um plugin que consiste em oferecer algo em troca de um tweet. Neste artigo, além de lhe mostrarmos como construir o plugin, ainda lhe oferecemos o plugin para download totalmente gratuito!
EM QUE CONSISTE?
Este plugin consiste na criação de um sistema que irá fazer com que os seus visitantes sejam recompensados pela partilha dos seus conteúdos, podendo determinar uma recompensa e um usuário de twitter diferente para cada um dos seus artigos. Desta forma poderá fazer com que a oferta feita num artigo sobre design seja sobre design, e a oferta num artigo sobre um tutorial seja por exemplo um freebie de um tutorial que você tenha criado. Assim, a oferta e o conteúdo estarão sempre relacionados. Outra particularidade deste plugin é que permite que você defina diferentes usuários do Twitter em cada uma das páginas de artigo, podendo desta forma gerir os seus artigos e a oferta em cada um deles da melhor maneira. Uma palavra de agradecimento aos colegas Vitor Carvalho e Paulo Faustino pela ajuda prestada na elaboração deste plugin!
1. PRIMEIRO PASSO
O primeiro passo em direção á criação deste plugin é criar os seus diretórios onde os ficheiros irão ser inseridos. Assim, crie um diretório principal com o nome pretendido para o plugin. De seguida crie um novo ficheiro index.php e insira o seguinte código no mesmo, que irá determinar o nome do plugin, o URL, a descrição, a versão, o autor, o website do autor e qual a licença utilizada:
/* Plugin Name: Oferta por Tweet Plugin URI: https://www.escolawp.com/ Description: Plugin que permite determinar um freebie personalizado para oferecer em troca da partilha de conteudos atraves do Twitter. Version: 1.0 Author: Escola WordPress Author URI: https://www.escolawp.com/ License: GPLv2 + */
Se pretender poderá desde já inserir a pasta criada dentro do diretório wp-content/plugins na sua instalação WordPress, dirigir-se ao painel de administração e verificar que o plugin já se encontra listado:
Ainda preparando o ficheiro para começarmos a avançar para a programação, é necessário fazer uma ressalva relativamente aos direitos de autor do plugin. Citando o colega Vitor Carvalho no artigo Como criar plugins para WordPress (Parte I):
Algo muito importante a ter em conta é o copyright do plugin. Existe muita discussão pela internet sobre se os plugins WordPress podem ter ou não licenças proprietárias, isto é, não compatível com as licenças OpenSource, nomeadamente a licença GPL que é a que a core do WordPress usa. Este é um assunto sério e que deve ser respeitado, pois a legislação de direitos de autor existe! A verdade é a seguinte: a licença GPL diz que qualquer trabalho derivativo de um trabalho licenciado em GPL deve ter a mesma licença ou pelo menos uma licença compatível com GPL. Os plugins, como usam código proveniente da core do WordPress são considerados trabalhos derivativos, sendo assim devem seguir o mesmo trâmite de licença.
Então deverá inserir o seguinte código logo a seguir ao código já inserido:
/* * Copyright 2012 Aluno da Escola WordPress <mail@doaluno.com> * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, * MA 02110-1301, USA. */
2. ADICIONAR CAMPO DA RECOMPENSA NA PÁGINA DE ARTIGO
Como referimos na introdução deste tutorial, cada artigo poderá ter uma oferta diferente, então para isso vamos introduzir um campo na página de edição de artigo onde você poderá determinar o link para a recompensa para cada um dos artigos. Assim poderá oferecer recompensas de acordo com o conteúdo do artigo, evitando criar uma recompensa geral, o que em alguns artigos não seria adequado. Em adição iremos também inserir um campo para o usuário do Twitter, podendo desta forma definir qual o usuário do Twitter que irá ser referenciado no tweet.
Dentro do ficheiro index.php criado anteriormente, insira o seguinte código:
add_action('add_meta_boxes', 'add_reward_box' );
function add_reward_box()
{
add_meta_box( 'reward_box-id', 'Oferta por Tweet', 'display_reward_box', 'post');
}
Neste momento temos a “caixa” criada mas sem conteúdo. Então, vamos inserir os campos necessários:
function display_reward_box($post){
$values = get_post_custom( $post->ID );
$link_oferta = isset( $values['link_oferta'] ) ? esc_attr( $values['link_oferta'][0] ) : '';
$usuario_twitter = isset( $values['usuario_twitter'] ) ? esc_attr( $values['usuario_twitter'][0] ) : '';
wp_nonce_field( 'reward_box', 'reward_box' );
$html_lr = "
";
echo $html_lr;
echo "
";
$html_tu = "";
echo $html_tu;
}
Se salvar o documento e enviar para a sua instalação, neste momento é isto que terá (sem nenhum texto introduzido nos campos obviamente):
Como poderá estar a pensar, é necessário salvar os dados inseridos nestes dois campos. Então, para o fazer utilizamos o seguinte código:
add_action( 'save_post', 'reward_box_save' );
function reward_box_save($postID){
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if( !isset( $_POST['reward_box'] ) || !wp_verify_nonce( $_POST['reward_box'], 'reward_box' ) ) return;
if( !current_user_can( 'edit_post' ) ) return;
if( isset( $_POST['link_oferta'] ) )
update_post_meta($postID, 'link_oferta', esc_attr( $_POST['link_oferta'] ) );
if( isset( $_POST['usuario_twitter'] ) )
update_post_meta($postID, 'usuario_twitter', esc_attr( $_POST['usuario_twitter'] ) );
}
3. TRABALHAR O TWEET
Agora entramos na fase em que temos de definir quais os dados a passar para o tweet e como os fazer. Então iremos tirar partido de uma funcionalidade oferecida pelo Twitter que é a integração de um botão do twitter nos seus websites (poderá visitar esse serviço clicando aqui). Antes disso iremos tirar partido de variáveis onde iremos guardar dados que irão ser utilizados no botão:
function add_reward_tweet_button($content){
global $post;
$tweet_meta_values = get_post_meta($post->ID,'link_oferta');
$username_do_twitter = get_post_meta($post->ID,'twitter_username', true);
$tweet_text = $post->post_title." - ";
if(is_single() && isset($tweet_meta_values[0]) && $tweet_meta_values[0] != '' ){
return $content."<div class='tw_reward_panel' ><div class='tw_reward_title'>Partilhe o artigo e receba uma oferta!
<span class='tw_reward_button'><a href='https://twitter.com/share?text=$tweet_text&via=$username_do_twitter' class='twitter-share-button' data-lang='en' data-url='$post->guid' >Tweet</a></span></div>
<div class='tw_reward_links'><a id='rewardLink' href=''>Clique aqui para fazer o download da oferta</a><div style='clear:both'></div></div></div>";
}else{
return $content;
}
}
De seguida continuamos a trabalhar alguns itens e fazemos a integração do javascript e do CSS (que iremos criar de seguida):
add_filter('the_content','add_reward_tweet_button');
function apply_reward_tweet_scripts() {
global $post;
wp_enqueue_script('jquery');
wp_register_script("twWidget", "http://platform.twitter.com/widgets.js");
wp_enqueue_script('twWidget');
wp_register_script('rewardTweet', plugins_url('js/js.js', __FILE__));
wp_enqueue_script('rewardTweet');
wp_register_style('rewardTweetStyles', plugins_url('css/style.css', __FILE__));
wp_enqueue_style('rewardTweetStyles');
$config_array = array(
'rewardAjaxUrl' => admin_url('admin-ajax.php'),
'rewardNonce' => wp_create_nonce('reward-nonce'),
'rewardPost' => $post->ID
);
wp_localize_script('rewardTweet', 'rewardData', $config_array);
}
add_action('wp_enqueue_scripts', 'apply_reward_tweet_scripts');
function get_reward_links(){
global $post;
$tweet_meta_values = get_post_meta($_POST['postID'],'link_oferta');
if(isset($tweet_meta_values[0]) && $tweet_meta_values[0] != '' ){
echo json_encode(array("value"=>$tweet_meta_values[0],"status"=>"success"));exit;
}else{
echo json_encode(array("status"=>"error"));exit;
}
}
add_action('wp_ajax_nopriv_get_reward_links', 'get_reward_links');
add_action('wp_ajax_get_reward_links', 'get_reward_links');
?>
4. CRIANDO O JAVASCRIPT
Este plugin conta com uma pequenina ajuda de Javascript, sem o qual não seria possível fazer este plugin com a sua graciosidade. Assim, crie um diretório com o nome “js” dentro do diretório principal criado anteriormente e crie o ficheiro js.js com o seguinte código:
$jq =jQuery.noConflict();
twttr.events.bind('tweet', function(event) {
$jq.post(rewardData.rewardAjaxUrl, {
action:"get_reward_links",
nonce:rewardData.rewardNonce,
postID :rewardData.rewardPost
}, function(result, textStatus) {
if(result.status == 'success'){
$jq("#rewardLink").attr("href",result.value);
$jq("#rewardLink").show();
}
}, "json");
});
5. CRIANDO O CSS
Seria possível utilizar este plugin sem o estilizar, mas a verdade é que com a devida estilização fica com outro aspeto bem mais atrativo para quem visita o seu website. Sendo assim, crie um diretório com o nome “css” dentro do diretório principal criado anteriormente e crie o ficheiro style.css com o seguinte código:
.tw_reward_panel{
border: 1px solid #CFCFCF;
clear: both;
margin: 20px auto;
width: 100%;
}
.tw_reward_title{
color: #3C3838;
font-weight: bold;
padding: 3%;
text-align: center;
text-shadow: 1px 1px 1px #CCCACA;
width: 95%;
}
.tw_reward_button{
margin-left: 15px;
position: relative;
top: 4px;
}
.tw_reward_links a{
background: none repeat scroll 0 0 #666;
color: #FFFFFF;
display: block;
font-family: helvetica;
font-size: 12px;
font-weight: bold;
margin: 5px 10px;
padding: 5px 10px;
text-decoration: none;
width: 200px;
float:left;
}
.tw_reward_links{
margin: 10px auto;
width: 240px;
}
#rewardLink{
text-align: center;
display:none;
}
6. OPCIONAL – PÁGINA DE OPÇÕES
Não é um item imprescindível mas ainda assim vamos falar nele, que é criar uma página de opções para o plugin. Embora este plugin tenha as suas opções inseridas nas páginas de edição de artigo pois assim tem de ser, optámos por lhe mostrar como fazer uma página de opções. A página de opções é criada no documento principal do plugin, neste caso o index.php e não é difícil. Começamos por criar o link no menu do painel de administração e respetiva linkagem, passando depois para a introdução do conteúdo do mesmo:
add_action('admin_menu', function(){
add_options_page('Oferta por Tweet', 'Oferta por Tweet', 'administrator', __FILE__, function() {
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2> Título da sua página</h2>
<p align="justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend eros eget lorem euismod facilisis. Fusce convallis, ligula eu ultricies ornare,
libero risus auctor orci, eu convallis arcu mauris in libero. Nulla vitae dolor sit amet est tempor luctus. Nunc porta adipiscing enim at pellentesque. Suspendisse posuere dictum
justo et mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc non lacus urna. Integer ac felis et lacus rhoncus pharetra quis a tortor.
Sed vestibulum congue nunc sed fermentum. Duis quis leo nisi. Suspendisse potenti. Cras quam quam, vulputate luctus pharetra at, scelerisque non sem.</p>
</div>
<?php
});
});
7. DOWNLOAD
Disponibilizamos agora o plugin para download de forma totalmente gratuita, para que você possa desde já começar a tornar-se um guru das redes sociais!
[wpdm_file id=6]
Abraços!
