Installing the Evri Popover Widget on a WordPress Blog
These instructions will assist you in installing Evri’s popover widget. We’ve tested these steps on a self-hosted Wordpress blog running Wordpress 2.7.0. Unfortunately, free Wordpress.com blogs do not support external widgets.
You’ll need access to the blog’s admin console, and the ability to edit simple HTML.
- First, log in to your blog’s admin console. Then on the left sidebar, find the Appearance menu.
- After expanding the Appearance menu, click on Editor.
- Now in the right side bar you should see a list of Theme Files. Click on Footer (footer.php).
- At the bottom of the file, locate the closing body tag </body>. Just above this tag, paste the Evri popover HTML shown below:
- Finally, click Update File and visit your blog. At the bottom of each post, you should find a small Evri icon which will launch the popover when clicked.
<div class="evri-widget-launcher">
<a href="http://www.evri.com/"
title="Get content recommendations from Evri">
Content recommendations from <em>Evri</em>
</a>
</div>
<script
type="text/javascript"
charset="utf-8"
src="http://www.evri.com/widget/javascripts/contentRecommendation.1.js">
</script>
<script type="text/javascript" charset="utf-8">
// For more information on installing this code, visit:
// http://blog.evri.com/index.php/widget-webpage
Evri.$(window).ready(function () {
var documentCSSSelector = 'div.post';
var contentCSSSelector = 'h2, h2 a, div.entry p';
var widget = new Evri.Widget.ContentRecommendation();
widget.popover();
widget.placeInvocationPoints(documentCSSSelector,
contentCSSSelector,
{});
});
</script>
Questions or issues? Please use the comments section on this page.
September 28th, 2008 at 3:41 pm
[...] 2. On the right, click on Footer (footer.php) 3. Now in another browser window, go Evri’s wordpress-widget page and copy the code to your [...]
March 11th, 2009 at 3:46 am
I use the Inanis Glass theme, which is pretty content-heavy, and placing the widget code where you describe doesn’t actually result in any change to my posts. Wondering if you have any other suggestions for where to put the code?
March 11th, 2009 at 2:17 pm
Jeremy, most likely there is a mis-match between what the CSSSelector is looking for and what the theme on your website uses – this is pretty common, especially with Wordpress. In looking at your blog, the content appears to be in divs, specifically in one called “postcont”. Within that, the headlines appear to be in an “h3″ and the content in a “p”, so instead of
var contentCSSSelector = 'h1, p';or
var contentCSSSelector = 'h2, h2 a, div.entry p';try the following line:
var contentCSSSelector = 'div.postcont h3, div.postcont p';Hope that helps – let us know!
March 13th, 2009 at 1:21 am
HI – I have the same issue as above. I’m using the Tropicala1.3 theme and do not see a link for the pop-up on my posts. Appreciate any help. Thanks!
March 17th, 2009 at 6:20 am
Hi,
I’m using wordpress 1.5.2 and I have successfully implemented the code into my footer.php page. How can I have the widget appear within each post instead of at the very bottom of the page; I don’t think many readers will find it there.
Thank you,
Leo
March 17th, 2009 at 11:08 am
Leo, it looks like using the standard CSSSelector for Wordpress:
var contentCSSSelector = 'h2, h2 a, div.entry p';will work for you, rather than the custom selector we suggested for Jeremy. Please let us know if that works!