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

Last Updated on September 23, 2022 by 55 Comments

Four Creative Ways To Use The Integration Tab In Our ePanel Theme Options
Blog / Resources / 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

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.

Divi

Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

WordPress vs Medium (2024) — Where Should You Blog?

WordPress vs Medium (2024) — Where Should You Blog?

Updated on February 14, 2024 in Resources

If there is one question that goes back to the very beginning of blogging, it’s “what blogging platform should I use?” Everyone asks this question (to Google, most likely), and everyone gets bombarded with a thousand different answers. That’s primarily because there are so...

View Full Post
9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Updated on January 23, 2023 in Resources

There are lots of nonprofit organizations across the globe. Just about every one of them needs a well-designed website to tell their story and receive donations to help their causes. Divi is an excellent theme for nonprofits such as charities. Fortunately, you don’t have to start from scratch for...

View Full Post

55 Comments

  1. I want to add a facebook ad pixel to a special blog post and only that blog post to create a custom audience.

    How can I do that?

    • Hi Mark, we’re going to be publishing a post on the facebook tracking pixel soon. Hopefully we’ll be able to address this then 🙂

  2. What if I want to add a php code like this before the post :

    seems it doesn’t work here..

    Please let me know how to do that, I have to insert this to the single.php in order to work

  3. I have difficulties with the E-pal, for some reason it does not seem te work. my logo and favicon won’t show. How can i fix this?

  4. Nick, just wanted to point out that it would be better if the feature was labelled “add code to the of every page” as that is what it does. Doesn’t matter if the pages are blogs or static content. Darn easy feature to use if one doesn’t get mislead by the title.

  5. Is it possible to insert tracking codes per page using ePanel? I need to install different tracking codes on different pages (conversion pixels, checkout pixels, etc).

    • Did you ever find out how to add tracking codes on a per page or post basis?

    • Hey Thomas, if you’re still have trouble with this I’d recommend using the support forum. That’s the best place for us to help you with any epanel issues or questions. If your issue is not addressed in the forum already you can create a new ticket and we’ll help you out.

  6. I have issues with the GA code. I just upgrade my site to use the Divi Theme, which I love, but no matter if I put the code in the body or in the head, it keeps taking the .. tags off the code, so the codes displays on the page.
    Any ideas?

  7. Problem. Every time I try to put in a code into the head section of epanel’s integration, it converts some of the < to < and most importantly, my script doesn't work, it shows up as code at the top of the page.

    Is there a special way we're supposed to be inputting the script code?

    Thanks

    • I even tried skipping the code and just put in a simple conditional browser statement:

      Should show up for only internet explorer.

      Even that didn’t work!

      • And yes, I did already enable the button for header code in my epanel settings.

  8. Most Google Analytics accounts are now using Universal Analytics.

    To add it to your website in the ePanel/Integration section, you will want to add your Universal Analytics tracking code before the closing head tag:

    Google Universal Analytics Code Snippet

    So instead of using the ePanel/Integration field that reads:

    Add code to the (good for tracking codes such as google analytics)

    You will want to use the field above it that reads:

    Add code to the of your blog

    You can verify this process at this webpage:

    https://support.google.com/analytics/answer/1008080?hl=en#GA

  9. I’m trying to put the Pinterest code that it says to put into the “HEAD or equivalent” section to verify my site with them. However, I tried putting their code in both the HEAD and BODY sections and neither seem to work.

    Does anybody seem to have an idea where to put the Pinterest meta info? The code Pinterest gives me looks like this: <meta name="p:domain_verify" content=yaddayadda"

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

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

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

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

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

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

  16. nice and well done.
    useful info.

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

  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. Yes. Great article.

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

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

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

  22. I am LOVING these posts guys. Please, please, PLEASE keep them coming!
    Thank you 🙂

  23. 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!

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

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

  26. 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?

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

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

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

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

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

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

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

      • Nick you may want to update your post again as this sentence:
        “This can be done easily using the BODY integration area in ePanel”
        under Analytics was not updated along with the sentence that follows it:
        “Under the ePanel > Integration tab, locate the ‘Add code to the of your blog’ field…”

      • 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”?

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

          • Thank you, I appreciate it!!

          • GA just says to paste the code wherever I need tracking, so which page in epanel? HEAD or 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.

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

      • 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

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

  35. Un bien bel outils

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

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi