Social Networking Links

Yesterday I added the links you see at the bottom of this article that allow users to quickly submit these articles to your favorite social networking site.

This wasn’t as easy as you would think.  I didn’t fully understand dasBlog‘s template system, thinking I could use server side script inside the <% %> brackets.  This is of course not the case.

I ended up finding a partial solution here by Mads Kristensen.

However, I found that this solution failed in a few ways.  First, the URLs being submitted in the querystring were not fully encoded.  The result was that some sites (I verified Digg.com) did not accept these.  It would give you an error that your URL was not correct.  The other problem, was that most of these links include a title, which is good, but they cause JS errors if you have a single quote in your article title.

After some screwing around, I realized that the only way around this problem would be a custom dasblog macro on the server that could encode the titles.

So, I just removed the titles for now.

As an added bonus, this will be an opportunity for me to test out the new JavaScript syntax highlighting I now have on my blog.

<script type="text/javascript">

  var tn = document.createTextNode('<%ItemTitle%>');
  var div = document.createElement('div');
  div.appendChild(tn);
  var html = div.innerHTML;
  var index = html.indexOf('&gt;') +4;
  var title = html.substring(index, html.length - 10);
  var social = '<div style="float:left">';
  social += '<a href="mailto:?body=Thought you might like this: <%permalinkUrl%>&amp;subject=' + title + '" target="_blank" title = "Email This Article">Email it</a>&nbsp;|&nbsp;';
  social += '<a href="http://digg.com/submit?phase=2&url=' + encodeURIComponent('<%permalinkUrl%>') + '" target="_blank"  title = "Post To Digg">Digg it</a>&nbsp;|&nbsp;';
  social += '<a href = "http://del.icio.us/post?url=' + encodeURIComponent('<%permalinkUrl%>') + '&amp;title=' + title + '" target="_blank" title = "Post this article to del.icio.us">Del.icio.us it</a>&nbsp;|&nbsp;';
  social += '<a href = "http://reddit.com/submit?url=' + encodeURIComponent('<%permalinkUrl%>') + '" target="_blank" title = "Post to Reddit">Reddit</a>&nbsp;|&nbsp;';
  social += '<a href = "https://favorites.live.com/quickadd.aspx?marklet=1&amp;mkt=en-us&amp;url=' + encodeURIComponent('<%permalinkUrl%>') + '&amp;top=1" target="_blank" title = "Post to Live">Live it</a>&nbsp;|&nbsp;';
  social += '<a href="http://www.dzone.com/links/add.html?url=' + encodeURIComponent('<%permalinkUrl%>') + '" target="_blank" title="Post to DZone">DZone it</a>&nbsp;|&nbsp;';
  social += '<a href="http://www.dotnetkicks.com/submit?url=' + encodeURIComponent('<%permalinkUrl%>') + '" target="_blank" title="Post to DotNetKicks">Kick it</a>';
  social += '</div>';
  document.writeln(social);

</script>

Not bad (looks like it got a little confused by the nested strings, but that IS confusing).

Just put this code in your template of choice and you should see good results.

Advertisements

3 thoughts on “Social Networking Links

  1. No problem Jack, thanks for posting.

    Keep in mind that there are still some problems with this code. I think if you have an article title with a quote in it like "Can’t" it will cause a JS error.

    I think this HAS to be done on the server with a custom macro. But this works for the most part 98% of the time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s