Blogger @ Digital Space

Replace blogger's comment system with Disqus comments

2009-08-16T18:54:00.000-07:00

Problem with blogger ?

One of shortcomings of the blogger platform is the comment system. Once a comment has been added there are only four actions you can take on a comment: add , show, hide and delete. Notice that the most important option 'edit' is missing from the list.

Rather than trying to work around the shortcomings of blogger's comment system, I decided to replace the comment system with a 3rd party system called Disqus.

What is Disqus ?

Disqus, pronounced "discuss", is a service and tool for web comments and discussions. The Disqus comment system can be plugged into any website, blog, or application. Disqus makes commenting easier and more interactive, while connecting websites and commenters across a thriving discussion community. Disqus is a free service to the general public with absolutely no in-line advertisements.

Key benefits for Websites, Publishers, Bloggers

Threaded comments and comment ratings
Powerful moderation and admin tools
Filter out spam, trolls, and unwanted commenters
Enable your visitors to become a real community
Moderation by email or mobile
More comments and increased engagement
Connected with a large discussion community
Increased exposure and readership

Key benefits for Commenters, Readers

Track and manage comments and replies
Verified commenter reputations across sites
More control over your own comments on websites
Never lose your comments, even if the website goes away
Build a global profile, or comment blog, to collect and show off what you're saying
Easier to comment on websites using Disqus
Reply to comments through email or mobile
Edit and republish comments with one click

The best feature from my perspective is that I can see all the comments across all my blogs in a single place (not that I have a lot of comments) and that I can edit them.

High level installation procedure ?

Sign up for a free account at Disqus.
Switch off blogger's comments.
Download existing template.
Upload your template to Disqus and let them modify your template.
Download the modified template and upload to blogger.

Issues ?

Some people ran into issues with the Disqus system modifying their templates. Although I have a complicated template myself, I had zero issues. If you ran into issues using the automatic template modification procedure, you can modify your template yourself by following this guide here.

Other options:

Conclusion:

I highly recommend this free service. It has a ton of options. It is highly configurable and it is completely ad free. You owe your visitors something better that the stock blogger comment system - so ditch it now !

Adding retweet button in Blogger

2009-08-14T20:04:00.000-07:00

Twitter is among the most popular micro-blogging platform. Sharing something on Twitter is sometimes called "Tweet this" and is used to share a link to news, blog post or anything else you wanna share with your followers.

Putting a "Tweet this" button on your blog post makes it easy for your blog visitors to share your posts on twitter. Which in turn brings traffic to your blog. How much traffic it brings depends on how popular the person is and how many people follow his/her tweets. But it is always a good idea to make it easy for your blog visitors.

Add the following:

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

just after:

<div class="post-header-line-1"></div>

Credits: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/

Adding code inside a blogger post

2009-08-06T19:20:00.000-07:00

To show Javascript or HTML inside a blogger post instead of executing them, you need to modify your template. Edit your template and find /b:skin

Copy the following code and put it just in front of ]]

pre
{
background:#F5F5DC;
border:1px solid #DC143C;
font-size:100%;
line-height:100%;
overflow:auto;
padding:9px;
color:#000000 }
}

You can customize the colors with the CSS Color Chart.

Save your template.

Take the HTML code or Javascript that you want to display and prepare it for posting by using using one of these sites:

Take the output from this and place it between pre tags inside your post, for example:

Notes:

Don't worry if you can't see the box in preview mode or compose mode. When you publish it will be correct.
It is better to use blogger in draft (draft.blogger.com) instead of the original www.blogger.com when adding these tags.

Disable blogger pager

2009-08-06T11:30:00.000-07:00

One of the components that you need if you want to build blogs that don't look like blogs (e.g. about.digitalsp.com) is to switch off the bloger-pager navigation.

Find "blogger-pager" in your template:

#blog-pager-newer-link {
  padding: 5px;
  float: left; color:#000;
 }
#blog-pager-older-link {
  padding: 5px;
  float: right; color:#000;
 }

and replace them with:

#blog-pager-newer-link {
display:none;
}
#blog-pager-older-link {
display:none;
}

Depending on the template that you are using, there might be more of these that you have to disable.

Creating a professional looking contact page

2009-08-04T09:49:00.000-07:00

Nothing says el cheapo quicker than a somebody@somedomain.com email link on a web page. You want a contact form that the visitor can fill in and submit. You don't want to leave your real email address around for a bot to pick up. There is no built-in contact form widget in blogger (yet). The best thing that I have come across is Kontactr.

What is Kontactr ?

Kontactr is a free online contact form provider. You have to sign up and they will provide you with the HTML / script to embed on your blog.

How I use Kontactr.

I took the HTML embed widget from their web site and placed the code into a post. Click here to see what the kontactr widget looks like on my blog.

Other options ?

You might have read on the web somewhere about using Google Docs to embed a contact form on your blog. I think that if you use the Google Docs method you are going to open yourself up to abuse. The Kontactr solution provides you with a secure CAPTCHA protection (preventing an automated attack) which the Google Docs method does not provide. Plus the Google method requires quite a bit more effort to install.

The Future ?

I have a feeling that Google will provide a nice blogger widget for contact forms in the future. All that they have to do is to use a comment post form and instead of posting it to the blog, send it via email.

Adding related text links at the bottom of posts - script method

2009-08-04T06:39:00.000-07:00

After playing around with the LinkWithin widget and discovering that it does not work for me, I ended up with a google code script solution. I found the script here.

Step 1: Add a HTML/Javascript Gadget

From your dashboard go to layout, page elements. Click 'Add a Gadget' and choose a HTML/Javascript gadget. Put 'Related Posts' in the title and put the following javascript in the contents box:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});
</script>

Step 2: Position the gadget

After saving the gadget, click and drag the gadget to position it just below your post area (see image below).

We are done. Related post links will now automatically appear below each post.

The script has a number of configuration options:

Option	Description	Default value
blogURL	Other Blog URL or leave empty to aggregate yours	''
maxTags	max tags to look for on the page	5
maxPostsPerTag	max posts to be aggregated per tag	5
maxPosts	Specify a max. to remove extra posts that are least relevant or set to 0 to keep them.	5
containerSelector	jQuery Selector to find a container to append widget at the end of it, Use 'div.post-body' to have widget appended at the end of your post body. or leave empty so widget is placed where you called it	''
tags	don't specify any and tags are read from page content. or specify a fixed list to aggregate like \\. also setting it to empty array will make it work as recent widget all the time.	null means not fixed
loadingText	Text to be displayed until widget is loaded. for example 'loading..'	'' means no loading text
loadingClass	CSS class will be set on list until widget is loaded which you can use it set a AJAX icon on the background. for example 'related-posts-loading'	'' means no CSS class
relatedTitle	H2 Title to be used for related posts widget. To disable title output set this to empty.	'Related Posts'
recentTitle	H2 Title to be used for recent posts widget when there are no tags on the page. Set this to empty and widget is canceled.	'Recent Posts'
postScoreClass	A CSS class prefix to be used to style posts based on relevancy. If you set to 'related-link' and maxTags=5 then related links can have classes like ('related-link1' to 'related-link5')	'' so feature is disabled
onLoad	true so widget is loaded on window load so widget is loaded after all page content(like images) is loaded. or false and widget is loaded after document is ready(before images)	false
relevantTip	For demo purpose you can show each post relevancy as a tool tip. set to '\d relevant tags!' and '\d' is replaced with number of tags in common.	''

How to remove the blogger nav bar

2009-07-30T20:22:00.000-07:00

From your Blogger Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Add the following just above the variable declaration section:

#navbar-iframe {
display: none !important;
}

Other option: Most of the custom templates that you can download from the web have this code already builtin.

Increasing the Posting Window Size

2009-07-30T20:02:00.000-07:00

Do you wish the 'New Post' editor window box is bigger in blogger? If you use blogger in draft mode you can increase the vertical size of the window.

What is Blogger in draft?

Blogger in draft is a special version of Blogger where you can try out new features before they are released to everyone. By taking your feedback and looking at what works and what doesn’t, the blogger team will be able to make features that much better when releasing them to everyone.

Make sure that you sign in to blogger in draft mode by using the specific URL draft.blogger.com instead of the usual www.blogger.com. You can also permanently select the draft mode by ticking a selection box on the dashboard page.

When you have the compose window open, move your mouse to the bottom right of the box (just below the Show all text). Your mouse pointer will change when you hit the resize button. Click and drag the window down for a bigger view.

This trick only works for changing the window size vertically. If you want to increase the window size horizontally you should look into a grease monkey script (a Firefox add-on) that will size the window to the maximum. You can download and install the script via the userscripts.org website. The exact URL for the script is: http://userscripts.org/scripts/show/30112

Adding related links with LinkWithin

2009-07-30T10:15:00.000-07:00

You can spend hours tying all your related posts together manually or you can have it done for you automatically.

LinkWithin is super easy way to add related links at the bottom of your post. At the moment it is free and very easy to add to blogger.

My experience with this widget:

I used this widget for about a week before taking it out.I had three problems:

Sluggish performance.
Seems to get stuck when you delete one or more posts.
On my main blog www.digitalsp.com the widget kept displaying the very first post over and over again.

Even though I had problems, you should still try this for yourself.

Changing favicon in blogger

2009-07-30T10:06:00.000-07:00

By far the most convenient way to change the favicon in Blogger is to use an online icon editor and then to embed the icon in the HTML (forget about trying to upload the ico file into another hosting site).

To create your icon go to favicon.cc

If you publish your icon, you can download the 'source code' for the icon and embed it straight into the HTML. Follow the instructions from the favicon.cc website.