Firefox 3.6 “Final” was released today and one of the major addition is the support for the Web Open Font Format or “WOFF”. The result of a collaboration between the font designers Erik van Blokland and Tal Leming with help from Mozilla’s Jonathan Kew.

What is it for? How can you use it? By using the CSS2 @font-face (yes CSS2 not CSS3). This new format is promising because of the large number of support from the font creators and font foundries. Hopefully this will be the first font format that Microsoft® will accept for Internet Explorer browser other than their existing Embedded OpenType or “EOT”.

If IE9 supports WOFF, then this format will be the first cross-browser @font-face/webfont format. There is no question when it comes to Chromium/Chrome, Opera, and Safari, the problem with cross-browser technology is always with MSIE.

Update: Microsoft added WOFF support in Internet Explorer 9 Platform Preview 3.

So how can you start using WOFF? Just follow these simple steps:

1. Search for your font of choice
2. Check the license of your font if it is allowed to be used in a website (sometimes called website embedding). I strongly suggest to contact the font creator/foundry and clarify the matter to them.
   • @font-face fonts or webfonts use “open”/“share”/“freedom” type licenses, examples are:
     • OpenFont License
     • Creative Commons
     • GNU/GPL
     • Apache License
   • If you can not find any, check out Fonts available for @font-face embedding.
3. Go to FontSquirrel’s @font-face generator. The tool is self-explanatory.
4. Then click the “Download Your Kit” button and open the zip file.
5. You should have the following files (assuming you uploaded one font only)
   • Your original font (ttf/otf)
   • 1 eot file
   • 1 svg file
   • 1 woff file
   • stylesheet css files
6. Edit the stylesheet for your own use (the URL location of the font, etc.)

Sample @font-face stylesheet

1
2
3
4
5
6
7
8
9

@font-face {
  font-family: 'BaybayinLopezRegular';
  src: url('baylopez-webfont.eot');
  src: url('baylopez-webfont.woff') format('woff'),
       url('baylopez-webfont.ttf') format('truetype'),
       url('baylopez-webfont.svgz#webfontsBCU3ofZ') format('svg'),
       url('baylopez-webfont.svg#webfontsBCU3ofZ') format('svg');
  unicode-range: U+1700-171F, U+1720-173F, U+1740-175F, U+1760-177F;
}

And here’s what happens when a browser reads your font stylesheet:

1. font-family name declared as: BaybayinLopezRegular
2. If MSIE: downloads baylopez-webfont.eot
3. If not, then it reads the WOFF file if the browser supports it
4. If not, then it reads the TTF file if the browser supports it
5. If not, then the browser reads the SVG file if it supports it
6. If all else fails, then it does nothing. Depending on your setup, it will either display boxes or it will search your other font declarations
7. The browser will also read the unicode-range if it supports it, and only download those specific Unicode points and ignore the rest. Making the size of transmitted to your visitors smaller.

@font-face CSS Rule Browser Compatibility Chart

The table below presents which font format is supported by the four major browsers - Chromium/Chrome, Firefox, Internet Explorer, Opera, and Safari. As you will see, no font format is supported across all five browsers except for WOFF… in the near future.

Microsoft’s EOT is out of the race, even though many font creators and foundries support it, the other four browsers are likely never going to support it. Then OTF, SVG, and TTF are out too because Internet Explorer is surely never going to implement it, and font creators/foundries do not like these formats for @font-face use.

That is where WOFF comes in. Commercial font creators and font foundries wants control (or restriction if you want it that way) to the fonts that can be used for the CSS @font-face rule.

Of course there are other advantages to WOFF like compression. WOFF is compressed, which site administrators will like because it eats less bandwidth. You can go check the fonts that came with your FontSquirrel generated font kit, WOFF is the smallest of them.

For now as with all new technologies, we have to wait until all major browsers adds support for WOFF. But that should not stop you from using it today. Just like with CSS3 and some HTML5, you can use it right now. It will save you time later if you do the update now than whenever you feel like to, which you will probably forget.

Let’s Test Your Browser

If you see the Baybayin writing script below, then your browser supports one of the font formats - EOT, OTF, SVG, TTF, or WOFF. If not, then you should upgrade your browser because my font stylesheet captures all browsers. (At least from my testing, on two computers without any Baybayin fonts - it displays correctly on all the major browsers.)

Example #1

• Filipino-Baybayin: ᜀᜅ᜔ ᜊᜓᜃᜓ ᜀᜌ᜔ ᜉᜍ ᜐ ᜆᜂ ᜇᜑᜒᜎ᜔ ᜏᜎ ᜈᜅ᜔ ᜉᜓᜏᜒᜇᜒᜅ᜔ ᜋᜁᜈᜓᜋ᜔ ᜈ ᜄᜆᜐ᜔᜶

• Filipino-Latin: Ang buko ay para sa tao dahil wala nang puwedeng mainom na gatas.

• English: The coconut is for people because there is not enough milk to drink.

Example #2

• Filipino-Baybayin: ᜉᜓᜏᜒᜇᜒ ᜃᜅ᜔ ᜌᜓᜋᜋᜈ᜔ ᜇᜑᜒᜎ᜔ ᜐ ᜊᜄᜓᜅ᜔ ᜍᜓᜎᜒᜆ᜶

• Filipino-Latin: Puwede kang yumaman dahil sa bagong roleta.

• English: You can be rich because of the new wheel.

Enjoy!

Sources:

• Web Open Font Format for Firefox 3.6
• Web typography
• Mozilla Supports Web Open Font Format (includes a list of font creators and font foundries supporting WOFF)

In my previous post I talked about “Baybayin - the Forgotten Pre-Hispanic Writing of the Filipino”. It was added in version 5.0 of the Unicode Standard together with Buhid, Hanunoo, and Tagbanwa under the “Philippine Scripts” group. But how should we properly write or mark our content written in another language and script?

For this post, I will talk about how to correctly declare the language of your content, this way you are being friendly with translation software and helper applications, and other technologies that rely on this often taken-for-granted HTML attribute. As is shown in our image, everyone can see the writing script used, but in the digital world there are people who do not have the fonts you are using. There are also people who do not use the same browser as you and me use - it could be a text-only browser, a speech browser, or a Braille browser.

It is then only appropriate that we properly and correctly tag our content with the language and script we are using. Get ready to use the LANG attribute a lot.

When creating websites, it is important to properly declare the language being used on the webpage. For example, I use the following for my sites:

1

<html lang="en-PH">

It is also important to declare the character set especially when you are going to use any characters beyond the scope of ASCII. This is how it looks like:

1

    <meta charset="UTF-8" />

Putting it all together, our basic HTML should be.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<html lang="en-PH">
    <head>
        <meta charset="UTF-8" />
        <meta description="My Website" />
        <meta keywords="Philippines, Baybayin" />
        <title>My Baybayin Websitetitle>
    head>
    <body>
        <p>Mabuhay!p>
    body>
html>

Now let’s dig-in…

The lang attribute

The HTML lang attribute defines the language of the content enclosed within the element it was declared. The codes are called subtag, and for my Filipino readers, there are only three subtag types you should worry about: language-Script-REGION. The full format: language-extended_language-Script-REGION-variant-extension-privateuse.

See the table below:

If you want to find the subtags for a particular language, previously we have to check different websites and plenty of official code lists. A time-consuming task (although normally you only have to do this once), right? Well, the latest official subtags can now be found in the IANA Language Subtag Registry. It is now the universal source for all valid subtags.

According to the latest list (as of this writing), the subtags that are related to the Philippines are the following (if I missed anything, please leave a comment below):

Languages

• Tagalog

  • Type: language
  • Subtag: tl
  • Description: Tagalog
  • Added: 2005-10-16
  • Suppress-Script: Latn

• Bikol

  • Type: language
  • Subtag: bik
  • Description: Bikol
  • Added: 2005-10-16

• Cebuano

  • Type: language
  • Subtag: ceb
  • Description: Cebuano
  • Added: 2005-10-16

• Filipino/Pilipino

  • Type: language
  • Subtag: fil
  • Description: Filipino
  • Description: Pilipino
  • Added: 2005-10-16

• Hiligaynon

  • Type: language
  • Subtag: hil
  • Description: Hiligaynon
  • Added: 2005-10-16

• Iloko

  • Type: language
  • Subtag: ilo
  • Description: Iloko
  • Added: 2005-10-16

• Pangasinan

  • Type: language
  • Subtag: pag
  • Description: Pangasinan
  • Added: 2005-10-16

• Pampanga/Kapampangan

  • Type: language
  • Subtag: pam
  • Description: Pampanga
  • Description: Kapampangan
  • Added: 2005-10-16

• Philippine languages

  • Type: language
  • Subtag: phi
  • Description: Philippine languages
  • Added: 2005-10-16

• Waray

  • Type: language
  • Subtag: war
  • Description: Waray
  • Added: 2005-10-16

Region

• Philippines
  • Type: region
  • Subtag: PH
  • Description: Philippines
  • Added: 2005-10-16

Scripts

• Buhid

  • Type: script
  • Subtag: Buhd
  • Description: Buhid
  • Added: 2005-10-16

• Hanunoo (Hanunóo)

  • Type: script
  • Subtag: Hano
  • Description: Hanunoo (Hanunóo)
  • Added: 2005-10-16

• Tagbanwa

  • Type: script
  • Subtag: Tagb
  • Description: Tagbanwa
  • Added: 2005-10-16

• Tagalog

  • Type: script
  • Subtag: Tglg
  • Description: Tagalog
  • Description: Baybayin
  • Description: Alibata
  • Added: 2005-10-16

Now that we have the subtags we need we can start coding the correct lang value for any Philippines language and script. See these examples:

• If you grew and learned English in the Philippines, more likely than not, you are using English words that are exclusive to the Philippines, as well as, following strict language rules that are taught only in Philippine English. This is the correct lang value for your website: lang="en-PH"
• If you are writing in Filipino, not Tagalog, use this: lang="fil"
• If you are writing in Tagalog, not Filipino, use this: lang="tl"
• For Bikolano, use this: lang="bik"
• In Cebuano, use this: lang="ceb"
• Hiligaynon, use this: lang="hil"
• In Iloko, use this: lang="ilo"
• In Pangasinense: lang="pag"
• Kapampangan: lang="pam"
• Waray: lang="war"
• For Philippines languages with no corresponding ISO-639-2 code, you have to use the generic subtag: lang="phi"

Then if you want to write something in Baybayin script you have to enclose it correctly with the script subtag “Tglg”. Remember, the format is: language-Script, like so:

• If writing in Filipino and Tagalog using Baybayin script, use: lang="fil-Tglg"
• In Bikolano but Baybayin script: lang="bik-Tglg"
• Cebuano using Baybayin script: lang="ceb-Tglg"
• All other Philippine languages without an ISO-639-2 subtag should use: lang="phi-Tglg"

Why do we have no lang="tl-Tglg" subtag code? Because of Suppress-Script: Latn , in the IANA Language Subtag Registry as was shown earlier. If I understood it correctly, it means that the Tagalog language as per the official standard should always be written in the Latin script. I assume then that lang=“tl-Tglg” is wrong and applications have the option to ignore it or drop the “Tglg” script subtag. In this case, just use “fil-Tglg”.

ISO-639-3 Languages

There is another subtag that you should learn if you want to target dialects and macrolanguages. You can find a list from the ISO standard ISO-639-3. Let’s use Bikolano as an example. The format to use is: language-extended_language-Script.

• If you are writing in Central Bikolano, use: lang="bik-bcl"
• If writing in Albay Bikolano / Buhi-Daraga: lang="bik-bhk"
• If in Iriga Bikolano using the Baybayin script: lang="bik-bto-Tglg"
• If in Pandan (Northern Catanduanes) using the Baybayin script: lang="bik-cts-Tglg"

The language-extended_language-Script is, as of this article, still not yet implemented. The basis for the lang attribute is always the IANA Language Subtag Registry, once it has been updated to include extended_languages then we can start using it where needed.

The phi language subtag

Next is if your language have an ISO-639-3 code and is under or part of the language code “phi” in ISO-639-2, then the phi subtag is to be used. This subtag code is considered a collective language. Good examples are:

• Kinaray-a language: lang="phi-krj"
• Maguindanao language: lang="phi-mdh"
• Maranao language written in Baybayin script: lang="phi-Tglg-mrw"
• Tausug language written in Baybayin script: lang="phi-Tglg-tsg"

As you probably have noticed the format I used was language-Script-variant and not language-extended_language-Script. My reasoning is simple - the phi language code is not really a language, it is accurately called a “collective” language entry in ISO-639-2 for all other Philippine languages not found in this version of the ISO language standard. Compare that to the bik language code, it was clearly marked as a “macrolanguage” both in ISO-639-2 and ISO-639-3.

Additionally, according to the World Wide Web Consortium or W3C, dialects of macrolanguages are considered/should be written immediately after the language subtag. In other words, if your ISO-639-2 code is considered a macrolanguage then you should use the extended_language subtag position like lang="bik-cts-Tglg". If it wasn’t defined as a macrolanguage, then you should use the variant subtag position as is the case in lang="phi-Tglg-tsg".

Examples, examples, and more examples…

If you website is mainly about Iriga and you write in your own language, then you should adjust your website’s header files accordingly:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<html lang="bik-bto">
    <head>
        <meta charset="UTF-8" />
        <meta description="Ang Website Ko Sa Iriga Bikolano" />
        <meta keywords="Philippines, Baybayin, Iriga, Bikolano" />
        <title>Ang Website Ko Sa Iriga Bikolanotitle>
    head>
    <body>
        <p>Mabuhay!p>
    body>
html>

If you want to write “Happy Father’s Day” in Baybayin, this is how you do it:

1

  <bdi lang="fil-Tglg">ᜋᜎᜒᜄᜌᜅ᜔ ᜀᜍᜏ᜔ ᜈᜅ᜔ ᜋᜅ ᜀᜋbdi>

Simple? Cool! Just remember that when writing language tags, keep it as simple and as short as possible. If you do not have a need to be very specific like say lang="bik-bcl" then don’t be! Simply use lang="bik". This is especially true for blogs. So if your blog is in Filipino language (!not Tagalog!) then you use:

1

<html lang="fil">

Only be specific when you need it or when your site caters mainly to that particular audience and/or region. Additionally, if you are going to use (which you probably will) other languages and scripts, enclose it always in a span or div element as I’ve shown in my Baybayin example above.

Easy? Yes it is. It takes time to get used to it, and yes, it is confusing at first. But you will get the hang of it eventually. Go on and update your websites now and start practising marking your content with the correct language and script.

Maybe you have read my HOW TO: Add DISQUS Manually on Blogger/BlogSpot but found it is for XML-based templates. Fret not, in this how-to, we are going to integrate DISQUS on your Blogger/BlogSpot Classic/Custom Template!

Check for updates below this guide. Latest update on Tuesday, 2009-04-28.

But first, thanks to Nathan Henderson for sharing the changes he did. I then added a few more edits to give the finishing touch. Last but definitely not the least, read this warning.

Step 1

• 1.1: Add this to your CSS area or CSS file:

  1 2 3 4

  /* Depending on your template, sometimes on some browsers, disqus doesn't auto-width 100% */ #disqus_thread, #disqus_thread #dsq-content { width: 100%; }

Step 2

Step 2 is for the “0 Comment”; “1 Comment”; “10 Comments” link that shows on your main page.

• 2.1: Look for:

  1	<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$>span>a>

  OR

  1	<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> Commentsa>

• 2.2: Change it to:

  1 2 3 4

  <a class='comment-link commentslink' href='<$BlogItemPermalinkUrl$>#disqus_thread'><span style="text-transform:lowercase">View Comments »span>a>

  OR

  1 2 3 4

  <a class='comment-link commentslink' href='<$BlogItemPermalinkUrl$>#disqus_thread'><span style="text-transform:lowercase">View Comments »span>a>

Step 3

This step is for “0 Comment”; “1 Comment”; “10 Comments” text that shows up when viewing a single post. Also note that this piece of code is not present in some templates by-design, so skip to Step 4.

• 3.1: Look for:

  1	<$I18NNumComments$>:

  OR

  1	<$BlogItemCommentCount$> Comments:

• 3.2: Change it to:

  1 2

  Comments:

  OR

  1

  Comments:

Step 4

• 4.1: Look for:

  1	<$BlogItemCreate$>

• 4.2: Change it to:

  1

• 4.3: Look for:

  1	<$BlogItemFeedLinks$>

• 4.4: Change it to:

  1

Step 5

• 5.1: Look for:

  1 2

• 5.2: Add above/before:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  <div id="disqus_thread">div> <div id='disqus_post_title' style='display:none;'><$BlogItemTitle$>div> <div id='disqus_post_permalink' style='display:none;'><$BlogItemPermalinkUrl$>div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'DISQUS-SHORT-NAME'; // required: replace example with your forum shortname var disqus_title = document.getElementById('disqus_post_title').innerHTML; var disqus_url = document.getElementById('disqus_post_permalink').innerHTML; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.a>noscript> <a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqusspan>a>

• 5.3: In Step 5.2, change the DISQUS-SHORT-NAME to your blog’s DISQUS URL.
  Example, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-NAME to libresoftware. There is one to change.

Step 6

• 6.1: Look for:

  1

  body>

• 6.2: Add above:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'DISQUS-SHORT-NAME'; // required: replace example with your forum shortname /* * * DON'T EDIT BELOW THIS LINE * * */ (function () { var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = '//' + disqus_shortname + '.disqus.com/count.js'; (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s); }()); script>

• 6.3: In step 6.2, change the DISQUS-SHORT-NAME to your blog’s DISQUS URL.
  Again, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-NAME to libresoftware. Only one to change here.

Step 7

• 7.1: Copy your updated code to your Blogger’s Template editing section and save it.

Step 8

• 8.1: Force refresh your blog and blog-post (usually CTRL+F5) to see the changes.Force refresh tells your browser to fetch a new copy of the site from the server.

You’re done! Congratulations!

Some notes to remember. This how-to guide was designed to still show the comments posted via your built-in comment system (Blogger’s in this case), while at the same disabling the ability to post new comments using the old system by removing the link.

For the adventurous, you can also find the DISQUS API here.

Updates

• Friday, 2013-08-02: Updated the JavaScript code to reflect the latest disqus script in steps 5 and 6

• Saturday, 2008-06-14

  • Updated the instructions to include the older Classic Template codes
  • Updated Step 6. The reason the ## Comments was not showing up was because I missed to change one instance of DISQUS-SHORT-NAME, which was pulling data from “highstreet5”. Please check your codes on Step 6
  • Thanks to the classic blogger code provided by David Alvarez. I was helping him integrate DISQUS and that’s when I caught the error.

• Saturday, 2008-08-02: The tutorial was added at DISQUS help forums by Andrew (from Disqus). Thank you very much and I’m glad to be of help to the community!

• Saturday, 2008-08-23: Changed /{YOUR-DISQUS-URL}/ to /DISQUS-SHORT-URL/ to avoid confusion. Thanks to hackcrack for the suggestion.

• Tuesday, 2009-04-28: Corrected Steps 5.2 and 6.2. Hat tip to chrisdfeld for catching the errors.

• Tuesday, 2011-07-06: Fixed typographical error in Step 5.2, thanks to lil-bee for bringing it to my attention

If you have other questions, don’t hesitate to reply in our Disqus-powered comments or the official Disqus forums!

If like me you are using DISQUS for your blog or site comments system, then maybe you’ve encountered a problem with integrating it to your custom theme/template. In this simple tutorial, I will show you which code bits to edit to successfully integrate Disqus into your Google Blogger/BlogSpot XML-based template. (Basically it is the same with any theme/template regardless of your blog platform or CMS.)

But if you have a Classic Template, then read my HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template instead.

Check for updates below this guide. Latest update: Saturday, 2008-08-23.

With that said, let’s begin!

Step 1

This step is for the “0 Comment”; “1 Comment”; “10 Comments” link that shows on your main page.

• 1.1: Add this to your CSS area or CSS file

  1 2 3 4

  /* Depending on your template, sometimes on some browsers, disqus doesn't auto-width 100% */ #disqus_thread, #disqus_thread #dsq-content { width: 100%; }

Step 2

• 2.1: Look for:

  1 2 3

  <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> Comments<;/a> b:if>

• 2.2: Change it to:

  1 2 3 4 5 6

  <b:if cond='data:post.allowComments'> <a class='comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'>View Comments »a> b:if>

Step 3

Step 3 is for the “0 Comment”; “1 Comment”; “10 Comments” text that shows when viewing a specific post. Some templates do not have this, so if you can’t find it, skip to Step 4.

• 3.1: Look for:

  1 2 3 4 5

  <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: b:if>

• 3.2: Change it to:

  1 2 3 4 5 6

  Comments:

Step 4

• 4.1: Look for:

  1	<div id='backlinks-container'>

• 4.2: Usually, above the code bit in 4.1, you will find this:

  1 2	<p class='comment-footer2'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/>a>

It may be enclosed on a DIV tag instead of a P element. Additionally, sometimes you may find that it’s arranged differently, if so, just look for any bits similar to 4.1.

• 4.3: Once you find it, change it to:

  1 2 3

Step 5

• 5.1: Look for:

  1	<div id='backlinks-container'>

• 5.2: Above it add:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  <div id="disqus_thread">div> <div id='disqus_post_title' style='display:none;'><data:post.title/>div> <div id='disqus_post_permalink' style='display:none;'><data:post.url/>div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'DISQUS-SHORT-NAME'; // required: replace example with your forum shortname var disqus_title = document.getElementById('disqus_post_title').innerHTML; var disqus_url = document.getElementById('disqus_post_permalink').innerHTML; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.a>noscript> <a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqusspan>a>

Note: If above the code bit shown in 5.1 there is a </b:if>, then put the code bit in 5.2 before </b:if>. If it isn’t there, as in some templates, you probably have to add it.

• 5.3: From Step 5.2, change the DISQUS-SHORT-URL to your blog’s DISQUS URL.
  Example, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-URL to libresoftware. There are two to change!

Step 6

• 6.1: Look for:

  1

  body>

• 6.2: Add above:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'DISQUS-SHORT-NAME'; // required: replace example with your forum shortname /* * * DON'T EDIT BELOW THIS LINE * * */ (function () { var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = '//' + disqus_shortname + '.disqus.com/count.js'; (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s); }()); script>

• 6.3: In Step 6.2, change the DISQUS-SHORT-URL to your blog’s DISQUS URL.
  Again, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-URL to libresoftware, there is only one to change.

Step 7

• 7.1: Copy your final code to your Blogger’s template and save it.

Step 8

• 8.1: Force refresh your blog and blog-post (usually CTRL+F5) to see the changes.
  * Force refresh tells your browser to discard your current cached copy of your site and instead fetch a new copy from the server.

At this point, you are done when all is working fine. Congratulations!

Some things to remember. This how-to was designed to still show the comments posted on your built-in comment system (usually Blogger’s) while at the same time disabling any new comments from being posted using the built-in comment system, by removing the link to do so. However, if your visitors knows the direct link to Blogger’s built-in comment system, they can still leave comments the old way.

To effectively disable it without hiding all earlier comments, you need to edit the Post Options of each of your posts and change it to “Don’t allow, show existing”. Later, Disqus will introduce an import feature, so all old comments will be copied to your Disqus as well. Until then, this is the solution that I can think of.

For the adventurous, you can find information on the Disqus API by visiting the official developers webpage.

Hope that helps!

Updates

• Friday, 2013-08-02: Updated the JavaScript code to reflect the latest disqus script in steps 5 and 6

• Saturday, 2008-05-24: Thanks to Disqus’ Daniel Ha for featuring this how-to article on the official website! Glad to be of help.

• Monday, 2008-05-26: Chinese (Taiwan) version [教學]Blogger如何手動安裝Disqus with screenshots by Joyce Wu.

• Saturday, 2008-06-14: I updated step 6. I missed to change a Disqus URL to DISQUS-SHORT-URL, it was previously pulling data from “highstreet5”. Please check your codes on step 6.

  • Thanks to the classic Blogger code provided by David Alvarez, you can find his blog at balazos.blogspot.com. I was helping him integrate Disqus and that was when I caught the code I missed on Step 6.

• Saturday, 2008-08-02: The tutorial was added at Disqus help forums by Andrew (from Disqus). Thank you very much and I’m glad to be of help to the community!

• Saturday, 2008-08-23: Changed /{YOUR-DISQUS-URL}/ to /DISQUS-SHORT-URL/ to avoid confusion. Thanks to hackcrack.

If you have other questions, don’t hesitate to post a reply in our Disqus powered comments system.