Improve your website with social bookmarking and better code presentation

If you’re a webmaster or blogger, there are a few little things you can do to improve your reader’s experience and make your website more functional. You can, for instance, add small widgets to help your visitors pass on your page or a display your code more professionally.

We'll be looking at 3 widgets: AddThis&TellAFriend, FeedFlare and SyntaxHighlighter.

A. AddThis & SocialTwist TellAFriend

AddThis (1) & TellAFriend (2), long used on this site, allows a reader to submit your articles to various news aggregators. You can find it at the bottom of each of my articles. Adding them to your website is quite straightforward. Click on them and then on the respective link (AddThis for AddThis, SocialTwist for TellAFriend). The two widgets complement each other: AddThis (1) has more news aggregators but it is quite basic in IM, whereas TellAFriend (2) has several emailing and instant messaging options that AddThis lacks, but is very basic in terms of aggregators. To add either one to your website, login to their sites and follow their own guides. To add them to Blogger, follow these steps:

  • 1. Log in to Blogger and go to your Dashboard.
  • 2. Go to Layout > EditHTML and Click on Expand Widget Templates.
  • 3. Find (Ctrl+F) <div class='post-footer'> in your Template.
  • 4. Paste the code below underneath <div… found above, being careful to replace the variables in CAPITAL letters with your own, and Save Template.

<div><script type='text/javascript'>addthis_url='<data:post.url/>'; addthis_title='<data:post.title/>'; addthis_pub='Indelible Bonobo';</script><script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/>
<script src="http://cdn.socialtwist.com/200811213488/script.js"></script><img style="border:0;padding:0;margin:0;" src="http://images.socialtwist.com/200811213488/button.png" onmouseout="hideHoverMap(this)" onmouseover="showHoverMap(this, '200811213488', window.location, document.title)" onclick="cw(this, {id:'200811213488',link: window.location, title: document.title })"/></div>

But what if you don’t want to register with these sites? After all, although they promise individual stats collection, this problem has yet to materialize, and besides, you probably have already installed Google Analytics or some other stat package. Luckily, both services offer plain-vanilla, unpersonalized code. To use it, for AddThis just take out the Indelible Bonobo, leaving the apostrophes in place, while for SocialTwist you must replace the ID number with 0000000001:

<div id="st0000000001" class="st-taf"> <script src='http://cdn.socialtwist.com/0000000001/script.js' type='text/javascript' ></script> <a style='display: none;'><data:post.title/></a> <img style='border:0;margin:0;padding:0;' src='http://images.socialtwist.com/button-images/tafdropdn_blue16.png' onmouseout='hideHoverMap(this)' expr:onmouseover='&quot;showHoverMap(this, \&quot;0000000001\&quot;, \&quot;&quot; + data:post.url + &quot;\&quot;, prevS(this))&quot;' expr:onclick='&quot;createWidget(this, \&quot;0000000001\&quot;, \&quot;&quot; + data:post.url + &quot;\&quot;,prevS(this),\&quot;desc\&quot;)&quot;'/> </div>

SocialTwist offers several other buttons, such as:`tafbutton_blue16.png, tafbutton_bluetxt16.png, tafbutton_bluerect16.png, tafbutton_rect16.png.

B. Feedburner Feedflare

If you use Feedburner, you can obtain the same functionality but with more control over which services are displayed. On the downside, they will take more space and create more clutter, they will only be textual (no images) but on the bright side, they will be more visible and hence more likely to be clicked. I prefer the widgets above for taking less space. This is how the Feedburner Feedflare works:

As you can see, after entering the code, you get to choose with the click of a button which services to display under your page. You don’t need to enter code on your website to use those services in your feed. To add it to your website, scroll down the page above in Feedburner, activate the service, then choose from the drop-down list your kind of site to obtain the code.

It will look like this (add it in the same place as AddThis):

<script expr:src='"http://feeds.feedburner.com/~s/YOURFEEDNAME?i=" + data:post.url' type="text/javascript" charset="utf-8"></script>

C. SyntaxHighlighter

This little applet can display your code very nicely, and only uses JavaScript. Personally, I am fine using blockquote to display even the code, but I’ve seen this used on other websites (5) and it looks impressive. From the same website (5) I adapted a short tutorial to install it on your own site.

C.1. Installation

1. Go to their website (3) and download SyntaxHighlighter.

2. Extract the files and host it somewhere in the web (Weebly, Geocities, Google Page Creator, etc.). You do not need to add all the javascript files, only the files of the programming languages you use.

3. From your Dashboard, go to Layout > EditHTML.

4. Add the code given below between the <head> and </head> section of your template.

<link href='http://[YOUR OWN PAGE].googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shCore.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCpp.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCss.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushDelphi.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushJava.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushJScript.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushPhp.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushPython.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushSql.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushVb.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushXml.js' type='text/javascript'/> 
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushRuby.js' type='text/javascript'/> 

5. Add the code given below just before </body> tag.

<script language='javascript'> 
function start() { 
dp.SyntaxHighlighter.BloggerMode(); 
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false); 
}  
window.onload = start; 
</script> 

6. Save Template and you're done.

C.2. Usage

To use it, paste your on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use.

<pre name="code" class="c-sharp">
... some code here ...
</pre>

If you’re not using a blogging editor, one important thing to watch out for is the opening triangular bracket <. It must be replaced with an HTML equivalent of &lt; in all cases. Failure to do so won't break the page, but might break the source code displayed.

An alternative to <pre> is to use <textarea> tag. There are no problems with < character in that case. The main problem is that it doesn't look as good as <pre> tag if for some reason javascript didn't work.

<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

It is also possible to pass a few configuration options to the code block via colon separated arguments.

 

Sources

1. AddThis

2. TellAFriend

3. SyntaxHighlighter

4. Feedburner FeedFlare

5. isuman.blogspot.com

Comments

Popular posts from this blog