Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Dec 30, 2010

Social Toolbars for Websites

Apture toolbar on myoutsourcedbrain.comApture toolbar with branding, share buttons, and search bar.
Many websites have an interactive toolbar providing social and other instruments situated often on top or on the bottom of the page. Blogger has its Navbar, Wordpress has WordPress Bar, and there are many other toolbars with different functionalities that offer integration with basically any website. This article provides a comparison of different web toolbars.

When I heard Andrew Machado from Apture comment on branding and engagement of their toolbar something resonated in me. I use and like some elements of Apture, but I am not really sure of the toolbar. I looked at different toolbars and thought about which toolbar I wanted to have.

A social toolbar can provide many advantages (taken from conduit.com), such as increased traffic, brand awareness, contact with your community, engaged users, fresh content, effective promotions, and generation of more revenue.

With so many different toolbars available, which one to choose?

Social Toolbars: The Candidates

Competitors are the following:
  • The social bar from google friend connect,
  • facebook bar, (didn't find any link now)
  • meebo bar,
    • see long presentation,
    • Alexa traffic rank of meebo.com is 927. Meebo offers mainly chat solutions. The toolbar sports:
    • Sharing buttons,
    • Full facebook and twitter integration,
    • supports drag sharing (dragging an object triggers a share menu),
    • Chat
    • no branding,
    • no search
  • addthis sharebar,
    • Alexa traffic rank of addthis.com is 166.
    • Social bookmark toolbar plus configurable search engine,
    • design and positioning of bar can be customized,
    • no branding,
    • no counters with social services.
  • wibiya bar,
    • Alexa traffic rank of wibiya.com: 3121.
    • video review
    • highly functional, many applications available,
    • full fledged integration of facebook, twitter, and buzz
    • branding,
    • if you want to integrate anything else: HTML or javascript integration is available at the price of close to 10 dollars per month,
    • search allows integration of custom search engine with results as window overlay
  • apture search bar.
  • One True Fan
    • Alexa traffic rank of onetruefan.com: 77,007
    • share buttons
    • log in functionality; twitter, facebook member listing
  • WordPress Bar
    • See the rundown in a video
    • Share buttons for most important social services.
    • opens external links in a frame with the bar on top so that visitors are not lost.
  • Blogger Navbar.

I had problems with meebo integration. It disappeared after few seconds.

One downside to all tested services is that even if the search form is fully configurable and as overlay, it is not as clean as the blogger custom search widget (no advertisements).

Of all the tested toolbars wibiya provided best functionality. Apture was also good in many aspects and the addthis sharebar fared also not too bad in the comparison.

Others: Not Compared Here

Gigya provide APIs and code examples to set up everything for sharing, community, and authentification on a website at around $1,700-$2,100/month plus set up fee. They also provide a very innovative comment plugin. See a video.

Extendy demo and sign up didn’t work when I tried to test it.

The Stumbleupon toolbar specializes on pages shared over stumbleupon. Similarly, for digg, there's also the Diggbar, a website widget, explained in a videocast by Kevin Rose.

Conduit offers customization of a windows application that integrates with a web browser. See video. digg toolbar for web browsers is powered by conduit.

The Optimal Toolbar

This section summarizes my personal opinion on how a blog toolbar should look like.

A blog toolbar should contain the following (ordered by given importance):
  1. branding
  2. a site search widget (optionally other sites, too), should be interactive without leaving the site
  3. it should have social bookmarking tools. Links to social networks, such as twitter and facebook, and other sites. It should also have a "mail this" function.
  4. follow widgets
    a) social: twitter follow, facebook follow, google followers, optionally buzz
    b) feed subscription button
  5. engagement: something like recent posts, article archive, related posts
I want google custom search, social bookmarks for twittering, facebook like, and sharing, maybe recent comments and posts, and related posts. In the next sections, I give pointers to code that can help you in order to write a custom toolbar.

Custom Toolbar

I put my own toolbar together, but then found these two articles which explain a more elegant way of doing it based on jquery. Share your thoughts with me in the comments sections. This time I am especially interested in this question: What would you put in a social toolbar?

Dec 22, 2010

How to Use Flattr, the Microdonation Platform

Flattr micropayment service
Flattr is a relatively new social bookmarking and micropayment (or rather: microdonation) platform. After Paypal, BAC, and Visa and Mastercard bent down to political pressure, Flattr is currently one of the very few options left for people if they want to donate money to wikileaks and consequently Flattr is getting a fair share of exposure. In this post, I explain what flattr is, how you can use it to make money with your content and give some money to people who earn it, and how you can integrate it with your site.

What is Flattr?

I think one of the fastest ways to explain is that Flattr is a social bookmarking site, where you show your appreciation with money. Some internet sites have paypal buttons asking for donations if you like the content. Flattr is similar to that but has some differences. Now again from the beginning.

Flattr was founded in Malmö, Sweden, by Peter Sunde, who was one of the founders of piratebay, together with Linus Olsson, as a way to encourage people to share money aside from content. It can be very hard to earn money with content on the internet just by advertisement and Flattr wants to make it easier for people to give monetary tokens of appreciation and for bloggers and content creators to earn money. How does it work practically?

You start by setting up an account on flattr and transfer some money to it by credit card or paypal. Remember: flattr is about giving and getting, before you can start making money getting flattred you need to add some funds. Withdrawals are supported via Paypal and Moneybookers.

Next you determine the monthly amount you want to spend (minimum 2 euros). Each time you click on a flattr button on a website you give a share of this monthly amount to that website. This can be explained with a cake analogy. Your monthly flat rate, say 2 euros, is the cake. Each time you click on a flattr button this cake is divided into another part. The video introduction of flattr explains this very smoothly.



Flattr was made open to the public only in March 2010, but since then has enjoyed a growth that has given it an Alexa rank of 12,872 (as of today), which means that traffic on flattr is only surpassed by roughly 13,000 other sites globally. For writers and bloggers it is also worth mentioning that Flattr combines elements of social bookmarking and is do–follow site with pagerank 5.

However, you can see that it is still in an early phase of development with its user base consisting disproportionately of young males under the age of 35. It is used currently mainly in Europe, although in the United States it currently ranked 20,451. According to the Alexa entry for flattr, around a third of the visitors to this site come from Germany, where it is ranked 2,007. It is also used by two major German newspapers, TAZ and Freitag.

The growth curve for flattr, again taken from the aforementioned alexa page, shows that from March 2010, the site has been attracting more and more visitors to their website and with a bounce rate of below 60 percent it is an obvious conjecture that flattr has been gaining many users. As of today, more than 300,000 items have been flattred.

The graph below shows Alexa's estimation of Flatt's traffic rank trend.

How to Integrate Flattr on a Website or Blog

In order to get money with flattr you need to put a button on your website. This is relatively easy and here comes the generic code, which you can copy and paste on any website.

<script type='text/javascript'>
/* <![CDATA[ */
(function() {
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto&uid=auffarth&langage=en_GB&category=text';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */
</script>
<a class='FlattrButton' href='http://www.myoutsourcedbrain.com/2010/12/how-to-use-flattr-microdonation.html' rev='flattr;button:compact;' style='display:none;'></a>
<noscript>
<a href="http://flattr.com/thing/105273/How-to-Use-Flattr-the-Microdonation-Platform" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>


I put here a version of the code which is slightly more complex, however works without javascript and gives visitors to your site the possibility to be the first to submit your pages or articles to flattr. This is why I included my flattr user id, the language code, and the category "text." I indicated in red where you would want to make changes.

Most important is to put the address (at href) of your website or page on your website. Category has to be one of images, video, audio, software, and rest. The language has to be specified in the format en_GB (currently only English option available, other language options). If you leave out the rev="flattr;button:compact;" then you will get the bigger default button.

The result would look like this:




Wordpress Integration

See the wordpress flattr plugin.

Blogger Integration

If you are using blogger, you can use the button above for a side–wide flattr button. If you want to show a flattr button with each post, then I have just the right code for you.

Go to blogger.com, go to design, html, choose expand templates, and search for <div class='post-footer-line post-footer-line-2'>. Directly after that you can paste the following code which will put the flattr button below each of your posts:

<script type='text/javascript'>
/* <![CDATA[ */
(function() {
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto&uid=auffarth&langage=en_GB&category=text';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */
</script>
<a class='FlattrButton' expr:href='data:post.url' expr:title='data:post.title' rev='flattr;button:compact;' style='display:none;'></a><noscript>
<a href='https://flattr.com/thing/105342/My-Outsourced-Brain' target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>


You should change the user-id, category, and language (see comments above). Users who don't have javascript activated would donate not to the article but to the blog in this case. Therefore I submitted myoutsourcedbrain.com to flattr and got an item id.

Other Platforms

See the flattr plugin listing.

"Everywhere"

The firefox plugin Överallt (Swedish for Everywhere) allows you to put your flattr plugin basically anywhere you want by a simple code: [Flattr=auffarth] (auffarth is my id, you would put yours). Anybody who has the firefox plugin installed will see a flattr button and will be able to donate money to you.

What's your opinion on earning and giving away money for writing? Do you think you can trust Flattr? Would you use it?

Dec 16, 2010

Disqus Comments on this Blog

Come and talk
In an earlier article on the importance of comments for a blog I summarized studies about blog comments, concluding that blog comments lead to more traffic, better search engine optimization (SEO), apart from being personally rewarding to the blog writer. I worked on many optimizations for this blog to make commenting more attractive. Recently I made a major change on this blog and changed the commenting system. My blog continues to be a "do-follow" blog and I am positive this blog will benefit from the change both in terms of SEO and comment quality. In this post I explain my motivation and reasoning behind this change.

Image credit: My Comment Line, Call me! By greggoconnell.

The best comment systems for blogs in my opinion are echo, disqus, coComment, and Intense Debate. There are many other systems, for example on earlier occasion I showed integration of google wave as a discussion forum, which was also quite feature-rich, however, I think these four are the best for bloggers. They provide integration with the most popular blogging platforms, comfortable editing, moderation and editing of comments, integration with social networks, threaded comments, social reactions (trackbacks), and many other features. All except Echo offer a basic subscription free of charge with an offer of additional paid features as a business model.

In contrast, the blogger commenting system is uncomfortable and clunky, and misses out on many features that other comment systems have, for example, I've written before about a workaround to correct the blogger comment count and if you really want to export all your blog posts as a single file, edit this file, and re-import, is possible to change comments. I think the commenting system in blogger is one of the biggest drawbacks of the blogger platform and this was one of my motivations to review alternative blogging platforms.

Notwithstanding these shortcomings, I was reluctant to replace it with another system because of SEI reasons. The only integration in blogger with third-party commenting systems are based on javascript and this would mean that search engines would not integrate content from comments in their indexes (although there are some solutions to this issue). Also I didn't want to slow down page loading even more javascript on my site and incur a penalty with search engine rankings.

Disqus and Echo, both, for some time now already synchronize comments with blogger which means that you don't loose SEO any more from comments. Comments will be taken into account for search engine indexing. It also means that if you reward commentators with "do-follow" links as I do, you can continue to do so. The reason is that comment synchronization with blogger means that comments are first printed by blogger and then replaced by the other commenting system. This means that in spite using javascript to pull comments from another site at loading time you will probably not loose out on SEO. The synchronization means also that you can continue to use your comment feeds as before with all your existing widgets.

I am concerned a lot about effectiveness in social networking and I've written before about how to add social networking features for blogs and how to install and customize a social networking toolbar. I am therefore very glad that that another advantage of third-party commenting tools is that they integrate with social networks. Readers of this blog will now be able to log in using facebook, twitter, yahoo, disqus, and openid. Facebook, Twitter are two of the most used social networking sites. As of December 2010, Facebook holds a share of 44 percent among services supported by addthis and twitter holds around 9 percent, and login via these two makes it much faster for people to leave a comment. In fact, according to data by gigya, when given a choice of different ID providers for login, 46 percent of users tend to choose facebook, 17 percent google, 14 percent twitter, 13 percent yahoo, 7 percent myspace. With the new login options I think I can offer a better match to what people want. Furthermore comments can now be syndicated over twitter if the commentator wants to.

I am positively surprised at the speed of the loading of comments. People from disqus did a great job in optimizing page loading. I also got rid of some other code, so I am not so much worried about the speed.

Enjoy. Please test out my new comment system below, tell me of your experiences, and give me some feedback. 

Jun 4, 2010

Alternative Blogging Platforms

A blogging platform is the combination of hosting service and software for the purpose of maintaining a weblog. The most common platforms are blogger.com, always hosted with google (usually with the blogspot.com domain), and the wordpress software, on paid hosting services or using the wordpress.com hosting service. Other popular services are Typepad or liveJournal. In this post I want to show an alternative that can beat these services in price, customization, and loading speed. It involves using free software (as in beer and in spirit) with the google app engine as a hosting service.


Introduction

All blogging platforms have some limitations. Blogger is free and easy to use. Its scripting language, Blogger XML, is very limited, which brings problems for extensions and search engine optimization (SEO). I have the impression that it is also a bit buggy sometimes.

Wordpress presents a more professional look than blogger. It offers to download and self-host the wordpress software (which is free software), with many possibilities for extension with plugins to help presentation and SEO.

Both blogger and wordpress.com are very fast to load from everywhere on the world, because they use a content delivery system. The same is not automatically given with self-hosted blogs, where the download speed depends on the distance of the reader to the hosting server.

Blogging Software for the Google App Engine

Now, it would be great to have a blogging platform, which is freely extensible (free and open software) like wordpress, fast to load using a content delivery system, and free of costs. There is more and more blogging software emerging that can be hosted on google app engine (GAE). This fulfills the three criteria: it is free and open software, it is fast to load (because of GAE), and it is free of costs (if you don't get millions of visitors at least).

I took a look at blogging software for GAE. Some of them are still in early stages of development, others are more mature. There are huge differences with respect to feature sets. I made a wishlist of features that I want a blogging software to have. My list is based on the post Show me your open source Django blog application.

  1. (Elegant) user interface for managing the blog.
  2. WYSIWYG post editor.
  3. Publishes (RSS and/or Atom) feeds.
  4. Allows importing and exporting of posts.
  5. Post authoring in teams.
  6. Compatibility with most browsers (Firefox, Safari, Konqueror, Internet Explorer 7 and 8).
  7. Documentation of the software.
  8. Native comment system (non-javascript, because of SEO).
  9. Support for remote publishing (for example via scribefire, windows live writer or the metaweblog api).
  10. Project actively developed.
  11. Importer from Blogger.
  12. Importer from Wordpress.

List of Blogging Software

I compiled a list of python software that runs on GAE. I found it remarkable that many of the projects are written by Chinese developers, presumingly because of access restrictions to more common blogging platforms (such as blogspot.com) from within the Chinese mainland. A very influential blog software is bloog; many projects have been based on its code. Again: the projects are in different states of maturation. Setting up a blog on GAE requires at least some knowledge of programming. I put down the list without many comments. There's no special order, although I put my personal favorites as the first.
SoftwareDemo
Tom Strummer Bloogdemo
cpediaPing Chen's blog
i-heredemo
Pyweblogdemo
appengineblogsoftwareDeveloper Advocate
vasaoveltema.jp
JoeyBdemo
Pinax Combono demo yet(?)
Project Pickydemo
Micoblogdemo
toon blog
demo
This blogging software does not run on GAE, but I still list it because it is great (free) software as you can see in the demos.



SoftwareDemo
Django Techblog"demo
byteflowdemo 1demo 2
Mighty Lemondemo
Kukkaisvoimademo
Frogdemo


Enjoy. Please leave a comment below for questions and suggestions.

Jan 2, 2010

Blogger Label Widget

blogger label navigationMany blogs use a top navigation menu of main blog categories. To reflect your blog's focus you would usually create these menus manually and update them from time to time. An alternative is to have the menu automatically generated for you based on the frequency of the post labels (categories). This is what this widget does. You might want to try it out.

This is a simple extension of the blogger label widget. I will show how to install a label navigation menu similar to the one you can see in the screenshot above.

Basic Installation

You can install it by editing the blogger template and pasting the widget code where you want it to appear. If you want it to appear before your posts you would paste it above the following line:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Here comes the widget code you would paste into your template:
<b:widget id='Label1' locked='false' title='Browse Topics' type='Label'>
<b:includable id='main'>
<div class='widget-content'>
<p><div id='topmenu'>
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.count&gt;4'>
<span style='white-space:nowrap;'><li><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'</li></span>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div></p>
</div>
</b:includable>
</b:widget>


The red bold number is a threshold for the minimum number of posts that is necessary for inclusion of the label into your menu. In this case only labels with more than 4 posts are listed. You might want to adjust this number to have enough menu items but not too many.

Note that in order to get an efficient navigation you need a clean label system. You might want to read google help for editing labels of multiple posts at once.

Customization

There are many ways you can make the menu look better using some style. Here is an example. Paste this code into your template above the </head>:

<style>
#topmenu {
float:left;
width:100%;
font-size:93%;
line-height:normal;
}
#topmenu ul {
margin:0;
padding:10px 10px 0;
padding-top:0;
list-style:none;
}
#topmenu li {
float:left;
margin:0;
padding:0 0 0 9px;
}
#topmenu a {
display:block;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
border: solid thin #882d13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999;
box-shadow: 2px 2px 2px #bbb;
background-color: #ce401c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
padding:5px 15px 4px 6px;
font-weight:bold;
}
</style>


This brings the links in form of buttons. Credits go to Ethan Marcotte for the centered tabbed navigation and to John Allsopp for the button look,as described in in his article Shiny Happy Buttons.

Enjoy. Please vote this post up if you like it and leave a comment below for questions and suggestions.

Dec 29, 2009

A Social Networking Toolbar for Your Blog

social bookmarking sitesThere are already many articles about how to put social bookmarking links on a blog. Why write another one? That's a justified question and I wouldn't have written this post without having an answer to it. Many ways to embed social bookmarks take long, slow down page loading, or lack some features. I will explain a way that is easy to install in any website or blog, is very fast in loading, and offers features for more than 230 social networks, and in about 50 languages. If this sounds useful keep on reading.

In a social bookmarking system or social network, users store lists of internet resources, which they find useful. Often, these lists are publicly accessible, and other people with similar interests can view the links by category, or tags. In order to get backlinks and incoming traffic, and pagerank, it is an imperative to make tagging and bookmarking easy. I wrote about this in my article on social networking features for blogs.

There are many posts on how to put social bookmarking features on a blog, however most posts I saw on social bookmarking features propose a method that uses several images. Sometimes you are required to upload these images, other posts propose that each time your blog is loaded, these images have to be loaded from different hosting services. If you want a fast loading blog, you'd better not do this.

In this post I show a way I haven't seen implemented in any blog yet (however on a few other websites). It uses CSS Sprites for fast loading, provides many features for customization, and is very easy to install.

Addthis is a social bookmarking service and it's one of addthis lesser-known feature I am going to present in this post. I accidentally found out its toolbox options when looking in the addthis javascript file.

You can specify the social networks you want to use and customize the look. In the following, starting from an example, I show how to put a social bookmarking toolbar on any website or blog. In the end I come to which social networks are most used.

Default Look

A typical social networking toolbar would look like this:

This is the HTML code which you would have to insert into your template to get exactly the toolbar above:

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_email" title="Email"></a>
<a class="addthis_button_print" title="Print"></a>
<a class="addthis_button_twitter" title="Tweet This"></a>
<a class="addthis_button_facebook" title="Share to Facebook"></a>
<a class="addthis_button_myspace" title="Share to MySpace"></a>
<a class="addthis_button_stumbleupon" title="StumbleUpon"></a>
<a class="addthis_button_digg" title="Digg This"></a>
<span class="addthis_separator">|</span>
<a class="addthis_button_expanded" title="More Choices">More</a><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'></script>
</div>


To install this toolbar in a blogger template you would paste this code typically below this line:
<p class='post-footer-line post-footer-line-3'/>

Customization

You can put any social network there and completely customize the toolbar. This is the way to set the destination (social network) and the icon:
<a class="addthis_button_destination code"></a>

You can find about 230 more destination codes on the addthis services list.

Addthis offers an analytics feature which you can use if you register with addthis. Note that it is optional to register. The analytics feature shows most used services on your blog, bookmarked content, and where people came from who bookmarked. If you want to see this you should add your addthis username to the script call like this:
<script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=username' type='text/javascript'/>


By default, the language of the visitor's browser is recognized and your toolbox is adapted correspondingly. If you want to use always a particular language, you can also do it.

Most Popular Social Networks

Ok, now which social networks should you choose? As of now, according to addthis data from the last 180 days, internationally these social bookmarking sites were most used:
most popular social networking sites

On the same page you can also see the most popular social network sites for specific countries and also upcoming social bookmarking sites. As of December 2009 sites with most gains of usage are Sonico, meinVZ, Nujij, OKNOtizie, and orkut.

Now that you have a great toolbar, you are one step closer to success.

Success in social networks depends on many factors. You might want to read my summary of scientific studies about digg, called How Digg Works to get a better idea about these factors.

I hope this post was useful to you. Which social networks would you want to put in such a toolbar?

Dec 3, 2009

Special Pages in Blogger

Remark: This post explains how to create special pages by making changes to the blogger template. As of January 2010, blogger provides a simpler way for the creation of special pages than the way explained here. This feature can be found in the blogger draft dashboard, under posting->edit pages.

Special pages are pages such as contact, feedback, or information for advertisers. The standard way to create such special pages on blogger is to create a new post. This means that readers will see date and time, labels, the post author, maybe even ads on your special page just like on a normal post. I found out recently how to create more professionally looking special pages in blogger and in this post I explain how to create them.

One of the articles I see again and again in variations on different blogs is the one about special pages in blogger. Usually the only thing it says it that you should create an article, where you omit comments and backlinks in the options. You would date back this article so it doesn't show up in the blog feed. To me this kind of special pages in blogger don't look professional enough.

The way to create special pages which allows most customization is to host them outside of blogger, however these pages would not be integrated with your blogger page layout. This week I learned about a different way to create special pages in blogger which are both professional in look and integrated into your site. I read about this first from an article in blogspot vision and I've since found similar suggestions on other blogs.

This second way to create professionally looking special pages in blogger involves linking to a page in "/search/label/" and putting a conditional in the template so that your text shows only up if the visitors go to that link. That's what the other article explained, however how to do it?

It cost me a lot of time to figure out the details to make it work but I created two special pages which you may want to see to know how these pages look like, one for advertisers and another one for feedback. In this post I explain the exact details on how to create them.

Start by thinking of a name for your special page, say, contact. The address would be then yourblog.blogspot.com/search/label/contact.

Now edit the template. In the blogger dashboard go to layout->edit HTML and mark expand widget templates. Before you edit make sure you have a backup of your template (you can make one by clicking on download template).

We need to edit inside the blog widget. Search for <b:includable id='main' var='top'>. The code within this include and the </b:includable> is responsible for showing posts. We need to create the following structure:

<b:includable id='main' var='top'>
<b:if cond='data:blog.url == &quot;http://www.yourblog.blogspot.com/search/label/contact&quot;'>

<!-- here you put the text you want to show up for your special page -->

<b:else/><!-- if not special page show post -->

<!-- don't change the code here which shows your posts -->

</b:if>
</b:includable>


Your changes are the following:
  1. the conditional <b:if ...,
  2. directly followed by the text for your special page,
  3. <b:else/>,
  4. </b:if> before the closing </b:includable>.
  Leave the spaces in the conditional (" == "), otherwise it might not work.   Note that you leave the earlier code for the post untouched.   After these changes you should have your special page ready and once you save you should see it show up at your chosen location http://www.yourblog.blogspot.com/search/label/contact.   As for styling, you could use the same style as for the posts. For the heading you can use <h1 class='post-title entry-title'><a href='http://yourblog.blogspot.com/search/label/contact'>Contact</a></h1> and include the rest in <div class='post-body entry-content'> and </div>.   With styling, the structure will be like this: <b:includable id='main' var='top'> <b:if cond='data:blog.url == &quot;http://www.yourblog.blogspot.com/search/label/contact&quot;'> <h1 class='post-title entry-title'><a href='http://yourblog.blogspot.com/search/label/contact'>Contact</a></h1> <div class='post-body entry-content'> <!-- here you put the main text you want to show up for your special page --> </div> <b:else/> <!-- if not special page show post --> <!-- don't change the code here which shows your posts --> </b:if> </b:includable>   If you want to use javascript within your special page, you have to convert special characters. You can use the tool at HTMLEscape.net to help you with that (choose convert special characters and <>).   Enjoy. Please tell me about your own special pages.

Nov 30, 2009

A Custom Search Engine for Blogger

Custom Search EngineWhen I or other people used the searched function on this blog for some article they like they often couldn't find it, because the standard blogger search doesn't index all pages. This was annoying and either people left or they were forced to go through the article archive in order to find articles. There is an alternative to standard blog or google searches which allows people to always find what they are looking for. This is the google custom search, you probably heard of it, and if you don't have it on your blog yet, I suggest you consider putting it there.

The advantage of custom search engine (CSE) over the blogger search and normal google search is that you can determine how it indexes your site. If you submit your sitemap your pages will show up in the results. This makes search results from CSE more relevant than those from normal google search (even if you apply the site restriction to your site).

You can make money from adsense for search, in fact you can't opt out of ads if you don't want to pay for the professional account. I didn't want to have ads along with search results and I see this as a downside, however in the end the advantage of better results won me over.

If you want to see an example of a CSE, see the My Outsourced Brain custom search. You may also want to read an introductory article on how to set up a google custom search.

There are different choices on how to integrate the search results on your site in blogger. Some time ago I had the results embedded on my site in the sidebar, so they would always re-search for people coming from google or other search engines (similar to Chitika). During some efforts to make my site load faster I pulled the custom search result embedding because it required loading of several external files and because I got tired of all the customization efforts I put into making it look good.

Now I show the option which I currently use on this site, which is showing the results on a google site. Different to the code offered in the google custom search settings, the search form is standard HTML and does not show any google branding. The search bar is reset when you click on the search bar.

<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='014996012458446089762:dlibbmmbqik'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input class='sitesearch' id='sitesearch' name='q' onblur='if(this.value==&quot;&quot;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&quot;&quot;;' type='text' value='search here...'/></form>


Try it out below:

You can put this anywhere on your site, in a widget or in the title bar, as you see on this blog. You will have to change 014996012458446089762:dlibbmmbqik to your own CSE ID. You find your CSE ID under get code in the dashboard of your CSE or when you go to your search site in the web address.

Enjoy. Please leave a comment below for questions and suggestions.

Nov 22, 2009

Blogger: Hide Deleted Comments

If you don't use pre-moderation of comments in your blog, inevitably some comment will sooner or later appear that you rather not wish on your site whether it contains obscenities, linkspam, or for other reasons. The problem is that if you delete the comment, there will be a message "this comment was deleted by a blog administrator." How not to show the comment at all? There is a simple solution and in this post I show it.

In my last post on commenting on blogger, I lamented that the blogger commenting system lacked many features. One of the lacking features is re-editing of posted comments.

If you delete the comments and put a new one, you'll see an ugly "this comment was deleted" message. Once you'll implement this little hack, you and other commenters can freely re-edit comments on your blog. This allows you to be more flexible in the comment posting. I even disabled the pre-moderation setting because now I can delete comments without a trace.

We need to edit the template in order to make this work. In the blogger dashboard go to layout->html. Backup your template before editing (choose download template). Expand widgets.

Now in your template search for this line:
<b:loop values='data:post.comments' var='comment'>

Insert the following lines below:

<b:if cond='data:comment.isDeleted'>
<b:else/>


Now scroll down where you see </b:loop> several lines below. Above it, insert this line:
</b:if>

After these changes, deleted comments should not appear any more.

Now, for the comment count, which appears with the posts (usually in the post header or footer). The comment count includes deleted comments and therefore we have to subtract deleted comments. This is easy if we search and replace some text in the template.

Substitute all <data:post.numComments/> for <font id='numComments'><data:post.numComments/></font>. Usually there should be two occurrences.

Replace <b:includable id='comments' var='post'> with

<b:includable id='comments' var='post'>
<script type='text/javascript'>var numComments=<data:post.numComments/>;</script>


Now replace <b:if cond='data:comment.isDeleted'> with <b:if cond='data:comment.isDeleted'>
<script type='text/javascript'>numComments--;</script>
.

At last we need to replace <b:if cond='data:post.commentPagingRequired'> with <script type='text/javascript'>
var numC=document.getElementById(&#39;numComments&#39;);
if(numC) numC.innerHTML=numComments;</script>
<b:if cond='data:post.commentPagingRequired'>
.

Once you save, deleted comments should not appear any more and the comment count should be corrected for deleted comments.

Enjoy. Tell me how this works for you.

Nov 20, 2009

Attracting More Comments On Your Blog

I think one of the principal motivations for people to maintain a blog is to exchange opinions and improve your thinking. By leaving comments, visitors can improve your article and give you pointers that you can follow. I think most bloggers are happy to receive comments, in fact it's unusual to find a blog that has comments deactivated. This post discusses how to get more comments.

Comments are an important part of a blog. They are a way to get feedback and they increase the value of a page to visitors. Furthermore, if you can engage your visitors they are more likely to come back and link to you.

How to attract (more) comments to a blog?

On this blog, there are post that were seen by several thousand visitors and are yet without comments. Therefore, I want to start with a disclaimer: I don't really know, how to attract more comments, but I am trying and I would be happy if you could give any useful advice.

First, let's get the obvious out of the way.

The Blogger Commenting System


There many nice commenting systems, like disqus or echo, but let's be honest, Blogger's comment system lacks many features, including comment threading, social networks aggregation, and comment voting. Out-of-the-box the visuals of Blogger's system are unsightly and it takes some extra work to make comments look good.

Why is it then that only few people on blogger use these superior comment systems? Because people are rightly afraid to loose on SEO when outsourcing their comments. The problem with blogger is that only javascript widgets are allowed, so all content that is delivered to your page by widgets is invisible to search machines (apart from slowing down the page in the browser). This means in particular that all comments made on your blogger blog with a comment system other than blogger's do not contribute to your search engine traffic.

However, there are a few things you can do on blogger to make commenting more bearable. Most of these have been discussed ad nausea on many blogs already, so I only shortly mention the most important points. It is easier for people to comment if you embed the comment form on the post page (done in settings->comments). People don't want to be carried to a different page for commenting. You can allow anonymous comments for people who don't have open-id accounts or for various reasons don't want to take the hassle to log in. I am currently allowing anonymous comments, but I use pre-moderation of comments, so that no obscenities or link spam comes through.

I think there are many ways that blogs can improve the commenting system in blogger starting from styling the comment section to several technical things. You may want to see my post on how to hide deleted comments in blogger on one of the technical things.

Normally links in comments are given special tag, no-follow which means that search engine spiders do not take them into account when they spider your site. Using do-follow gives incentives for people to comment, however my worry is that it will maybe not attract the right kind of comments.

Motivating People to Comment

How else to motivate people to comment on your site? Let's ask more in general, why do people comment?

I think, there are several reasons. Most importantly, I think is that they like the blog and the posts. I think there is a minimal requirement that the blog should look acceptable. As for myself, I usually only comment on posts that are reasonably well-written and I think it's often very well-written or high-impact posts that have a high number of comments.

If I find a post very superficial, I think, I better improve on that post by writing a new one than explaining in comments everything that was left out.

Another reason why people leave comments is personal involvement. There are many things that bloggers can do to increase the involvement of visitors. Some time ago I posted on social networking features in blogger and wrote about some of these aspects.

Often comments are reciprocative between people. Finally people often ask questions regarding issues they want resolved.

It probably helps to end your posts with a question. On the bottom of every post, I have a message animating people to discuss. It looks like the one with which I am going to end this post.

How do you animate people to comment on your posts? What motivates you to comment?


This post was inspired in part by the post Optimise your comments page in blogspot blog.

Nov 15, 2009

Embed Google Wave in Blogger

Google wave. From YouTube - Google Wave Developer Preview at Google I/O 2009Yesterday I received an invite for google wave, google's new communication tool that had the potential to unify all of their services. I wanted to try how to embed a google wave in blogger. After some tinkering and trying I had it. Here it goes.

Image taken from Google Wave Developer Preview at Google I/O 2009. Credit: Rambling Librarian at Flickr.

You can find a very nice introduction to google wave at mashable.

How to embed a google wave in blogger? Take these steps:

1. Create a wave in your wave client and make it public by sharing with public@a.gwave.com or (if the former doesn't work) easypublic@appspot.com.

2. Share your wave with embeddy, it's wave address is embeddy@appspot.com.

3. Embeddy gives you all the necessary code.

4. Put the code into your post or into an HTML/javascript widget in the sidebox.

Below you'll see a wave that I embedded. You might not see the wave if you don't have an account with google wave (btw, I have some invites left).

Please participate in the wave below!

If you want to embed the wave below yourself, take this code:

<div id="wave" style="width: 100%; height: auto">
</div>

<script
  type="text/javascript"
  src="http://wave-api.appspot.com/public/embed.js">
</script>
<script type="text/javascript">
  var wave =
    new WavePanel('https://wave.google.com/wave/');
  wave.setUIConfig('white', 'black', 'Arial', '13px');
  wave.loadWave('googlewave.com!w+HADobw_TB');
  wave.init(document.getElementById('wave'));
</script>







Enjoy. Please leave a comment below for questions and suggestions or ask for invites.

Nov 7, 2009

Greeting Widget (Entrecard, Twitter, etc.)

You might have noticed a greeting message on this blog. You would see different welcome messages depending on whether you come from a search engine, twitter, or entrecard. This post describes how to install such a welcome widget in your blog or website. Installation is as simple as copy-pasting a code.

Credits for a welcome message to Visitors from Entrecard and Twitter goes to Laura from Reviewing Whatever. In fact I even copied parts of her welcome message. Her message is great and I didn't know how to improve on it. If there is any part of it you don't like, it's probably an addition of me.

This widget is an extension of my earlier Welcome Widget. Basically you just take the code below and put it in your template where you want the message to displayed. In blogger you can create a new HTML/javascript widget and paste the code in the box.

There are parts of the code you might want to change, especially the text of the welcome messages, where it says search_again.innerHTML=.

You should also change this line:
if (document.referrer.length > 0 && document.referrer.indexOf("myoutsourcedbrain.com") > -1) return false

This filters the URL of your own site from the referral URLs. In my case that is myoutsourcedbrain.com. Just write the main part of your address there. This is important. If you don't change it, the widget does not work as expected.

For easy installation in blogger click the widget button:


Here goes the code of the greeting widget:

<div id="welcome_message"></div>

<script type="text/javascript">
function getReferrer() {
  var Refer = document.referrer
  if ( ! Refer ) return false
  if (document.referrer.length > 0 && document.referrer.indexOf("myoutsourcedbrain.com") > -1) return false
  if (document.referrer.indexOf("entrecard.com") > -1) return 2 // 2 for entrecard
  if (document.referrer.indexOf("twitter.com") > -1) return 3 // 3 for twitter
  return 1;  // by default probably search.
} 

function getQuery(){
  var Refer = document.referrer
  q = Refer.match(/(q(([^=]*)|kw)?|p)=([^"&;]+)/)
  if ( ! q ) return false
  query = unescape( q[ ( q.length - 1 ) ] )
  query = query.replace("/</g,>/g", '&gt;')
  query = query.replace("/\+/g", ' ')
  if ( ! query.match(/\w/) ) return false
  return query
}

function yousearchedfor(result){
  if(result.responseData.cursor.estimatedResultCount>1) {
      var search_again=document.getElementById("welcome_message");
      search_again.innerHTML='<h2>Welcome Searcher.</h2><br/>According to google, for your query "' + query + '" there are <a href="http://www.myoutsourcedbrain.com/search?q=' + query + '">' + result.responseData.cursor.estimatedResultCount + ' results</a> on <i>My Outsourced Brain</i>. Please feel free to leave comments. If you like the site, you might want to subscribe to our feed to stay updated. ';
  }
}

function welcome_entrecard(){
  var search_again=document.getElementById("welcome_message");
  search_again.innerHTML='<h2>Welcome Entrecard Dropper!</h2><br/>I hope you enjoy what you see enough to explore for more than the few seconds it takes to drop your card. My Outsourced Brain features articles about topics ranging from technology and software to scientific research. Recent articles have been more focused on <a href="/search/label/blogger">blogging</a> help, including several useful <a href="/search/label/widget">widgets</a>, which I wrote myself. You can find many articles on <a href="/search/label/linux">linux</a>, phd research, and <a href="/search/label/software">software</a> or of general interest such as lifestyle, and <a href="/search/label/nutrition">nutrition</a>. I write occasional <a href="/search/label/book review">book reviews</a>. <br/>A good place for exploration are most visited articles, labels, the search, or the article archive. <br/>I try to post several articles a week, but life being what it is, sometimes I make it, sometimes not. If you like what you see, it might be worthwhile subscribing to the <a href="/atom.xml?redirect=false&start-index=1&max-results=500">feed</a> in order to stay updated.';
}

function welcome_twitter(){
  var search_again=document.getElementById("welcome_message");
  search_again.innerHTML='<h2>Welcome Tweeter!</h2><br/>I hope you enjoy this site. My Outsourced Brain features articles about topics ranging from technology and software to scientific research. Recent articles have been more focused on <a href="/search/label/blogger">blogging</a> help, including several useful <a href="/search/label/widget">widgets</a>, which I wrote myself. You can also find many articles on <a href="/search/label/linux">linux</a>, phd research, and <a href="/search/label/software">software</a>. You can also find topics of general interest such as lifestyle, and <a href="/search/label/nutrition">nutrition</a>. I write occasional <a href="/search/label/book review">book review</a>s.<br/>A good place for exploration are most visited articles, labels, the search, or the article archive. <br/>I try to post several articles a week, but life being what it is, sometimes I make it, sometimes not. If you like what you see, it might be worthwhile subscribing to the <a href="/atom.xml?redirect=false&start-index=1&max-results=500">feed</a> in order to stay updated.';
}


var refer=getReferrer()
if(refer){  // refer > 0 query true, means the visitor was referred from another web site
  switch (refer)
{ // refer is a number that indicates the referral web site
    case 1: // search engine
          var query=getQuery();
          if (query){
          var script = document.createElement('script');
          script.src = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='+query+'+site%3Awww.myoutsourcedbrain.com&callback=yousearchedfor';
          script.type = 'text/javascript';
          document.getElementsByTagName('head')[0].appendChild(script);}
          break;
    case 2: welcome_entrecard();
          break;
    case 3:
          welcome_twitter();
          break;
    default: // standard welcome message
  }
}
</script>


Download here.

Enjoy. Please leave a comment below for questions and suggestions.

Nov 3, 2009

Best Blog Tools

I compiled a list of useful internet resources for blogging. Categories for blog tools include page design and cross-browser testing, testing page loading performance, seo tools, social media tools, and post editing. If you think any page should be added, please comment.

Page Design

Combining Color Palettes and Fonts

  • Typetester provides a comparison tool for different fonts.
  • Color Scheme Designer provides a tool for creating color schemes.
  • A bit more simple is Color Blender, which generates 5 matching colors from one color you provide.

Cross-Browser Testing

browsershots.org is a free on-line service that lets you see your websites rendered in different browsers such as Firefox, Opera, IE, Safari, Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey, and many more. You can adjust monitor resolution, color depth, javascript, Java and Flash support.


IE Netrenderer allows you to check how a website is rendered by Internet Explorer 7, 6 and 5.5 for free.

Page Loading Performance

Page Loading Analysis

Nothing beats firefox with Firebug and YSlow.

To clear the cache there is the clear cache button.

Web Page Test is one of the best on-line page loading analysis services.

Sprite Generators

CSS Sprite Generator

Image Optimization

Smushit reduces image sizes by optimization

CSS Minification

CSS Compressor

Javascript Compression

Compressor Rater

Content Delivery Networks

Google App Engine

Post Editing

greasemonkey and platypus for customization of web pages (blogger edit boxes)

Multimedia Embedding

  • Many different types of multimedia can be included with apture
    Apture helps during and after page editing. There are plugins for firefox and other browsers.
  • google viewer allows embedding of Powerpoint (ppt), MS Word (.doc) and open document formats (.odf, .odp)
  • Embedit.in
  • provides embedding of documents (doc, docx, xls, xlsx, ppt, pptx, pdf, wpd, odt, ods, odp, txt, rtf, csv, html), images (png, jpg, gif, tiff, bmp, eps, ai)
  • Wufoo Form Builder allows to build forms for on-line surveys

Source Code Embedding


SEO Tools

  • alexa sparky firefox add-on (improve alexa rankings)
  • swoosty seo tools provides alexa ranking and page rank of the pages you view
  • Google Webmasters allows you to control how google spiders your site.
  • Google Analytics provides a broad spectrum of statistics about visitors, and content.
  • deeper cloud helps you to find relevant tags to write more keyword-relevant articles (see also google lab suggest term)
  • Google Sets creates sets of items from a few examples, which can also help you find more relevant keywords.

Social Media Tools

Major social networking websites include digg, technorati, Facebook, Twitter, del.icio.us, stumbleUpon, slashdot, and reddit


Entrecard does social marketing.

For a list of advertisers, please see the footer of this page.

Enjoy. Please leave a comment below for questions and suggestions.

Nov 2, 2009

Blogger Archive Pages with only Post Titles

Blogger category (label) pages can be very annoying to visitors if they have to wait very long while page with many articles loads. One remedy is to add &max-results=5 to your category links, however then many articles probably won't be read, because you can't realistically expect visitors to thumb through many pages. Probably this solution is also bad for search engine optimization (SEO), because it increases the distance between blog pages. In this post I present another solution which only displays the titles of the posts.

Here's a simple hack to change the show only titles In blog archive pages. Credits go to Divya Sai from bloggerstop.net.

From the blogger dashboard go to Layout -> Edit HTML. Make a backup, then check the expand widget templates box.

Search for this line:
<b:include data='post' name='post'/>

Replace that line with this coding.
<!--ARCHIVE-TITLES-STARTS-->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--ARCHIVE-TITLES-STOPS-->


Enjoy. Please vote this post up if you like it and leave a comment below for questions and suggestions.

Nov 1, 2009

Blogger: Most Popular Posts Widget (Google Analytics)

google analyticsThere are several widgets for wordpress to show most popular posts, however, as far as I know, there is no good widget yet for blogger. In my last article, I explained how to set up a blogger widget that shows most popular posts based on feedburner statistics. In this post I explain how to create a widget for your blogger blog that shows most viewed posts based on google analytics statistics. The set up is very similar to the previous widget. A prerequisite is rudimentary knowledge of python. Again the warning: the installation is a little bit more intricate than other widgets on this site. I think anyone, with some patience should be able to do it, however if your computer skills are very limited, don't try it.

Image credit: wikimedia commons.

I found actually widgets for blogger that show most popular pages. One is from feedjit shows most visited articles during a day. There are several implementations of popular post widgets that show popular posts by number of comments, such as this one, which works with google pipes. Now, in my opinion, one day of traffic doesn't really give too much statistics to give useful information about which of your pages are most popular. As for the other widget, I don't want popular posts by comments, I want just the most visited ones. There is postrank, which shows popular posts measures of post submission to social bookmark sites such as slashdot or digg, however it would be nice to have a widget that shows most visited pages.

The widget I present here uses google analytics statistics to list most viewed posts. You'll need a google analytics account and the tracking code active on your site for it to work.

Installation of this widget is similar to the previous popular post widget with feedburner.

You can host the code on any site, however in this walkthrough I assume you use google app engine. If you don't have one already, you need to create a free account on google app engine. Hosting your files and web applications on google app engine brings you the advantages of a low latency content delivery network (CDN) which can make your site load faster and for this implementation of the most popular posts widget you need an account. You'll have to choose a domain such as yoursubdomain.appspot.com.

If you don't have it already install python. Download the app engine python SDK for python.

Download the source code of the widget. You need subversion for this. The command for checkout is this:
svn checkout http://popular-posts-for-blogger.googlecode.com/svn/trunk/ popular-posts-for-blogger-read-only

Go to the popular-posts-for-blogger/popular-posts-for-blogger subdirectory and edit the getfeedstats.py file (use an editor or IDE that knows python, such as eclipse, vim, or kate). Search and replace myoutsourcedbrain for your feedburner uri.

Upload your code with the google app engine SDK. Still in the same directory type:
appcfg update .

If you did everything correctly you should now be able to see the javascript at http://yoursubdomain.appspot.com/reports/analytics.

In your website or blog, where you want the widget to show, paste this code:
<h2>Most Viewed</h2>
<ul><script src='http://yoursubdomain.appspot.com/reports/analytics' type='text/javascript'/><noscript>most popular articles by feed views</noscript></ul>


Enjoy. Please leave a comment below for questions and suggestions. If you have ideas for any improvements please tell me.