Total Followers 132,503
As a website owner or blogger you need a good number of subscribers and followers to be successful in the social media world. Many websites provide freebies such as eBooks, Icon Packs and Plugins in exchange for emails. Getting people to tweet your content is another trending method to get more visitors to your site. In this tutorial, I’ll be showing how to create a WordPress reward for Tweet plugin to increase the tweets on your content while satisfying everyone!
Basically we are going to provide rewards for users who tweet our content. You will be able to provide a freebie for each of your blog posts or tutorials. Once the user tweets the content, the download link will be shown to the users. You can provide related links, tutorial files, link for a special offer as a reward, and so on.
First thing we have to do is create a folder called Reward-Tweets in the wp-content/plugins directory and create the index.php file inside the folder. Once it is done we need to provide the information about the plugin on the top of the index.php file using comments as shown in the code below.
/* Plugin Name: Reward for a Tweet Plugin URI: http://innovativephp.com/ Description: Provide additional links or freebies for a tutorial for tweeters. Version: 1.0 Author: Rakhitha Nimesh Author URI: http://innovativephp.com/about/ License: GPLv2 or later */
Now you will be able to see the plugin on your admin dashboard with the link to activate the plugin.
Each post is going to have its own reward link. You can omit the reward link if you don’t have anything to provide for a specific post. So first thing we need to do is to add a textbox to the post creation screen to insert reward links.
Adding Meta Boxes to Post Screen
We can add custom fields using WordPress meta boxes. Consider the code below.
add_action('add_meta_boxes', 'add_reward_link_box' );
function add_reward_link_box()
{
add_meta_box( 'reward_link_box-id', 'Reward Link', 'display_reward_link_box', 'post');
}
Now we can take a look at display_reward_link_box function which is used to display the custom fields.
function display_reward_link_box(){
global $post;
$values = get_post_custom( $post->ID );
$reward_link = isset( $values['reward_link'] ) ? esc_attr( $values['reward_link'][0] ) : '';
wp_nonce_field( 'reward_link_box', 'reward_link_box' );
$html = "<lable>Reward Link</label><input type='text' name='reward_link' value='$reward_link' />";
echo $html;
}
If you configured everything correctly up to now, you should be able to see the meta box with Reward Link field in the bottom of the post creation screen after activation.
Saving Reward Link Value to Database
Now we have to save the value of the Reward Link once you hit the publish button and save the post. Following code will be used to save the data to wp_postmeta table.
add_action( 'save_post', 'reward_link_box_save' );
function reward_link_box_save($postID){
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if( !isset( $_POST['reward_link_box'] ) || !wp_verify_nonce( $_POST['reward_link_box'], 'reward_link_box' ) ) return;
if( !current_user_can( 'edit_post' ) ) return;
if( isset( $_POST['reward_link'] ) )
update_post_meta($postID, 'reward_link', esc_attr( $_POST['reward_link'] ) );
}
Now we have all the reward links for posts in database. In the next section I’ll explain how to create Tweet Button and provide rewards.
We have to provide the necessary scripts and styles for the plugin using wp_enqueue_scripts action. Following code will add all the necessary scripts and styles.
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/rewardTweet.js', __FILE__));
wp_enqueue_script('rewardTweet');
wp_register_style('rewardTweetStyles', plugins_url('css/rewardTweet.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');
Next we have to display the tweet button on each post. Let’s move onto displaying tweet button.
We have already included the scripts for getting the tweet button. Now we have to include the link which generates the tweet button. Code given below will insert the Tweet button to your posts.
function add_reward_tweet_button($content){
global $post;
$tweet_meta_values = get_post_meta($post->ID,'reward_link');
$tweet_text = $post->post_title." - ".get_site_url();
if(is_single() && isset($tweet_meta_values[0]) && $tweet_meta_values[0] != '' ){
return $content."<div class='tw_reward_panel' ><div class='tw_reward_title'>Tweet and Get Rewarded
<span class='tw_reward_button'><a href='https://twitter.com/share?text=$tweet_text&via=1stwebdesigner' class='twitter-share-button' data-lang='en' data-url='$post->guid' >Tweet</a></span></div>
<div class='tw_reward_links'><a id='rewardLink' href=''>Click Here To Get Reward Link</a><div style='clear:both'></div></div></div>";
}else{
return $content;
}
}
add_filter('the_content','add_reward_tweet_button');
Now you should be able to see the Reward Panel under each post with a reward link as shown in the screen below.
Now once the tweet button is clicked and tweet is published on user’s profile, we need to display the Reward Link. We are going to use Twitter Web Intents Events to identify the end of a tweet. You can find more information about Twitter events on the Twitter Dev center. So let’s create the JavaScript code in the rewardTweet.js file to handle the Reward Link display after tweet is published.
$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");
});
Final part of this plugin will be to handle the above AJAX request and generate the Reward Links, which will be discussed next.
We send the AJAX request to the server with current post ID. Consider the code below for complete implementation.
function get_reward_links(){
global $post;
$tweet_meta_values = get_post_meta($_POST['postID'],'reward_link');
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');
Now we have the completed Reward for Tweet plugin. You can easily insert rewards for each post in the admin dashboard and allow users to download once the tweet is completed. We hope this plugin helps you promote your website and gain newer visitors!
Get The Only Freelancer crash course you will ever need to read!
Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on Building Impressive Presentations with Impress.js. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter
Wednesday, October 31st, 2012 16:07
But wordPress already have plenty of small plugins that does exactly this + more, why go to the extend of doing all coding when you can simply click a button and install it from the WordPress repository ?
Tuesday, October 30th, 2012 00:43
what should I do if I want the visitor have to tweet and follow before the reward link appear?
Thursday, October 11th, 2012 14:25
Hello Rakhitha,
The pluging is working now, I downloaded the plugin from the demo link you provided in the post, I think I did something wrong while creating the pluging by my own, anyway thanks for this awesome giveway,
I wanted to ask you one more thing, how can I make the tweet to get reward section in the post to appear on top section of the post , the tweet to get reward is at the bottom of every post,
please let me know I am looking forward to your reply
thanks
Friday, October 12th, 2012 00:34
Hi Mike
Go to the add_reward_tweet_button function and change the following code with this: http://pastebin.com/DEcZkTaH
Tuesday, October 9th, 2012 05:33
this is exactly what I was looking for months ago, but couldn’t find a simple and really useful solution. Thanks a lot for this.
Monday, October 8th, 2012 14:31
The plugin not working. :( I am seeing this message after activating it.
The plugin generated 259 characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin.
please tell me what wrong I am doing, I really need this plugin working for my blog.
Tuesday, October 9th, 2012 20:07
Hi Mike
I cannot find any issues since its working fine on the demo site. Can u please send a screenshot of what you get ?
If possible check this plugin on a fresh WordPress installation. Some other plugins which you have already installed might have something to do with this error.
Monday, October 8th, 2012 12:15
Awesome! Any chance you can show us how to do the same for facebook likes?
Tuesday, October 9th, 2012 20:05
Thanks for the comment. I’ll check whether Facebook provides similar API for this functionality.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Taavi
Monday, October 8th, 2012 12:15
Awesome! Any chance you can show us how to do the same for facebook likes?
Rakhitha Nimesh
Tuesday, October 9th, 2012 20:05
Thanks for the comment. I’ll check whether Facebook provides similar API for this functionality.
Michaela
Tuesday, October 9th, 2012 12:07
Great article. I must do this!
Mike Wagner
Monday, October 8th, 2012 14:31
The plugin not working. :( I am seeing this message after activating it.
The plugin generated 259 characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin.
please tell me what wrong I am doing, I really need this plugin working for my blog.
Rakhitha Nimesh
Tuesday, October 9th, 2012 20:07
Hi Mike
I cannot find any issues since its working fine on the demo site. Can u please send a screenshot of what you get ?
If possible check this plugin on a fresh WordPress installation. Some other plugins which you have already installed might have something to do with this error.
matoweb
Tuesday, October 9th, 2012 05:33
this is exactly what I was looking for months ago, but couldn’t find a simple and really useful solution. Thanks a lot for this.
Mike Wagner
Thursday, October 11th, 2012 14:25
Hello Rakhitha,
The pluging is working now, I downloaded the plugin from the demo link you provided in the post, I think I did something wrong while creating the pluging by my own, anyway thanks for this awesome giveway,
I wanted to ask you one more thing, how can I make the tweet to get reward section in the post to appear on top section of the post , the tweet to get reward is at the bottom of every post,
please let me know I am looking forward to your reply
thanks
Rakhitha Nimesh
Friday, October 12th, 2012 00:34
Hi Mike
Go to the add_reward_tweet_button function and change the following code with this: http://pastebin.com/DEcZkTaH
Mike Wagner
Friday, October 12th, 2012 02:31
Thanks for your help again, I will try to do it.
Adjie
Saturday, November 24th, 2012 22:29
Excellent plugin, I’ve tested it and brilliant Idea!
Nish
Wednesday, October 31st, 2012 16:07
But wordPress already have plenty of small plugins that does exactly this + more, why go to the extend of doing all coding when you can simply click a button and install it from the WordPress repository ?
sarah
Tuesday, October 30th, 2012 00:43
what should I do if I want the visitor have to tweet and follow before the reward link appear?
Aplicativos
Monday, October 15th, 2012 15:06
awesome post!!! thank you