How do I make this link work in javascript

Question

Ok basically I have this javascript file http://assets.revback.com/scripts/share1.js that basically adds a bunch of share buttons via javascript.

What I want to do, is change the twitter image link to use an url shortener:

so instead of:

<a href=\"http:\/\/twitter.com\/home?status=Interesting Post:(UURRLL)\" title=\"Click to share this page on Twitter\"><img src=\"http:\/\/assets.revback.com\/scripts\/images\/twitter.png\" border=\"0\"\/><\/a>

I want to use

<a href="#" onClick="window.location='http://ko.ly?action=shorten&amp;uri=' + window.location + '&dest=twitter.com/?status=Reading ';"><img src=http://assets.revback.com/scripts/images/twitter.png"&gt;&lt;\/a&gt;

but I need that bottom one, to be written with javascript friendly syntax. i.e. like in the top one, instead of http://, you have http:\/\/

Answer 1

Try this

<a href="#" onClick="window.location='http://site.com?action=shorten&amp;uri='+ 
  window.location + '&dest=twitter.com/?status=Reading;'">tweet this</a>

Answer 2

Change the href of the link in the onclick attribute:

<a href="#" onclick="this.href='http://site.com?action=shorten&amp;uri=' + window.location + '&dest=twitter.com/?status=Reading';">tweet this</a>

The default action (going to the page designated by the href attribute) will always still be executed unless the event handler onclick receives a return value of false. So, changing the href before it happens will cause it to go to the page you want it to as long as you don't return false.

Answer 3

<a href="#" onClick="window.location='http://site.com?action=shorten&amp;uri=' + window.location.href + '&dest=twitter.com/?status=Reading ';return false;">tweet this

Answer 4

Lose the onclick. There is no benefit to it whatsoever, since it just acts like a normal link (except much more broken). Now you don't have to worry about escaping JavaScript inside JavaScript and the consequent \\\\\\\\ madness.

var buttonhtml= (
    '<a href="http://ko.ly?action=shorten&amp;amp;uri='+encodeURIComponent(location.href)+'&amp;amp;dest=twitter.com/?status=Reading"&gt;'+
        '<img src=http://assets.revback.com/scripts/images/twitter.png"&gt;'+
    '</a>'
);

(Note that the encodeURIComponent, which is essential to correctly inserting your current URL into another URL without breaking, is also protecting you from HTML-injection, since < and & characters get %-encoded. Without that safeguard, any page that includes your script has cross-site-scripting vulnerabilities.)

Better still, lose the HTML string-slinging altogether and use DOM methods to create your content. Then you don't need to worry about & and other HTML escapes, and you don't have to hack your HTML together with crude, unreliable string replacing. You seem to be using jQuery, so:

var link= $('<a>', {href:'http://ko.ly?action=shorten&amp;uri='+encodeURIComponent(location.href)+'&amp;dest=twitter.com/?status=Reading'});
link.append('<img>', {src: 'http://assets.revback.com/scripts/images/twitter.png'});
link.appendTo(mydiv);

ETA: I'd replace the whole markuppy mess with a loop and the data broken out into a lookup. ie. something like:

(function() {
    var u= encodeURIComponent(location.href);
    var t= encodeURIComponent(document.title);
    var services= {
        Facebook: 'http://www.facebook.com/sharer.php?u='+u,
        Twitter: 'http://ko.ly?action=shorten&uri='+u+'&dest=twitter.com/?status=Reading',
        StumbleUpon: 'http://www.stumbleupon.com\/submit?url='+u+'&title='+t,
        // several more
    };

    var share= $('<div class="ea_share"><h4>Share this with others!</h4></div>');
    for (var s in services) {
        share.append($('<a>').attr('href', services[s]).attr('title', 'Click to share this on '+s).append(
            $('<img>').attr('src', 'http://assets.styleguidence.com/scripts/images/'+s.toLowerCase()+'.png')
        ));
    }
    $('#question .vt').append(share);
})();