Reftagger v2 Beta Launch

Reftagger has been improving the lives of bloggers and blog readers across the internet for several years, but we have an improved version nearly ready to share with the world. 

I have it installed on both of the Logos blogs that I manage, and couldn't be more pleased. Here's how it looks on Blog.Faithlife.com.

The mechanics of sharing are greatly improved as well. Those social icons in the top-right make it possible for blog readers to share on their social network of choice in just a single click. 

To use Reftagger v2 Beta on your blog or website, add the following script to the bottom of your HTML, just above the closing body tag:

 

<script>

    var refTagger = {

        settings: {}

    };

    (function(d, t) {

        var g = d.createElement(t), s = d.getElementsByTagName(t)[0];

        g.src = '//bible.logos.com/v2/Reftagger.js';

        s.parentNode.insertBefore(g, s);

    }(document, 'script'));

</script>

 

When the updated Reftagger.com launches it will provide tooling for generating the appropriate script for your desired configuration but we wanted to get this beta out to those users who are comfortable editing JavaScript by hand.

The same configuration options from Reftagger v1 are available in Reftagger v2, but are configured slightly differently. Instead of adding "Logos.ReferenceTagging.lbsLinksOpenNewWindow = true;" to your script you would instead add "refTagger.settings.linksOpenNewWindow = true;" Note that property names no longer have an "lbs" prefix.

There a couple notable new features in v2 that require special configuration:

 

Spanish support

If you replace '//bible.logos.com/v2/Reftagger.js' with '//bible.logos.com/v2/Reftagger.es.js' Reftagger will parse against Spanish references (e.g. Juan 3:16 instead of John 3:16). Additionally, anyone following Reftagger links in a browser with a Spanish locale set should be taken to a Spanish Bible instead of an English one (unless a specific translation is specified by the reference, e.g. John 3:16 (NIV)).

 

Customizable appearance

Reftagger has two themes, a light and a dark one. To use the dark one add "refTagger.settings.tooltipStyle = 'dark';" just before the "(function(d, t) {" line. To customize Reftagger’s appearance beyond the two themes, add the following to your script tag:

 

refTagger.settings.customStyle = {

    heading: {

        backgroundColor: '<hex color code>',

        color: '<hex color code>',

        fontFamily: '<comma-delimited list of font names>'

    },

    body: {

        fontFamily: '<comma-delimited list of font names >',

        color: '<hex color code>'

    }

};

 

Replace the values inside the angle brackets with appropriate values to create your own custom theme. For example:

 

refTagger.settings.customStyle = {

    heading: {

        backgroundColor: '#2A91B0',

        color: '#FFF',

        fontFamily: 'Georgia'

    },

    body: {

        fontFamily: 'Calibri',

        color: '#333'

    }

};

Reply below when you install Reftagger V2 on your website. We want to see it in action!