Elegant Themes Blog

Stay up to date with our most recent news and updates

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

Posted on October 29 by in Resources | 39 comments

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.

icon-2

Adding A Feedburner Subscribe Form To Posts

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>

icon-3

Adding Floating Share Icons To Your Website

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.

icon-4

Add Advertisements To The Top Of Posts

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.

icon-1

Installing Website Analytics Services

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.

39 Comments

  1. ePanel is very easy to use then after thanks for this Four tips to add in your option panel. Specially Analytic

    • Yes, it is very simple and easy to use. Great option panel

      @ET team, Thanks for making it more simplified.

  2. Great i did it with the social icon, and i love it, thank you

  3. However, google suggests that the analytics tracking code be added just before the closing head tag. So why would you add it within the body area of the site?

    • Oops, my mistake. Google has two version of their tracking code, and it’s the legacy version that should be placed into the body. I have updated the post to instruct users to input the code into the head field of ePanel.

      • Hi Nick,

        I think these posts are extremely valuable to members like myself whom are not coders or programmers.

        You should put an “Advanced Training” tab/page inside the member’s area that includes info such as this post and the Child Theme post, among others.

        It’s great material for your blog, but it would be nice to have each piece of info at my fingertips when I log into the member’s area.

        Just a suggestion.

        Thanks,
        Brandon

        • Nick,
          I agree with Brandon. There are so many things to take care of that it’s often hard to learn all the ins and outs of the theme and it’s use.

          A training section dedicated to specific topics (not forum posts, but even derived from the posts) would greatly enhance the ability to maximize use of the various pieces.

          My focus has been not been on the new themes, but on being able to use the existing theme(s) I have installed.

          Especially with Diva coming up a specific detailed training is going to make life easier for us as well as the moderators.

          Thanks for all the great work.
          Brad

      • Hey Nick,

        I bumped into the two GA codes issue too!

        One of the key differences is that the new code is still in beta and won’t allow you to update it to include demographic & interest based info. Here’s the link to how to implement this with the old GA tag. Note that you’ll need to update your privacy T’s and C’s on sites you do this to.

      • Nick, my theme (Aggregate) advises in epanel to put Google Analytics code in the body under “Code Integration”. I have no idea if my code is Legacy or not (I’ve had my code in this spot for almost 2 yrs).

        I just moved it to the field that says “head”. Was this correct or should I move it back to “body”?

        • When you log in to Google Analytics, it should tell you before you copy your code where it should be pasted. I’m not sure which version you are using.

        • @Tracy, you should put the code in the (head) area of ePanel > Integration settings. Cheers

          • GA just says to paste the code wherever I need tracking, so which page in epanel? HEAD or BODY?

  4. I agree with Dipak. A nice user friendly way of getting the analytics code on my site. Thanks so much!

  5. Newbie bloggers are always looking for such a wise tips to perform faster editing of the theme using the ET theme options panel. Thanks for the guide.

  6. The social floating icons using ET Integration !! Totally new for me. Lemme remove Addthis plugin from my client website now. less plugins faster loading.

  7. Thanks for another great article Nick! I got my share icons and google analytics integrated through the ePanel. In the past, I had a share buttons plugin installed on my blog before I realized it was slowing down my site. It’s much quicker now. I am planning to have ads in the future so thanks a lot for the tip.

  8. This blog is worth gold to me. Thanks very much for so many great tips and freebies!

  9. Thanks Nick. I wasn’t actually much of a blog reader, but I do read this one regularly. Great tips, really helps.

  10. i’ve been shrouded by google ads, much like Hart in The Paper Chase, with no hope of being unshrouded. any suggestions for similar ad companies, to raise a bit of funding?

  11. Thank you Nick, especially for the Adding Floating Share Icons code.

    I learned a lot in the last months from you and the members of this community. You made my life easier.

  12. I’ve been ignoring the integration tab all this while and do stuff in a crazy way but now I know better. Thanks for the enlightenment Nick.

  13. I may be exposing my WordPress ignorance. I worked with HTML sites for years. However, from day one I have never assumed that I can do anything that I used to do in the old days in the “Integration” fields. And until I read THIS post — I STILL did not know what I could do there.

    We see posts all the time about using this plugin or that. Making a change to the function PHP file.

    Some of us need examples to see what we can do — that’s why I *LOVE LOVE LOVE* this post. Can’t wait to implement all of these. Okay — not all but I’m definitely going for a couple of them.

    Please continue these wonderful blogs! So helpful!

  14. I am LOVING these posts guys. Please, please, PLEASE keep them coming!
    Thank you :)

  15. Useful tips, it will help to insert code directly without going to editor mode

  16. Useful, especially the Google Analytics thread.
    Thank You!

  17. Yes. Great article.

    BTW Nick, any news about the next theme? Is almost november…

  18. Dear Nick,

    The E panel is very easy to use thanks to the four tips you posted it makes me know better about the E panel theme. Thanks

  19. Great post Nick, would be great to see an ongoing series of these kinds of post leaning more towards beginner developers. I often find there’s a tendency to really overcomplicate things that turn out to be pretty simple once you see how it could / should be done.

  20. Very useful information related to google analytics. Thanks for sharing.

  21. I’ve been using and customizing wp themes for over 3 years, this is the first premium theme I’ve had to work with and it’s the most non-intuitive and complicated theme I’ve ever encountered. over 6 hours with support and I can’t even change the header image. All the great wp features you’d expect are tweaked beyond recognition. I can’t even function as a developer here.

  22. I work hard and acquire houses one at a time, learning
    as I go. The pros and cons identified above are certainly not meant to be an exhaustive compilation of all
    the issues that you should consider when purchasing an investment property.
    EST for Jo – Jo and Christopher’s question and answer session on Google Plus
    you will be even more prepared for house hunting.

  23. Hi Nick, I’m running the Divi theme and posted my Google Analytics tracking code into the section of the Integration tab, and now my analytics data is showing up on the actual pages of my website where visitors can see it. I don’t want it to display on my pages, I just want the tracking code to be working in the background gathering data for my eyes only. Can you help?

    • If you need help with anything, please open a ticket in our support forums so that our team can assist you.

  24. Hi

    i was wondering if i can integrate a crowdfunding plugin in the Divi theme or in any other theme made by elegant themes

    thank you

    waiting on your reply

  25. We just had this website created using the divi theme. Can you tell me how I would enter facebook conversion tracking info into the header of the applicable individual pages?
    Thank you in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *

Join 261,586 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This