Monday, February 23, 2009

Social Linking on Blogger with Digg, StumbleUpon, Delicious, DotNetKicks, et Cetera

I've been doing more and more blogging lately, and I've noticed my visibility really picking up. When I added Digg (even though very few of my readers seem to Digg me . . . hint hint), I noticed my daily visits took a jump. I added Dot Net Kicks, and again . . . a jump. I've decided to add more social bookmarking links like StumpleUpon and Del.icio.us to see what happens. The only one that was difficult was the Delicious link because I couldn't find an example online. I decided that I'd post all of my bookmarking links here largely as a way to keep track of them myself, but you're all welcome to use them too.

Nota bene, I'm pretty sure I encoded them correctly so that if you copy and paste them into your template, you'll get what you're looking for. If they don't work (and the blogger template editor will usually warn you about an invalid html entity or something like that), then please leave me a comment and let me know and I'll fix it as soon as possible.

So, without further ado, here's how I got my Digg link:
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
digg_title = &#39;<data:post.title/>&#39;;
digg_bgcolor = &#39;transparent&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>


Here's how I got my Reddit link:
<script>reddit_url=&#39;<data:post.url/>&#39;</script>
<script>reddit_title=&#39;<data:post.title/>&#39;</script>
<script language='javascript' src='http://reddit.com/button.js?t=2'/>


And my stumble upon link:
Stumble Upon Toolbar
<a class='timestamp-link' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style=''>
<img align='' alt='Stumble Upon Toolbar' border='0' src='http://www.stumbleupon.com/images/su_micro.gif'/>
</a>


Dot Net Kicks:

<a expr:href='&quot;http://www.dotnetkicks.com/kick/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'>
<img border='0' expr:src='&quot;http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=&quot; + data:post.url'/>
</a>


And the difficult and time consuming del.icio.us:
Delicious del.icio.us
<a 
expr:onclick='&quot;window.open(\&quot;http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=\&quot;+encodeURIComponent(\&quot;&quot; + data:post.url + &quot;\&quot;)+\&quot;&amp;title=\&quot;+encodeURIComponent(\&quot;&quot; + data:post.title + &quot;\&quot;), \&quot;delicious\&quot;,\&quot;toolbar=no,width=550,height=550\&quot;); return false;&quot;'
expr:href='&quot;http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'>
<img alt='Delicious' height='10' src='http://static.delicious.com/img/delicious.gif' width='10'/> del.icio.us
</a>


The considerably less difficult RSS feed link:
rss feed
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;'>
<img alt='rss feed' src='http://www.benjaminobdyke.com/images/rss_button2.gif'/>
</a>


This post will also be a living document, so when I update it I'll post an update notice so it'll come up in your RSS feed.

6 comments:

  1. Patrick--

    Thanks so much for taking the time to post this. Although I have been blogging for a few years now, I am just now trying to learn about the social networking and bookmarking. So, forgive this probably idiotic question. How do you get those links top show up in each post? Is there a specific placement in the html section of the layout or do you paste it into each post?

    Thanks again. And I will digg this post.

    ReplyDelete
  2. No problem K.A., I'm glad I could help. Here's what my css looks like for the links:
    .diggs a img
    {
    border-width: 0px;
    padding: 0px;
    }

    .diggs
    {
    border: 1px solid #ccc;
    background-color: #eee;
    padding: 7px;
    text-align: center;

    -moz-border-radius-topright: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-bottom-left-radius: 8px;
    }

    Then, I edit the HTML for my blog template and I check the "expand widget templates" checkbox. I look for this line:
    <div class='post-body entry-content'>

    When I find it, I put the following section at the top:
    <div style='float:right; margin-left:10px;background-color: transparent;'>
    <table class='diggs'>
    ...
    </table>
    </div>

    Just put your links where the "..." is.

    ReplyDelete
  3. nice article right here...
    i've implemented the scripts :D

    thanks in advance

    http://technospine.blogspot.com

    that's my new blog, your simple review would be appreciated :D

    ReplyDelete
  4. Thanks dude am implementing in my new pixhome blog

    ReplyDelete
  5. Nice way I like this script I'll install on my blog. Psychological Evaluations

    ReplyDelete
  6. Attach social linking buttons help users to bookmark blog directly in just one click. It is good for me also to increase traffic on my personal blogger page. thanks to make my day valuable by sharing some knowledge here.I definitely try it!! manual social bookmarking

    ReplyDelete