A few days ago someone asked if we would make it possible to use RefTagger on a Blogger blog. I was happy to let him know that RefTagger works very well with Blogger, and I explained to him two ways to get it up and running on his blog in just a couple of minutes.
It occurred to me that not everyone who has a blog is used to messing with code and editing template files, so I thought I’d do a brief tutorial here on the blog.
If you use Google’s Blogger and would like to add RefTagger to your site, here are two methods for setting it up.
Method 1: Adding a Page Element
Perhaps the simplest way for beginners to get RefTagger up and running is to add a page element. From your Blogger dashboard, click “Layout.” You’ll be taken by default to the “Page Elements” tab. Click “Add a Page Element” at the bottom of the page (not the one in the sidebar), and choose “HTML/JavaScript.” Leave the title blank, and paste in the customizable code that you get from the RefTagger page. Then click “Save.” Blogger should add the new page element to the bottom of your layout page automatically. If it appears in your sidebar, simply drag it to the very bottom of the footer. If you make any changes, make sure to save it before leaving the page.
When you’re done, your page should look something like this:
Method 2: Modifying Your Template File
The alternate method is to manually add the code before the closing body tag in your template file. From your Blogger dashboard, click “Layout.” Then click “Edit HTML.” Scroll all the way to the bottom of the code and paste in the customizable code that you get from the RefTagger page right before the closing body tag (i.e., right before </body>). Then click “Save Template.”
That’s it. RefTagger should now be up and running on your Blogger blog.
If you have any trouble or would like to see a tutorial for another blogging platform, leave a comment on this post or send an email to reftagger@logos.com.
Thanks for the blog post, Phil. I wanted to try RefTagger but didn't have the time to figure out where to put the coding on blogger. I pasted it in just like you explained and it works great!
Phil, thanks for this post.
I added RefTagger to my blog a few weeks ago & it is brilliant.
Wow! I can't believe this is possible.
I noticed that Colossians and Ephesians don't seem to be referencing on my site.
Stan,
I took a look at your site, and it appears that your code has some stuff in it that is interfering with RefTagger's ability to recognize some of your references.
The code span class="blsp-spelling-error" id="SPELLING_ERROR_2" is wrapped around "Eph" breaking it's connection with 6:10-18. The same thing is going on with your Colossians reference. If you strip out that unnecessary code, RefTagger will tag these properly.
Hope this helps.
When I open Dashboard, Layout is not an option. I have: Posting, Settings and Template.
Hmm. Perhaps you never updated to the new blogger.
You should still be able to use the second method. It's likely that you'll find the place to add the code under the Template tab.
Let me know if I can help further.
Phil,
You're my hero!
I hate it when I don't click "done spellchecking".
Lesson learned.
This is an amazing tool.
I think you can probably find a better hero, :) but I'm glad that did it for you. Enjoy!
Hi Phil
I am very new to the 'blogosphere, but I am thoroughly enjoying and growing in the Lord as I learn new things every day. I am also excited by all the new tech stuff I am learning. Even my very computer tech son is impressed. The real reason I am writing is to thank you for this wonderful tool. I have been copying and pasting from another site or typing out directly, which takes some time. I have just pasted it into my blogger blog, and itimmediately converted every Bible ref to your style. I know this will help further the Gospel of Christ as we each move in our lives for Him.
In Jesus, Jessie
Hi again.
I just want to say that I have managed to now add the RefTagger tool to my blog. This is an awesome tool and such fun to play around with. Thank you so much for this.
In Jesus
Jessie
Phil,
thank you for bringing this to my attention. This is an incredible tool and a blessing. You rock brother.
Blessings!
bjnotbk
You're very welcome. Glad you're finding it helpful!
could you check out my blog to see what i'm doing wrong. i can't figure out why it picks it up only sometimes. thanks
How do I add this to Typepad?
The only option that I'm aware of that works is to use an Advanced Template that let's you edit the code and paste the customizable RefTagger code into the footer right before the closing body tag.
Hey Phil you're a genius! Thank you very much for sharing this cool code with others. It's brill and a real ministry in itself.
God bless . . .
Bob
I have been using RefTagger on my own blog site, and it has been very helpful. Thank you for developing this program, Phil, and kudos on a job well done! Most people are too lazy to look up a bunch of Scripture verses, and this way, they can see it right away! I think this is helpful for causing people to become a bit more familiar with Scripture, as well, because it exposes them to what the verse actually says.
Hi Phil,
Thanks so much for this great tool, which is so great at other people's sites, but not, yet, mine. :) The code actually displays in the body of a new blog post, but when I try and preview it - nothing. I am beginning to mutter decidedly unbiblical things. I've tried both methods you've described for Blogspot. Any thoughts? Blessings, brother.
Hi, Rachael, I'd be happy to try to help. What I've done with some other Blogger folks is have them add philgons@gmail.com as a contributor to their blog and then, once I accept, make me a temporary admin. I'd be happy to do that for you if you'd like.
Hi Phil,
I'm so sorry it's taken me this long to see this! I'll do that tonight, (if I can figure that part out! :) )
rs
This is awesome! I adding it to my blogger and told everyone I know who blogs!! GREAT!! Very kind of you to offer it for free for those of us who blog on a shoestring, and a thin shoestring at that!
I saw this on Desiring God and thought that it would be a great addition to my website, especially the devotionals. It does a fine job of creating links, but it does not do pop-ups. I am not sure why. I have a test post up, if you would like to look at it, as previous posts were hand linked.
Thanks
Rick
Hi,
I was wondering if you have looking into the popup windows not appearing in blogger, that I noted. I am using the code now and it links over to the appropriate web page, but no popup. I am using Firefox, but IE failed to make popups as well.
Rick
Functional-wise, the code works. However, the tooltips don't appear anywhere in proximity to my verse reference that calls them. It appears either way of to the right or down below.
I have moved the js code around in my template and it makes no difference, it still appears no where near the verse that it references.
Jaycen
Hmm. Here's what I see: http://screencast.com/t/Sj8DVwepZz. What browser are you using?
Thanks for the reply! I'm using IE7 (Ver. 7.0.5730.11) and my screen resolution is 1680x1050.
Here's what I see.... http://screencast.com/t/6XXTrpdM1
Hmm. Yep. I'm seeing the same thing in IE7. I'll get this reported, and we'll look into it.
Any headway?
I haven't heard anything yet. Let me check again for you.
Phil,
I think the issue resided more with the XML theme I was using as opposed to the code itself. I have re-themed my blog and all appears to be well. Thanks for the time.
Okay. Thanks for the follow-up. Glad it's working properly for you now!
It seems the this blog is out of date because in my blogger it doesn't have elements but gadget. Can you help further??
Gadget is just the new name for Page Element. The instructions should still work the same. Let me know if you need further help.
I have not posted a blog yet. I was composing a blog and did a preview but the bible verse references do not show in the preview when I hoover over the verse. Will they show only after I post it or do you think I did something wrong with the RefTagger code? I used method #1 for loading the code.
Hmm. I'd think it would show up in the preview, but this might not be the case. I wouldn't hurt to go ahead and publish a blog post to see if it's working properly. You can always delete the post once you're done. If it doesn't seem to be working, we'll do some troubleshooting and see if we can't get it up and running for you.
Thanks for this great tool, I didn't mind creating the links manually, but this definitely saves time!
Hey, this is the best method for a tooltip I've come across yet. Thank you for creating a seamless integration from my blog site.
I do have a couple questions for you though...I noticed that although I use FF as a browser and everything naturally works great, I find that IE does not seem to recognize changes I make in the css style. I took a peek at some of the other sites mentioned and noticed that IE does recognize changes there. So, I looked at their source page and found that they added another line pointing to an external css style sheet in their script! Does the java script not allow IE to render the overridden default css style?
Also, I noticed that the scripture references in my pages show up colored the same as the link color of my template css. Is there any way to change the link color of the scripture reference only? I've tried adding in various changes to the css but to no avail.
The custom CSS should work fine in IE and Firefox. See an example here: http://www.biblestudymagazine.com/interactive/goliath/. You might need to do a hard refresh (hold down shift) to clear out your cache. You can point to an external stylesheet or just add all of the appropriate styles to your site's main stylesheet.
We give you full control over that in the CSS. Just define the classes .lbsTooltipFooter a:link, .lbsTooltipFooter a:visited, .lbsTooltipFooter a:hover (together or separately) to be whatever you want.
Thanks, Phil, for your reply.
I checked out the source page of the site you mentioned. It did work in my IE so I wondered what was different. I compared the two side by side and saw very little difference between the two so, I commented out my styles and pasted theirs in. Same ole, Same ole, it worked in FF but not in IE! I did notice some additional styles included in theirs that were not part of my original styles...ie: (.tooltip a:link; etc..). These were in addition to the styles I got...ie: (.lbsTooltip a:link; etc..). I wondered if these were related, so I commented them out and now FF nor IE renders the popup correctly! Did they get some styles from a different place than "http://bible.logos.com/Content/ReferenceTagging.css"? I don't have any way to put a stylesheet on another server to point at, otherwise that would have been my second choice.
In any case, I figured out a way to change the scripture reference colors on my page another way, without them taking on the same color as my other links! You mentioned (.lbsTooltipFooter a:link, .lbsTooltipFooter a:visited, .lbsTooltipFooter a:hover) but these are the links in the footer of the popup...I was talking about the scripture reference on my page that RefTagger renders as a link! As far as deleting out my cache...that's just too old! I been playing with this for 10 years and keeping my cache directory empty is a common chore nowadays.
I'm assuming something else in my stylesheet is interfering with the popup in IE. Personally, I get to a point where IE just get's me so frustrated that I just place a disclaimer against it and for FF and let it be so! Over the years, I have found IE to be one of the most pugnacious browsers on the market...it's just too bad it comes default on most computers...people just don't realize what their missing by using IE!
Thanks Phil, RefTagger is a very nice piece of code!
This is amazing...
Sometimes on my blog RefTagger adds "NIV" after the reference and sometimes it doesn't.
It will look like
Romans 1:1 NIVNIV
or
Romans 1:1 NIV
or
Romans 1:1
It's not a big deal... just wondering?
Thanks for reporting this, Sheri. We'll look into it and hopefully have a fix very soon.
We're looking into this and will let you know when it is fixed.
Bingo Phil...I found out what's causing IE to not render the changes made in the css styles sheet. Apparently, the instructions for inserting the line:
Logos.ReferenceTagging.lbsCssOverride = true;
were not specific enough for IE. When inserting this line, IE prefers it to be listed first as opposed to just:
somewhere between the line
<script type="text/javascript">
and
</script>
I added it in like anything else that would be added in, at the bottom before the closing of the script. Apparently, IE has an issue with that!
Now if anyone comes across this problem, they might try this as well.
Phil - I'm a Libronix lover and longtime user of reference tagger but for the life of me I just cannot figure out how to not have the "L" show up sending anyone that clicks on that to Libronix ... which of course fails if they don't have it ... which of course they should but ...
Rick, just uncheck the box next to "Insert an icon linking to the verse in Libronix DLS." Alternatively, remove these two lines of code:
Logos.ReferenceTagging.lbsAddLibronixDLSLink = true;
Logos.ReferenceTagging.lbsLibronixBibleVersion = "ESV";
I copied the text from Reftagger but there is no paste button to paste it into the box that opens up on the layout page. Is there another way to paste or do I just have to copy it by hand?