Four Creative Ways To Use The Integration Tab In Our ePanel Theme Options

Whenever you need to add functionality to your theme, the first thing you should do is search for a plugin that can do the job for you. Using a plugin will make it easier to change themes in the future, and they are often maintained for you which means less work on your end. In a perfect world, there would be a great free plugin for every situation, but sometimes there just isn’t a good solution. In these cases, you have no choice but to get your hands dirty and code something yourself. Editing theme files and creating custom plugins, however, can prove a daunting task.

This is why we added the “Integration” tab in our ePanel Theme Options. This tab lets you add custom code to key areas of your theme without having to edit any files yourself! Furthermore, these changes are saved to the database, which means they are never lost when you update your theme. Let’s go over a few creative ways that we can use this feature.

The best way to build a relationship with your visitors is to get them to subscribe to your blog. Building an RSS & Email readership is a must for any online publication. There are many options out there, but one of the most popular free ones is Google Feedburner. Once you setup Feedburner, you will need to give your visitors a way to subscribe. The best way to do this is to allow them to subscribe via Email through an online form. This form should be placed on your website in a prime location, my favorite of which is right below each of your posts. If a visitor has read your entire article, then there is a good chance that they are interested in your blog, and whiling to subscribe. There are a few Feedburner plugins out there, but I couldn’t find one that would place the opt-in form in the correct location!

To add an opt-in form at the bottom of your posts, you can use the “Add code to the bottom of your posts, before the comments” field under the ePanel > Integration tab. Add the following code while replacing “BLOGNAME” with your Feedburner website name.

<div style="clear: both; width: 100%; text-align: center;">
<h3>Subscribe To Our Blog</h3>
<form style="padding:10px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=freewordpresslayoutsblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
	<input type="text" placeholder="email address" style="width:50%; padding: 10px 20px;" name="email"/>
	<input type="hidden" value="BLOGNAME" name="uri"/>
	<input type="hidden" name="loc" value="en_US"/>
	<input style="width: 20%; background-color: #5cbeda; border: none; padding: 10px 20px; color:#fff; font-weight: bold; margin-left: 20px;" type="submit" value="Subscribe" />
</form>
</div>

There are many social sharing plugins out there, but sometimes they just aren’t exactly what you are looking for. Another option is to embed the social sharing icons manually using our Integration tabs. In this example, I will go over how to integrate the AddThis icons without using their plugin. This same technique could be applied to other services as well, or to code that you have created yourself.

You can go to AddThis.com to create your own social sharing bar. Once you have gone through the creation process, the website will give you a code that needs to be embedded into the BODY of your website. For this, we can use the “Add code to the < body >” field under the ePanel > Integration tab. Simply paste the code given which, depending on the layout and buttons you chose, will look something like this:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-52670fbb0a2b8f78"></script>
<!-- AddThis Button END -->

Once added, the share icons will appear on every page of your website.

Sometimes you will want to place advertisements on the top of your posts. This is a prime viewing area with high engagement, and it will often sell well. There are many ad networks out there, such as Google Adsense and BuySellAds, and sometimes it’s hard to find a plugin that will put your advertisement in the right spot. In these cases, our Integration tab can come in handy. Depending on your ad network, you will be given a snippet of code to add to your website. If you are using Adsense, then it might look something like this:

<div style="width: 100%; text-align-center;">
<script type="text/javascript">
google_ad_client = "pub-";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_color_border = "FFFFFF";
google_color_bg = "0000FF";
google_color_link = "FFFFFF";
google_color_text = "000000";
google_color_url = "008000";
google_ui_features = "rc:0";
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div>

This code can be placed within the “Add code to the top of your posts” field within the ePanel > Integration tab. Once added, your advertisement will be displayed on each post before the post content. You can also add ads below your posts using the “Add code to the bottom of your posts, before the comments” field.

There are many tracking sites out there that you can use the collect data about your visitors. Whenever you use of these services, you will need to copy and paste and piece of code into every page of your website, and there isn’t always a plugin for the particular service you are using. One example of a tracking website is Google Analytics, which is a great way to observe your website’s traffic statistics. In order to install Google Analytics on your website, you must first place the tracking code on every page of your website. This can be done easily using the BODY integration area in ePanel. Under the ePanel > Integration tab, locate the “Add code to the < head > of your blog” field and paste in the code that Google has given you. It will look something like this:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'ACCOUNT']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

That’s it, you’re done! Google will now track every visitor that hits any page on your website. This same method can be applied to other services as well, or to any code that needs to be integrated site-wide into the head of your page.

Applying These Techniques To Other Services

There are countess other ways that these Integration settings can be used. Hopefully these examples, even if they were not applicable to your website, showcase how similar features might be integrated.