Better Buttons - Documentation v1.0
Amazon Affiliate Call to Action buttons users will actually click.
Table of Contents
- Installation
- Configuring the Plugin
- Adding Buttons and using the shortcodes
- Shortcode Examples
- Code Reference
1. Installation
Installing the plugin is easy, and can be done through simply uploading the ZIP package into Wordpress admin.
- Firstly, login to your wp-admin with an account that has administrative privileges.
- Navigate and click on the Plugin section in the left hand menu.
- On the top left side of this page click the Add New button to add a new Plugin.
- This will take you to the Plugin Installation page. From there click the Upload Plugin button in the top left corner. Click choose file and choose and navigate to the ZIP file you downloaded from CodeCanyon. Finally click Install Now.
- Once installed go back to the Plugins pack by clicking on the Plugin option once again on the left hand menu. Find the Better Buttons Plugin in the table and click Activate.
2. Configuring the Plugin
Once you have successfully installed the Plugin you must configure it with both your Amazon Affiliate Tag and your Amazon API Keys.
- To find the settings page, once logged in to the Wordpress admin hover over the Settings option on the left hand menu and then click on the Better Buttons Settings option from the drop-down menu.
- Once on this page, you must enter your Amazon API Access Key, Secret Key, Affiliate tag and Locale
- Access and Secrey Key - Follow the Instructions here to get the keys. You will need to signup for an AWS account. These keys are used to communicate with the Amazon API's to automatically update the pricing and pictures in the buttons or box.
- Amazon Affiliate Tag - This is your Amazon Associate tag. It is usually a word followed by a number (somename-20). If you haven't already signed up for the Affiliate program you can do so here.
- Amazon Locale - This is simply the store version you wish to use.
- Once you have input the above information click Save Changes. Your settings are now saved and the Plugin is fully setup for use.
3. Adding Buttons and using the shortcodes
The Plugin uses short-codes to implement the Buttons into a post. Use the shortcode below and paste it into your post and change the shortcodes settings. Below is an example of a button's short-code
[betterbutton type="box" asin="B075TWLZ18" color="blue"]
This will result in a button like the one shown below.
As you can see the pricing information and the image of the product are automatically imported. When the user clicks the Buy Now button they will be directed to amazon through your affiliate link. The short-code takes 3 inputs the type, asin and color. When inputting these ensure that they are lowercase otherwise the button may not work.
Shortcode Attributes
- type - box, rectangle or round
- asin - This is the amazon product identification number. This can be found on the product's page you are linking by clicking CTRL+F and typing ASIN in the search box or by looking at the product URL. https://www.amazon.com/dp/B00IMJ0UZG/ref=sspa_dk_detail_5?psc=1 , the highlighted part is the products ASIN.
- color - red,black,yellow,blue,light-blue,green,red-outline,black-outline, yellow-outline, light-blue-outline, green-outline, blue-outline
Shortcode Examples
Amazon Rectangle
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="blue"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="red"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="green"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="light-blue"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="yellow"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="black"]
Amazon Round
[betterbutton type="round" asin="B00IMJ0UZG" color="blue"]
[betterbutton type="round" asin="B00IMJ0UZG" color="red"]
[betterbutton type="round" asin="B00IMJ0UZG" color="green"]
[betterbutton type="round" asin="B00IMJ0UZG" color="light-blue"]
[betterbutton type="round" asin="B00IMJ0UZG" color="yellow"]
[betterbutton type="round" asin="B00IMJ0UZG" color="black"]
Amazon Rectangle Outline
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="blue-outline"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="red-outline"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="green-outline"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="light-blue-outline"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="yellow-outline"]
[betterbutton type="rectangle" asin="B00IMJ0UZG" color="black-outline"]
Amazon Round Outline
[betterbutton type="round" asin="B00IMJ0UZG" color="blue-outline"]
[betterbutton type="round" asin="B00IMJ0UZG" color="red-outline"]
[betterbutton type="round" asin="B00IMJ0UZG" color="green-outline"]
[betterbutton type="round" asin="B00IMJ0UZG" color="light-blue-outline"]
[betterbutton type="round" asin="B00IMJ0UZG" color="yellow-outline"]
[betterbutton type="round" asin="B00IMJ0UZG" color="black-outline"]
Amazon Buy Now Box
Code Reference
All code is heavily documented. The Plugin is broken up into components for your convenience if you wish to make any changes.
- betterbuttons.php
- Contains the basic functions of the Plugin and requires the other components. Contains the API interactions and Database functions. Also has the wp_event that updates the products each hour.
- betterbuttons-shortcodes.php
- Contains the code for the shortcode. Interacts with the functions in the main php file and returns html based on the attributes of the shortcode.
- betterbuttons-settings.php
- Contains the php and html for the settings page.
- includes/css
- Contains all the styles for the plugin. Styles.css contains all the styles for the buttons aswell as this help file. Also included are bootstrap and fontawesome.
- includes/webfonts
- Contains the webfonts for fontawesome.