Providing rich content to readers often requires linking to other websites. Most links cause a visitor to leave your site potentially losing a reader. One way to keep their interest is by opening specific links in another window or tab. Your site remains accessible, while providing rich content to your readers.
Unfortunately, Blogger's built in links editor lacks a new window option. These posted links open in the same window potentially losing a visitor in the process. To fix the problem we're left to edit the link manually to include target='_blank'. Of course we'd all like to skip the editing and I've come up with a script to automatically change post body links.
Template Modification and Script
Search for the <body tag which should look something like this <body expr:class='"loading" + data:blog.mobileClass'>. Insert onload='fixExternalLinks();' just before the >. Next, place the following script in the <head> section of the blog template
<script type='text/javascript'>Conclusion
//<![CDATA[
function fixExternalLinks()
{
var Posts = document.getElementById('Blog1');
var links = Posts.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
if(links[i].href.search(document.domain) == -1 && links[i].href.indexOf("http:")!=-1)
links[i].setAttribute('target', '_blank');
}
}
//]]>
</script>
Other solutions I've seen change a lot of links we want to open in the same window. My script avoids that only changing links in the blog section and only ones pointing to other domains. None of your widgets, menus, labels, comments or post links will act differently. This script saves lots of time and hassle editing links manually, while making visitors more likely to return after reading a posted link. Give it a try.
15 comments :
It didn't work. I followed the directions exactly as you stated...
Can you please be more specific about the <body tag and where that code goes?
In the new templates you'll find a body tag that looks like this: <body expr:class='"loading" + data:blog.mobileClass'>
It needs to change to something like this: <body expr:class='"loading" + data:blog.mobileClass' onload='fixExternalLinks();'>
That adds an onload event handler to the body, so when the page loads the function is called. The template for this site uses exactly that code to handle all my external post links.
Updating the post to be more clear.
In fact it's better for the usability that external links open in the same window.
There are a few exceptions:
* Links to non-html pages
* Links to Terms and Conditions while the user is in the sales section of a webshop
I've an article on my weblog about this issue, however it's in Dutch, so look for your Google Translator.
The url is:
New windows while clicking a link?
Edwin, I completely disagree. A same window page flow requires a user back navigate to return. Look at many large scale popular sites around the net and it's more common to new tab/window than stay within the same.
Of course it can go too far, you do not want a large volume of windows inundating a visitor. However, in most day to day web browsing I distinctly prefer new window/tab. I frankly find sites that overwrite themselves cumbersome and downright archaic. It's a convention I for one am thankful is uncommon.
Then again my browser window typically has 7-10 tabs open at a time, so I multi-task and flip around perhaps more than most.
I just tried this and it works to open the external links in a new window, but the sharing icons at the bottom of the post disappeared. When I remove the code they are back... Any ideas why?
@Anutka, I've never seen that happen before and testing the tutorial anew with my test blog did not remove the buttons. The included script does not alter the HTML of the page, rather it does very basic DOM attribute manipulation. As written the problem you're describing should not occur.
Perhaps add the script into a test blog of your own and see if it happens again. If so send me a link and I'll take a look.
James
@James, I just reset my entire template then added your code again. The icons are back, but the code does not work. :(
Links still open in the current tab. What am I doing wrong?
My blog is wackylaki.blogspot.com
Please take a look if you can.
Thanks
@Anutka, I do not see anything wrong. I'm having a hard time finding links other than the images which are of a different domain, those are opening in a new tab for me. Otherwise internal links seem to be behaving appropriately as well.
It's possible you experienced a delay in the script due to the way it loads. This script is an older version, a first draft if you will, which only runs after the entire page body loads. This can cause a period of time while images and such load where the links behave as originally coded. As a result I updated my method to run as soon as the html is ready with this script JQuery External Links in a new Window. You may consider it instead.
James
Thanks James, the new code worked. Actually it started working after the blogger issues a few days ago. They must have fixed something :D
Hi James - thanks so much for this post - I've tried the code out on my blog and it works perfectly. I reference a lot of external links on my blog, and it was a real issue for me, having people navigate away from my site, mid-post. Question - I'd also like my internal links (links where I reference previous blog posts) to open in a new window, as well as a couple links in my body text that have "https:" - is there a way to tweak the code so that ALL links within my body text open a new window? I would appreciate any help/advice - my blog is blog.wickedbride.com for reference. Thanks!
@Erica, to do as you wish I recommend removing the changes in this post and instead follow a modified version of an Updated Script with JQuery for this task. Once you've rolled back the changes, place this code in your templates <head> section.
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
//<![CDATA[
function jqFixLink() {
var strLink = $(this).attr("href");
if(strLink != undefined) {
$(this).attr("target", "_blank");
}
}
function jqFixExtLinks() {
$(".post a").each(jqFixLink);
}
$("#Blog1").ready(jqFixExtLinks);
//]]>
</script>
James - thank you SO much! This was exactly what I was looking for! Now my readers can click on a link and actually finish reading a sentence before being pulled away to an external page. Thank you, thank you, THANK YOU!
Just wondering, will this code open a new window for EACH external link? I'd like my links to open a new window, but only ONE window at a time. I don't want to send my readers off to other websites in mid-post, but I also don't want them to be stuck with a zillion new tabs/windows. Thanks!
thanks so much for this! following the directions in the comments (copying the code in the comments worked better for me than copying the code in the post itself) allowed me to make this change (one i've been wanting to make for ages--count me among those who much prefer a new window for their links). i appreciate your help.
Thank you so much for this script... helped me a bunch
Post a Comment