How to use Hatena Star on your blog

Setting up Hatena Star for most blogs can be done with knowledge of Basic HTML. This article will introduce Hatena Star and explain how to embed Hatena Star into your blog.

Create a Hatena ID

If you have not done so yet, please first create a Hatena ID.

https://www.hatena.com/register

Associating your Hatena ID with a blog

In order to associate your blog with your Hatena ID, first go to the Hatena Star home page and sign in. Next, go to your user page by clicking on the “Welcome” message or the “Home” link in the upper-right hand corner.

From your user page click on “Blogs” on the right hand side to access the list of blogs that you have registered. Blogs that you register here will be associated with your Hatena ID. You can check the number of stars that your registered blog/s have received and also receive a message each time someone posts a message on your blog via Hatena Star.

Enter your blog URL and click "Add".

Your blog is now associated with your Hatena ID. Hatena Star has created a unique token for your blog and HTML code to set up Hatena Star for your blog.

Please embed this code into the head tag of your blog template. This message will disappear when the first star is successfully added to your blog..

Hatena.Star.Token = 'your Token'.

Setting up Hatena Star for

Your blog should display the Hatena Star after you embed the code into your blog template. While we recommend that you embed the code into the header of your template, the code can be embedded in other places of your template. Regardless of where in your template the code is embedded, Hatena Star will run after your page is completely loaded.

When a template with the Hatena Star Javascript is accessed, the script will identify the relevant entry, access the Hatena servers to get the number of stars for that entry and then insert the Star icons and the “Star” button to your template. When the “Star” button is clicked, the script sends data to the Hatena servers to store the relevant star information.

The steps above should be enough to use Hatena Star on most blogs. However, if Hatena Star is not displayed, then more customization might be required.

Using Hatena Star without a Token

Hatena Star can also be used without setting up a Token. To do so, the following code should be pasted into your blog template.

<script type="text/javascript" src="">http://s.hatena.com/js/HatenaStar.js">

Hatena Star can also be implemented without registering your blog with Hatena and setting up a token, but the comment feature of Hatena Star will not be available. By setting up Hatena Star with a token Hatena Star can associate your blog entries with your Hatena ID. If you initially set up Hatena Star without a token, you can always change this at a later date.

Customizing Hatena Star

Here’s a brief overview on customizing Hatena Star, the following overview requires some understanding of Javascript.

There are many blog services and platforms available and so there are also a large variety in the HTML structures of blogs. The Hatena Star script may need some customization depending on the blog service or platform in order to properly detect the title, permalink and where to display the “Star” button.

Hatena Star needs to locate the entry title and Permalink to do its work. By default Hatena Star is looking for that information in a h3 element written in the following manner.

<h3><a href="Title">http://uri.for/entry">Title of Entry</a></h3>

If your blog template uses a different structure, Hatena Star’s Javascript will have to be customized to find the entry title and Permalink.

For example if your blog entry title is in an h2 element with the class ‘entry-title’, the headerTagAndClassName property needs to be customized as follows.

<script type="text/JavaScript" src="http://s.hatena.com/js/HatenaStar.js"></script>
<script type="text/JavaScript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','entry-title'];
Hatena.Star.Token = 'e87c41045ae2146685c46539118b70f044fc56b5';
</script>

However, if your blog does not have the Permalink in the title, or if the structure is otherwise different, the Hatena Star Javascript will not be able to get the title and Permalink. In this case the Javascript needs to be further customized.

The “loadEntries” method in the “Hatena.Star.EntryLoader” object detects the location of the entry title and Permalink. The code for this method can be rewritten to allow Hatena Star to find the information that is required.

Hatena Star can be used with a wide variety of services such as Wikis, News sites, bulletin boards and etc. All that it requires is a permalink and the ability to use Javascript.

Whatever code that you use, as long as all entries can return a structured array that included the properties below, Hatena Star will be able to do its job.

{
  title: 'title',
  url: 'URL',
  star_container: object for stars and "star" button.
  comment_container: object for comment box.
}

o- Let's customize your blog some more

Ordinarily, the Hatena Star is displayed as an orange star-shaped icon (). But you can change it to anything you like. Maybe another image will match your blog better than a star. We want you to have fun with your Hatena Star.

To change an image, you must first select a new image and upload it to any location on your computer. If your blogging service allows you to upload images, you can use that.

Once you have selected your new image, you can embed it into the header of the page you wish to place it in like this:

.hatena-star-star-image {
  background-image: url(http://exapmle.com/star.gif);
}

Replace http://example.com/star.gif in the example above with the URL of your selected image. Depending on the blogging service, you may have to specify the style you want in a template or CSS. You may also have to reformat your page depending on the blogging service you use.

Changing other images

You can change the image for the Add Star button and Comment button in the same was as described above. Again, replace the URL in the example with the URL of the image you have selected.

Add Star button
.hatena-star-add-button-image {
  background-image: url(http://exapmle.com/add.gif);
}
Comment button (no comments)
.hatena-star-comment-button-image {
  background-image: url(http://exapmle.com/comment.gif);
}
Comment button (comments received)
.hatena-star-comment-button-image-active {
  background-image: url(http://exapmle.com/comment_active.gif);
}

Change the appearance of the figure that lets you know the number of Stars you have received

As the number of Stars you have received add up, the individual Stars are replaced with a figure that tells you the total number of Stars. You can change the appearance of this figure as well.

To change the appearance, you can define the style in the CSS.

.hatena-star-inner-count {
  color: #f4b128;
  font-weight: bold;
  font-size: 200%;
  padding: 0 8px;
}

In the example above, the appearance of the figure is defined to have the color #f4b128, the font style as bold, the font size as 200%, the spaces above and below the figure as 0 pixels, and the spaces on either side of the figure as 8 pixels.

You can also display an image behind the figure in the following way (you will have to upload the image of your choice first):

.hatena-star-inner-count {
  background-image: url(http://exapmle.com/background.gif);
}

Change the location that the Stars are displayed

Although it is a little more difficult, you can change the location that the Stars are displayed on your page by modifying the JavaScript. To change the location, you must rewrite the loadEntries method in the Hatena.Star.EntryLoader class. You will have to modify the method individually for each blog.

The section that displays the data for the comments and stars looks like the example below.

var cc = Hatena.Star.EntryLoader.createCommentContainer();
header.appendChild(cc);
var sc = Hatena.Star.EntryLoader.createStarContainer();
header.appendChild(sc);

In the above example, the data for both the comments and stars are placed right after the title element, therefore this information is displayed next to the title on the page. You can change the location where they are displayed by rewriting the code.

Details of rewriting the code are beyond the scope of these instructions. We encourage you to explore the possibilities and figure it out for yourself.