Generated social media links

Question

I'm still fairly new with JavaScript, and wrote something to generate some social media links on my page. The idea was to have that script grab the necessary URL info and feed it to the social media APIs.

<script type="text/javascript">

    // print links
    titleElement = urlencode(document.title);
    linkElement = urlencode(location.href);

    document.write ("<a href='http://facebook.com/sharer.php?u=" + linkElement + "&t=" + titleElement + "' target='_blank'><img src='socialMedia/social_facebook.png' border='0' class='png tip' title='Facebook :: Post on your wall!' alt='Facebook' /></a>");

    document.write ("<a href='http://stumbleupon.com/submit?url=" + location.href + "&title=" + titleElement + "' target='_blank'><img src='socialMedia/social_stumbleupon.png' border='0' class='png tip' title='Stumbleupon :: Share this page!' alt='Stumbleupon' /></a>");

    document.write ("<a href='http://twitter.com/?status=" + titleElement + "%20-%20" + linkElement + "' target='_blank'><img src='socialMedia/social_twitter.png' border='0' class='png tip' title='Twitter :: Tweet this page!' alt='Twitter' /></a>");

    document.write ("<a href='http://digg.com/submit?phase=2&url=" + linkElement + "' target='_blank'><img src='socialMedia/social_digg.png' border='0' class='png tip' title='Digg :: Digg this page!' alt='Digg' /></a>");

    document.write ("<a href='http://del.icio.us/post?url=" + linkElement + "&title=" + titleElement + "' target='_blank'><img src='socialMedia/social_delicious.png' border='0' class='png tip' title='Del.icio.us :: Bookmark this page!' alt='Del.icio.us' /></a>");

</script>

Answer 1

I suppose a more valid and improved way is to put the JavaScript into an external file

<script type="text/javascript" src="path/to/script"></script>

rather than putting it inline into a html. In the same html have a span tag with an id

<span id="social-links"></span>

Then in the script itself

var tags = "",
    titleLink = urlencode(document.title);,
    linkElement = urlencode(location.href);

titleElement = urlencode(document.title);
linkElement = urlencode(location.href);

// String optimisation, which is really good for IE
tags = tags + "<a href='http://facebook.com/sharer.php?u=" + linkElement + "&t=" + titleElement + "' target='_blank'><img src='socialMedia/social_facebook.png' border='0' class='png tip' title='Facebook :: Post on your wall!' alt='Facebook' /></a>";
tags = tags + "<a href='http://stumbleupon.com/submit?url=" + location.href + "&title=" + titleElement + "' target='_blank'><img src='socialMedia/social_stumbleupon.png' border='0' class='png tip' title='Stumbleupon :: Share this page!' alt='Stumbleupon' /></a>";
tags = tags + "<a href='http://twitter.com/?status=" + titleElement + "%20-%20" + linkElement + "' target='_blank'><img src='socialMedia/social_twitter.png' border='0' class='png tip' title='Twitter :: Tweet this page!' alt='Twitter' /></a>";
tags = tags + "<a href='http://digg.com/submit?phase=2&url=" + linkElement + "' target='_blank'><img src='socialMedia/social_digg.png' border='0' class='png tip' title='Digg :: Digg this page!' alt='Digg' /></a>";
tags = tags + "<a href='http://del.icio.us/post?url=" + linkElement + "&title=" + titleElement + "' target='_blank'><img src='socialMedia/social_delicious.png' border='0' class='png tip' title='Del.icio.us :: Bookmark this page!' alt='Del.icio.us' /></a>";

document.getElementById('social-links').innerHTML = tags;

Answer 2

Use the var keyword to declare titleElement and linkElement in this scope, otherwise they will always be global variables and you'll have no choice about it.

Using var will still put them in the global scope until you wrap this logic in a closure:

(function() {
    // var titleLink...
})();

You should still take the advice of @NebulaFox - don't use document.write.