How to Create a WordPress Reward for Tweet Plugin

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.

Download? See the demo!

Creating the Plugin Files

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.

1

/*

2	Plugin Name: Reward for a Tweet

3	Plugin URI: http://innovativephp.com/

4	Description: Provide additional links or freebies for a tutorial for tweeters.

5	Version: 1.0

6	Author: Rakhitha Nimesh

7	Author URI: http://innovativephp.com/about/

8	License: GPLv2 or later

9

*/

Now you will be able to see the plugin on your admin dashboard with the link to activate the plugin.

Adding Reward for Tweet Link to Posts

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.

1	add_action('add_meta_boxes', 'add_reward_link_box' );

2	function add_reward_link_box()

3

{

4	add_meta_box( 'reward_link_box-id', 'Reward Link', 'display_reward_link_box','post');

5

}

• We can create a custom meta box using the add_meta_box function inside the add_meta_boxesaction.
• First parameter is a unique ID for the meta box.
• Second Parameter is the title of the meta box. I have named it as Reward Link.
• Next parameter is the function name which is used to display the HTML for metabox.
• Fourth parameter is the post type. Since we are using normal posts it will be post. You will have to change this if you are using reward links on custom post types.

Now we can take a look at display_reward_link_box function which is used to display the custom fields.

1	function display_reward_link_box(){

2	global $post;

3	$values = get_post_custom( $post->ID );

4	$reward_link = isset( $values['reward_link'] ) ? esc_attr($values['reward_link'][0] ) : '';

5

6	wp_nonce_field( 'reward_link_box', 'reward_link_box' );

7

8	$html = "<lable>Reward Link</label><input type='text' name='reward_link' value='$reward_link' />";

9	echo $html;

10

}

• Initially we get all the custom meta values related to the current post using get_post_custom function.
• Then we check whether Reward Link exists for the current post using the received post meta values. If a link is already available we insert it as the value of text field.
• Next we create a WordPress nonce value using wp_nonce_field function. This will be used to validate the request when we hit the publish button. Provide a unique key for the parameters of this function.
• Finally we display the HTML label and text field for our Reward Link.

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.

1	add_action( 'save_post', 'reward_link_box_save' );

2	function reward_link_box_save($postID){

3

4	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

5

6	if( !isset( $_POST['reward_link_box'] ) || !wp_verify_nonce($_POST['reward_link_box'], 'reward_link_box' ) ) return;

7

8	if( !current_user_can( 'edit_post' ) ) return;

9

10	if( isset( $_POST['reward_link'] ) )

11	update_post_meta($postID, 'reward_link', esc_attr( $_POST['reward_link'] ) );

12

13

}

• First we add a function called reward_link_box_save to be called after the post is saved to the database.
• Current post ID will be passed automatically to this function after the post is saved.
• WordPress has an autosave feature. We don’t want to save the reward link on autosave. So we check for auto save and return from the function.
• Then we check whether the form is valid for the current request using the nonce value we created earlier and returns in case it is not valid.
• Then we check whether the current user is allowed to edit posts.
• Once all the above validations are successfully completed, we save the Reward Link with the keyreward_link using update_post_meta function.

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.

Configuring Styles and Scripts

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.

1	function apply_reward_tweet_scripts() {

2	global $post;

3

4	wp_enqueue_script('jquery');

5

6	wp_register_script("twWidget", "http://platform.twitter.com/widgets.js");

7	wp_enqueue_script('twWidget');

8

9	wp_register_script('rewardTweet', plugins_url('js/rewardTweet.js', __FILE__));

10	wp_enqueue_script('rewardTweet');

11

12	wp_register_style('rewardTweetStyles', plugins_url('css/rewardTweet.css',__FILE__));

13	wp_enqueue_style('rewardTweetStyles');

14

15	$config_array = array(

16	'rewardAjaxUrl' => admin_url('admin-ajax.php'),

17	'rewardNonce' => wp_create_nonce('reward-nonce'),

18	'rewardPost' => $post->ID

19

);

20

21	wp_localize_script('rewardTweet', 'rewardData', $config_array);

22

23

}

24	add_action('wp_enqueue_scripts', 'apply_reward_tweet_scripts');

• First we call the apply_reward_tweet_scripts function to enque scripts.
• Inside the function we include jquery and Twitter widget using wp_enqueue_script function. wp_enqueue_script is the recommended way of inserting scripts securely in WordPress.
• Twitter widget.js file is required for generating the tweet button and styles.
• Then we include custom js script called rewardTweet.js and custom styles called rewardTweet.css to define our plugin functions and styles.
• Finally we define some values we need inside the js script in the $config_array. Ajax URL will be the admin-ajax.php file of WordPress. Nonce value is used to validate the request and current post ID.
• Then we use wp_localize_script to add the above values to the js file.First parameter is the name used to include the custom js using wp_enqueue_script.
• Second parameter will be the name of the object which will be used to access data and the third parameter is the array of values to be included.

Next we have to display the tweet button on each post. Let’s move onto displaying tweet button.

Display 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.

1	function add_reward_tweet_button($content){

2	global $post;

3

4	$tweet_meta_values = get_post_meta($post->ID,'reward_link');

5

6	$tweet_text = $post->post_title." - ".get_site_url();

7

8	if(is_single() && isset($tweet_meta_values[0]) && $tweet_meta_values[0] != '' ){

9	return $content."<div class='tw_reward_panel' ><divclass='tw_reward_title'>Tweet and Get Rewarded

10	<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>

11	<div class='tw_reward_links'><a id='rewardLink' href=''>Click Here To Get Reward Link</a><div style='clear:both'></div></div></div>";

12

}else{

13	return $content;

14

}

15

16

}

17	add_filter('the_content','add_reward_tweet_button');

• Initially we call the add_reward_tweet_button function on the_content filter. This filter will be applied for content of every post and page.
• Page or post content will be automatically passed to this function.
• Then we get the custom meta values of the current post.
• We don’t want to include this Reward Link in summary, category, archive, tag pages. We call the functionis_single to ensure that this is the detailed post page.
• Also we check whether Reward Link exists for current post and display the tweet button.
• Reward Panel will not be visible if the post does not have a reward link.

Now you should be able to see the Reward Panel under each post with a reward link as shown in the screen below.

Provide Download Links On Tweet

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 therewardTweet.js file to handle the Reward Link display after tweet is published.

1	$jq =jQuery.noConflict();

2

3	twttr.events.bind('tweet', function(event) {

4	$jq.post(rewardData.rewardAjaxUrl, {

5	action:"get_reward_links",

6	nonce:rewardData.rewardNonce,

7	postID :rewardData.rewardPost

8	}, function(result, textStatus) {

9

10	if(result.status == 'success'){

11	$jq("#rewardLink").attr("href",result.value);

12	$jq("#rewardLink").show();

13

}

14

15	}, "json");

16

17

});

• First line will prevent jQuery from being conflict with other libraries.
• Next we use twttr.events.bind(‘tweet’, function(event) to bind a custom function to our Tweet button. This function will be executed once user publishes a Tweet.
• Inside the function we are using rewardData object to get the data which we inserted to the script usingwp_localize_script.
• Next we use an action called get_reward_links for the AJAX request. Using the action in WordPress will be explained in the next section.
• Once the request is successfully completed you will get a JSON object containing the reward link.
• We check the status of the result and assign the Reward Link to the Download button and display it to the user.

Final part of this plugin will be to handle the above AJAX request and generate the Reward Links, which will be discussed next.

Generating Reward Link

We send the AJAX request to the server with current post ID. Consider the code below for complete implementation.

1	function get_reward_links(){

2	global $post;

3

4	$tweet_meta_values = get_post_meta($_POST['postID'],'reward_link');

5	if(isset($tweet_meta_values[0]) && $tweet_meta_values[0] != '' ){

6	echojson_encode(array("value"=>$tweet_meta_values[0],"status"=>"success"));exit;

7

}else{

8	echo json_encode(array("status"=>"error"));exit;

9

}

10

11

}

12	add_action('wp_ajax_nopriv_get_reward_links', 'get_reward_links');

13	add_action('wp_ajax_get_reward_links', 'get_reward_links');

• First we use the action defined in previous section and configure the AJAX requests handling function using wp_ajax_nopriv_get_reward_links and wp_ajax_get_reward_links.
• wp_ajax_nopriv is used for users who are not logged into the site.
• wp_ajax is used for users who are logged into the site.
• Inside the get_reward_links function we get the reward link for the current post and sends it back to browser with status in JSON encoded object.
• Previous JavaScript code will decode the JSON object and display the Reward Links for the user.

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!