Installing the Evri Sidebar Widget on a Wordpress Blog

These instructions will assist you in installing Evri’s sidebar 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.

  1. First, log in to your blog’s admin console. Then on the left sidebar, find the Appearance menu.
    appearance menu in left sidebar of admin screen
  2. After expanding the Appearance menu, click on Widgets.
    Appearance-Widgets
  3. From the list of widgets, scroll down to Text and click on Add.
    Add-Text-Widget
  4. On the right hand side of the screen, find the Text widget you just added and click on Edit.
    Widget-Text-Edit
  5. Paste the following code into the text box:
  6. <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/jirafa.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 contentCSSSelector = 'h2, h2 a, div.entry p';
      var options = {};
      var widget = new Evri.Widget.Jirafa(options);<
      widget.render();
      widget.sendContentForCSSSelector(contentCSSSelector);
    });
    </script>

    Note where the content CSSSelector is – you may have to change this later!
    wordpressjirafainstall

  7. Click on Done, drag the widget up or down to be in the order you want, and click on Save Changes.

Take a look at what the sidebar widget looks like on your website. If it’s coming up blank, you will likely need to adjust the CSSSelector – this common with themes, which tend to rename the standard divs. More on adjusting the CSSSelector on our support page.

3 Responses to “Installing the Evri Sidebar Widget on a Wordpress Blog”

  1. Janet Palma Says:

    This did not work for me on Wordpress. All I got in the box was the code no matter what numbers I put in for the CSSSelector.

  2. Alharary Says:

    thank you very much very helpful

  3. malcolm Says:

    From the code snippet above there is a floating “<” that causes a JS error for me

    var widget = new Evri.Widget.Jirafa(options);<

    so remove it
    var widget = new Evri.Widget.Jirafa(options);

    and it works fine for me now on Joomla using
    var contentCSSSelector = ‘h2, h1 a, div.article-content p’;

    and the ‘PHP Module’ which allows JS code to run in a ‘blank sidebar’

    http://code.google.com/p/joomla-php/downloads/list

    Enjoy

Leave a Reply