Convert API to Wordpress Plugin - wordpress

Question

I have a created a table that use simple JS and an API to pull in info about our Android App. We would like to have this code on multiple pages
<div class="api">
<div style="margin: 0 auto; max-width: 700px;">
<div style="float: left;">
<table style="background-color: #e7e7e27; border-color: #e2e2e2;">
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/<!---package name--->" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/Google_Play_Store_96.png" style="width:90px; border:0" alt="<!---Verbage--->" title="<!---Verbage--->">
</a>
</td>
</table>
</div>
<div style="float: left;">
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/<!---package name--->' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
Not the prettiest code but it does the job that I we are wanting. I would like to turn this into a plugin with a shortcode to reference it. I know that this is probably bigger then I expect and I have a good understanding of HTML and wordpress but this is the first plugin I have created.
Thanks,
Grady

Answer 1

A plugin to do this is fairly trivial since you are just echoing static data.
class My_App_Data {
function __construct() {
add_shortcode('app_data',array($this,'app_data_shortcode'));
}
function app_data_shortcode() { ?>
<div class="api">
<div style="margin: 0 auto; max-width: 700px;">
<div style="float: left;">
<table style="background-color: #e7e7e27; border-color: #e2e2e2;">
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/<!---package name--->" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/Google_Play_Store_96.png" style="width:90px; border:0" alt="<!---Verbage--->" title="<!---Verbage--->">
</a>
</td>
</table>
</div>
<div style="float: left;">
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/<!---package name--->' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div><?php
}
}
new My_App_data();
You can now use [app_data /] to display the markup.
You will need to construct a proper plugin header, and use a better name for the class :).
Reference
https://codex.wordpress.org/Writing_a_Plugin