Earlier today, Meta’s Threads.net microblogging social network rolled out its much-anticipated Fediverse feature to over 100 countries (except for European Union members), including many in the Asia-Pacific region. If you’re keen on expanding your audience as a content creator, or as a content consumer you want to follow content creators without creating yet another account, activating this feature is highly recommended.

But what exactly is the Fediverse?

What is the Fediverse?

In simple terms, the Fediverse is a mycelium network powered by the ActivityPub protocol. ActivityPub is a web standard endorsed by the World Wide Web Consortium (W3C), the authoritative body for web standards ensuring seamless interoperability across platforms. Some examples are SMTP for emails, HTTP/S for browsing, and HTML and CSS for websites. This makes the Fediverse essentially the web standard for social networking services (SNS), commonly referred to as social media in English-speaking countries.

What’s in it for me as a content creator/consumer?

Activating the Fediverse feature on your Threads.net account allows you to reach a broader audience. As a content creator, your fans more likely urged you before to join yet another network where they already are. Or, as a content consumer, you had no choice but to create a new account on yet another platform just to follow a content creator. With the Fediverse, content creators and content consumers can interact across different platforms, as long as both sides are connected to the Fediverse. This means fewer accounts to manage for both content creators and content consumers.

How to activate the Fediverse feature in Threads.net?

It’s straightforward. Follow these steps:

1. Go to Settings > Account > Fediverse sharing.

   

2. Read their version of “What is the Fediverse?” and tap Next.

   

3. Read the additional information provided and tap Turn on sharing.

   

4. Copy your Threads.net Fediverse username and share it with everyone!

   

Congratulations! You’re now part of the Fediverse mycelium network! Your posts will be visible to any account connected to the Fediverse, no matter the platform they’re using.

You don’t have to think about it. Just do your regular social network routine. It all happens in the background.

A friendly note: It’s still being tested

As of 2024-06-26, interoperability with the Fediverse via the ActivityPub protocol is still undergoing thorough testing. Expect some limitations in interaction for now, such as:

• Not all replies from the wider Fediverse may appear on Threads.net.
• Only the original post creator will see replies from the Fediverse.
• Threads.net users currently cannot reply to replies from Fediverse users.
• Posts may take at least five minutes to appear in both directions.
• Threads.net accounts cannot yet follow or search for Fediverse accounts.

Once again, welcome to the Fediverse mycelium network, powered by the standards-based ActivityPub protocol! Embrace this new way of connecting and enjoy the expanded reach of your online account!

If you are wondering if there is a way to add a colour to diacritical marks, also called accent signs, then you are in the right place! Why? Because the answer is, yes, and I will show you how.

1. Create a CSS style like this:

   1 2 3 4 5 6

   .diacritics { color: hsla(0deg, 100%, 50%, 1); color: hwb(0deg 0% 0% / 100%); font-family: "DejaVu Sans"; /* Currently, DejaVu Sans has the highest accuracy in diacritical mark positioning. */ font-weight: bold; }

2. Place the diacritics within the diacritics class

   1	<span class="diacritics">span>

Done!

Here are examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

bata<span class="diacritics">̀span>
panibugho<span class="diacritics">̂span>
ara<span class="diacritics">́span>w–a<span class="diacritics">́span>raw
ke<span class="diacritics">̈span>tke<span class="diacritics">̈span>t
sag<span class="diacritics">̃span>nay or sagn<span class="diacritics">̃span>ay
pan<span class="diacritics">͠span>gulo
a<span class="diacritics">̄span>so
h<span class="diacritics">͞span>oy
pu<span class="diacritics">̱span>sà
trab<span class="diacritics">͟span>aho

• batà [ba·tà]
• panibughô [pa·ni·būg·hô]
• aráw–áraw [a·ráw–á·raw]
• këtkët [kët·kët]
• sag̃nay or sagñay [sa·ñgay]
• pan͠gulo [pa·n͠gu·lo]
• āso [ā·so]
• h͞oy [h͞oy]
• pu̱sà [pu̱·sà]
• trab͟aho [tra·b͟a·ho]

It is also available via CodePen. Or, you can clone a simple test page from my test-repo: Noto Diacriticals Git branch.

Link icons are great. It signals to the reader what a link is. It is external? Or perhaps a video? If the link is clicked, will it start a download or will it open the default mail program? Link icons also helps a developer or content creator to easily find links, or the lack thereof.

Link icons started with and was popularised by Wikipedia a decade ago ¹. Everyone were looking for CMS plugins to add link icons to their websites and blogs. The method back then was to use a small .png image file as the icon. But today? We are going to use Unicode emojis and only use .svg if an appropriate emoji is not available.

In this post, we will add link icons support in Hugo through Markdown links. No shortcode needed, just plain regular [text](https://example.com "Title") links, thanks to the power of render hooks ².

Features

• Add link icons without using JavaScript
  • With internal Markdown links support
• Features from How-To add cross reference in Hugo markdown links

What’s new

• 2022-06-17:

  • ftp icon changed to: ↔️
  • sftp:// protocol moved to ftp category
  • ref: switched to Hugo’s findRE where appropriate
  • fix: [text](./path/to/content/) and [text.ext](./path/to/file.ext) formats

• 2022-05-27:

  • Same (sub)-domain no longer have external icon.
  • More external link support like audio, video, fonts, disk images, documents, presentations, spreadsheets, and more!

Steps

To add link icons, follow the steps below:

1. Create a file called render-link.html in this directory /layouts/_default/_markup/

2. Copy and paste this code:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

   {{- $baseurl := urls.Parse site.BaseURL -}} {{- $url := urls.Parse .Destination -}} {{- $getpage := site.GetPage .Destination -}} {{- $internal := lt (len $url.Host) 1 -}} {{/* NOTE: internal links will always have an empty $url.Host */}} {{- $fragment := $url.Fragment -}} {{- with $fragment -}}{{ $fragment = printf "#%s" $fragment }}{{- end -}} {{- $destination := "" -}} {{- if $internal -}} {{- if (strings.HasPrefix $url.Path "./") -}} {{/* NOTE: for links starting with ./ */}} {{- $urltrimmed := strings.TrimPrefix "./" $url -}} {{- $destination = printf "%s://%s/%s%s" $baseurl.Scheme $baseurl.Host $urltrimmed $fragment -}} {{- else -}} {{/* NOTE: for internal links */}} {{- $destination = printf "%s%s" $getpage.RelPermalink $fragment -}} {{- end -}} {{- else -}} {{- $destination = .Destination -}} {{- end -}} {{/* PROTOCOLS */}} {{- $chat := findRE "^(?:discord|irc[s6]?|jabber|skype|xmpp)://" .Destination -}} {{- $ftp := findRE "^(?:[as]?ftp)://" .Destination -}} {{- $magnet := strings.HasPrefix .Destination "magnet://" -}} {{- $mail := strings.HasPrefix .Destination "mailto:" -}} {{- $remote := findRE "^(?:bzr|git|s(?:sh|vn)|telnet)://" .Destination -}} {{- $tel := strings.HasPrefix .Destination "tel:" -}} {{/* READING */}} {{- $books := or (strings.HasPrefix .Destination "doi://") (findRE "\\.(?:epub|mobi|pdf)$" .Destination) -}} {{- $document := findRE "\\.(?:docx?|odt|s(?:dw|xw)|sxw|uo[ft])$" .Destination -}} {{- $text := findRE "\\.(?:csv|txt)$" .Destination -}} {{- $presentation := findRE "\\.(?:f?odp|pptx?|s(?:d[dp]|xi)|uop)$" .Destination -}} {{- $spreadsheet := findRE "\\.(?:f?ods|s(?:d[cx]|xc)|uos|xlsx?)$" .Destination -}} {{/* MEDIA */}} {{- $audio := findRE "\\.(?:(?:fl|a)ac|mka|og[ag]|opus|mp[3a]|midi?|wave?|wma)$" .Destination -}} {{- $video := findRE "\\.(?:av[1i]|divx|mk(?:3d|v)|mp(?:(?:e?g)?4?|v)|og[mv]|xvid|webm)$" .Destination -}} {{- $subtitle := findRE "\\.(?:dfxp|mks|s(?:bv|cc|rt|ub)|ttml|vtt)$" .Destination -}} {{/* EXECUTABLES */}} {{- $executable := findRE "\\.(?:apk|com|deb|exe|msi)$" .Destination -}} {{- $scripts := findRE "\\.(?:bat|sh)$" .Destination -}} {{/* OTHERS */}} {{- $fonts := findRE "\\.(?:otf|tt[fc]|woff2?)$" .Destination -}} {{- $compressed := findRE "\\.(?:[7g]?z(?:ip)?|bz(?:ip)?2?|[rt]ar)$" .Destination -}} {{- $diskimage := findRE "\\.(?:[di]mg|iso|md[sfx])$" .Destination -}} {{- $imagediting := findRE "\\.(?:psd|xcf)$" .Destination -}} {{- $icon := "" -}} {{- if $chat -}}{{ $icon = "chat" }} {{- else if $ftp -}}{{ $icon = "ftp" }} {{- else if $magnet -}}{{ $icon = "magnet" }} {{- else if $mail -}}{{ $icon = "mail" }} {{- else if $remote -}}{{ $icon = "remote" }} {{- else if $tel -}}{{ $icon = "tel" }} {{- else if $books -}}{{ $icon = "books" }} {{- else if $document -}}{{ $icon = "document" }} {{- else if $text -}}{{ $icon = "text" }} {{- else if $presentation -}}{{ $icon = "presentation" }} {{- else if $spreadsheet -}}{{ $icon = "spreadsheet" }} {{- else if $audio -}}{{ $icon = "audio" }} {{- else if $video -}}{{ $icon = "video" }} {{- else if $subtitle -}}{{ $icon = "subtitle" }} {{- else if $executable -}}{{ $icon = "executable" }} {{- else if $scripts -}}{{ $icon = "scripts" }} {{- else if $fonts -}}{{ $icon = "fonts" }} {{- else if $compressed -}}{{ $icon = "compressed" }} {{- else if $diskimage -}}{{ $icon = "diskimage" }} {{- else if $imagediting -}}{{ $icon = "imagediting" }} {{- else if and (not $internal) (ne $url.Host $baseurl.Host) -}}{{ $icon = "external" }} {{- end -}} <a href="{{ $destination | safeURL }}"{{ with or .Title $getpage.LinkTitle .Text }} title="{{ . }}"{{ end }}{{ with $icon }} class="icon_{{ . }}"{{ end }}{{ if not $internal }} rel="noopener external"{{ end }}>{{ or .Text .Title $getpage.LinkTitle | safeHTML }}a>

3. In your stylesheet file add:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   /******************** ** BGN: Link icons ** ********************/ [class^="icon_"]::after { display: inline-block; text-decoration: none; white-space: pre-wrap; margin-left: 0.25em; width: 1em; } .icon_external::after { content: "\1F517"; /* 🔗 */ } .icon_chat::after { content: "\1F4AC"; /* 💬 */ } .icon_ftp::after { content: "\2194\FE0F"; /* ↔️ */ } .icon_magnet::after { content: "\1F9F2"; /* 🧲 */ } .icon_mail::after { content: "\1F4E7"; /* 📧 */ } .icon_remote::after { content: "\1F4BB"; /* 💻 */ } .icon_tel::after { content: "\260E\FE0F"; /* ☎️ */ } .icon_books::after { content: "\1F4D6"; /* 📖 */ } .icon_document::after { content: "\1F4C4"; /* 📄 */ } .icon_text::after { content: "\1F4DD"; /* 📝 */ } .icon_presentation::after { content: url("../img/link-icons-presentation.svg"); /* https://openclipart.org/detail/36505/tango-x-office-presentation */ } .icon_spreadsheet::after { content: url("../img/link-icons-spreadsheet.svg"); /* https://openclipart.org/detail/36517/tango-x-office-spreadsheet */ } .icon_audio::after { content: "\1F3B5"; /* 🎵 */ } .icon_video::after { content: "\1F4FD\FE0F"; /* 📽️ */ } .icon_subtitle::after { content: url("../img/link-icons-subtitle.svg"); /* https://openclipart.org/detail/212110/mimetype-subtitle */ } .icon_executable::after { content: url("../img/link-icons-executable.svg"); /* https://openclipart.org/detail/212161/mimetype-binary */ } .icon_scripts::after { content: url("../img/link-icons-scripts.svg"); /* https://openclipart.org/detail/36175/tango-text-x-script */ } .icon_fonts::after { content: url("../img/link-icons-fonts.svg"); /* https://openclipart.org/detail/35257/tango-preferences-desktop-font */ } .icon_compressed::after { content: "\1F5DC\FE0F"; /* 🗜️ */ } .icon_diskimage::after { content: "\1F4BD"; /* 💽 */ } .icon_imagediting::after { content: url("../img/link-icons-imageediting.svg"); /* https://openclipart.org/detail/231061/artists-brush-and-paint */ } /******************** ** END: Link icons ** ********************/

4. Download .svg icons: link-icons.7z

   • Sources (all in the Public Domain):

     • Presentation: tango x office presentation by warszawianka
     • Spreadsheet: tango x office spreadsheet by warszawianka
     • Subtitle: mimetype subtitle by sixsixfive
     • Executable: mimetype binary by sixsixfive
     • Scripts: tango text x script by warszawianka
     • Fonts: tango preferences desktop font by warszawianka
     • Image editing: Artists Brush And Paint by GDJ

     It is possible to hotlink from the listed sources. However, there is no information if they were setup for it.

5. Extract the .svg files in /static/img/ folder.

How to use

The following Markdown links

- External links
  - [https://example.com/#fragment](https://example.com/#fragment "https://example.com/#fragment")
- Chat
  - [irc://](irc://example.com "irc://") | [ircs://](ircs://example.com "ircs://") | [irc6://](irc6://example.com "irc6://") | [xmpp://](xmpp://example.com "xmpp://") | [jabber://](jabber://example.com "jabber://") | [discord://](discord://example.com "discord://") | [skype://](skype://example.com "skype://")
- FTP
  - [sftp://](sftp://example.com "sftp://") | [ftp://](ftp://example.com "ftp://") | [aftp://](aftp://example.com "aftp://")
- Magnet
  - [magnet://](magnet://example.com "magnet://")
- Mail
  - [mailto:](mailto:noreply@example.com "mailto:")
- Remote
  - [telnet://](telnet://example.com "telnet://") | [ssh://](ssh://example.com "ssh://") | [git://](git://example.com "git://") | [svn://](svn://example.com "svn://") | [bzr://](bzr://example.com "bzr://")
- Tel
  - [tel:](tel:123-456-7890 "tel:")
- Books
  - [doi://](doi://example.com "doi://") | [.epub](https://example.com/file.epub ".epub") | [.mobi](https://example.com/file.mobi ".mobi") | [.pdf](https://example.com/file.pdf ".pdf")
- Document
  - [.odt](https://example.com/file.odt ".odt") | [.sdw](https://example.com/file.sdw ".sdw") | [.sxw](https://example.com/file.sxw ".sxw") | [.uof](https://example.com/file.uof ".uof") | [.uot](https://example.com/file.uot ".uot") | [.doc](https://example.com/file.doc ".doc") | [.docx](https://example.com/file.docx ".docx")
- Text
  - [.txt](https://example.com/file.txt ".txt") | [.csv](https://example.com/file.csv ".csv")
- Presentation
  - [.odp](https://example.com/file.odp ".odp") | [.fodp](https://example.com/file.fodp ".fodp") | [.sdd](https://example.com/file.sdd ".sdd") | [.sdp](https://example.com/file.sdp ".sdp") | [.sxi](https://example.com/file.sxi ".sxi") | [.uop](https://example.com/file.uop ".uop") | [.ppt](https://example.com/file.ppt ".ppt") | [.pptx](https://example.com/file.pptx ".pptx")
- Spreadsheet
  - [.ods](https://example.com/file.ods ".ods") | [.fods](https://example.com/file.fods ".fods") | [.sdc](https://example.com/file.sdc ".sdc") | [.sxc](https://example.com/file.sxc ".sxc") | [.uos](https://example.com/file.uos ".uos") | [.xls](https://example.com/file.xls ".xls") | [.xlsx](https://example.com/file.xlsx ".xlsx")
- Audio
  - [.flac](https://example.com/file.flac ".flac") | [.aac](https://example.com/file.aac ".aac") | [.mka](https://example.com/file.mka ".mka") | [.ogg](https://example.com/file.ogg ".ogg") | [.oga](https://example.com/file.oga ".oga") | [.opus](https://example.com/file.opus ".opus") | [.mp3](https://example.com/file.mp3 ".mp3") | [.mpa](https://example.com/file.mpa ".mpa") | [.mid](https://example.com/file.mid ".mid") | [.midi](https://example.com/file.midi ".midi") | [.wav](https://example.com/file.wav ".wav") | [.wave](https://example.com/file.wave ".wave") | [.wma](https://example.com/file.wma ".wma")
- Video
  - [.av1](https://example.com/file.av1 ".av1") | [.webm](https://example.com/file.webm ".webm") | [.xvid](https://example.com/file.xvid ".xvid") | [.mkv](https://example.com/file.mkv ".mkv") | [.mk3d](https://example.com/file.mk3d ".mk3d") | [.ogm](https://example.com/file.ogm ".ogm") | [.ogv](https://example.com/file.ogv ".ogv") | [.divx](https://example.com/file.divx ".divx") | [.avi](https://example.com/file.avi ".avi") | [.mp4](https://example.com/file.mp4 ".mp4") | [.mpeg4](https://example.com/file.mpeg4 ".mpeg4") | [.mpv](https://example.com/file.mpv ".mpv") | [.mpeg](https://example.com/file.mpeg ".mpeg") | [.mpg](https://example.com/file.mpg ".mpg")
- Subtitle
  - [.vtt](https://example.com/file.vtt ".vtt") | [.ttml](https://example.com/file.ttml ".ttml") | [.dfxp](https://example.com/file.dfxp ".dfxp") | [.srt](https://example.com/file.srt ".srt") | [.sub](https://example.com/file.sub ".sub") | [.sbv](https://example.com/file.sbv ".sbv") | [.scc](https://example.com/file.scc ".scc") | [.mks](https://example.com/file.mks ".mks")
- Executables
  - [.deb](https://example.com/file.deb ".deb") | [.apk](https://example.com/file.apk ".apk") | [.exe](https://example.com/file.exe ".exe") | [.com](https://example.com/file.com ".com") | [.msi](https://example.com/file.msi ".msi")
- Scripts
  - [.bat](https://example.com/file.bat ".bat") | [.sh](https://example.com/file.sh ".sh")
- Fonts
  - [.woff](https://example.com/file.woff ".woff") | [.woff2](https://example.com/file.woff2 ".woff2") | [.otf](https://example.com/file.otf ".otf") | [.ttf](https://example.com/file.ttf ".ttf") | [.ttc](https://example.com/file.ttc ".ttc")
- Compressed files
  - [.7z](https://example.com/file.7z ".7z") | [.7zip](https://example.com/file.7zip ".7zip") | [.tar](https://example.com/file.tar ".tar") | [.gz](https://example.com/file.gz ".gz") | [.gzip](https://example.com/file.gzip ".gzip") | [.bz2](https://example.com/file.bz2 ".bz2") | [.bzip2](https://example.com/file.bzip2 ".bzip2") | [.zip](https://example.com/file.zip ".zip") | [.rar](https://example.com/file.rar ".rar")
- Disk images
  - [.img](https://example.com/file.img ".img") | [.iso](https://example.com/file.iso ".iso") | [.dmg](https://example.com/file.dmg ".dmg") | [.mds](https://example.com/file.mds ".mds") | [.mdf](https://example.com/file.mdf ".mdf") | [.mdx](https://example.com/file.mdx ".mdx")
- Image editing
  - [.xcf](https://example.com/file.xcf ".xcf") | [.psd](https://example.com/file.psd ".psd")

Will render as:

• External links
  • https://example.com/#fragment
• Chat
  • irc:// | ircs:// | irc6:// | xmpp:// | jabber:// | discord:// | skype://
• FTP
  • sftp:// | ftp:// | aftp://
• Magnet
  • magnet://
• Mail
  • mailto:
• Remote
  • telnet:// | ssh:// | git:// | svn:// | bzr://
• Tel
  • tel:
• Books
  • doi:// | .epub | .mobi | .pdf
• Document
  • .odt | .sdw | .sxw | .uof | .uot | .doc | .docx
• Text
  • .txt | .csv
• Presentation
  • .odp | .fodp | .sdd | .sdp | .sxi | .uop | .ppt | .pptx
• Spreadsheet
  • .ods | .fods | .sdc | .sxc | .uos | .xls | .xlsx
• Audio
  • .flac | .aac | .mka | .ogg | .oga | .opus | .mp3 | .mpa | .mid | .midi | .wav | .wave | .wma
• Video
  • .av1 | .webm | .xvid | .mkv | .mk3d | .ogm | .ogv | .divx | .avi | .mp4 | .mpeg4 | .mpv | .mpeg | .mpg
• Subtitle
  • .vtt | .ttml | .dfxp | .srt | .sub | .sbv | .scc | .mks
• Executables
  • .deb | .apk | .exe | .com | .msi
• Scripts
  • .bat | .sh
• Fonts
  • .woff | .woff2 | .otf | .ttf | .ttc
• Compressed files
  • .7z | .7zip | .tar | .gz | .gzip | .bz2 | .bzip2 | .zip | .rar
• Disk images
  • .img | .iso | .dmg | .mds | .mdf | .mdx
• Image editing
  • .xcf | .psd

An official list of Uniform Resource Identifier (URI) Schemes can be found at the IANA official website. ³ However, not all popular URI Schemes were registered and/or submitted, for example, discord:// and bzr:// (as of IANA document dated 2022-05-13). Regardless, these popular unregistered URI Schemes were included in the above code.

I hope you find it useful!

One of the less commonly used feature of Hugo is render hooks. In this post, we are going to use render hooks to add internal cross reference support to Markdown’s default way of creating links: [text](https://example.com#fragment "Title").

Internal cross references in Hugo is usually done by using the built-in shortcodes {{< ref >}} or {{% relref %}} but did you know since Hugo v0.62.0 ¹ the advisable method is to use render hooks ²?

Features

• Use regular Markdown link format to cross reference within Hugo
  • {{< ref >}} and {{% relref %}}, or any variation thereof, is a thing of the past
  • Automatically use the content’s title
  • Multilingual support
  • Markdown link text and title support
  • With URI fragment support

What’s new

• 2022-06-17:

  • fix: [text](./path/to/content/) and [text.ext](./path/to/file.ext) formats

• 2022-05-27:

  • [text](./path/to/content/)
  • [text.ext](./path/to/file.ext)
  • reorganized the How To Use section

Steps

1. Create a file called render-link.html in this directory /layouts/_default/_markup/

2. Add the code below:

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

   {{- $baseurl := urls.Parse site.BaseURL -}} {{- $url := urls.Parse .Destination -}} {{- $getpage := site.GetPage .Destination -}} {{- $internal := lt (len $url.Host) 1 -}} {{/* NOTE: internal links will always have an empty $url.Host */}} {{- $fragment := $url.Fragment -}} {{- with $fragment -}}{{ $fragment = printf "#%s" $fragment }}{{- end -}} {{- $destination := "" -}} {{- if $internal -}} {{- if (strings.HasPrefix $url.Path "./") -}} {{/* NOTE: for links starting with ./ */}} {{- $urltrimmed := strings.TrimPrefix "./" $url -}} {{- $destination = printf "%s://%s/%s%s" $baseurl.Scheme $baseurl.Host $urltrimmed $fragment -}} {{- else -}} {{/* NOTE: for internal links */}} {{- $destination = printf "%s%s" $getpage.RelPermalink $fragment -}} {{- end -}} {{- else -}} {{- $destination = .Destination -}} {{- end -}} <a href="{{ $destination | safeURL }}"{{ with or .Title $getpage.LinkTitle .Text }} title="{{ . }}"{{ end }}{{ if not $internal }} rel="noopener external"{{ end }}>{{ or .Text .Title $getpage.LinkTitle | safeHTML }}a>

That’s it.

How to use

Traditional

1
2
3
4

- [https://example.com/#fragment](https://example.com/#fragment "https://example.com/#fragment")
- [direct](https://im.youronly.one/techmagus/browser-wars-3-blink-gecko-2018344/ "Title")
- [direct with #fragment](https://im.youronly.one/techmagus/browser-wars-3-blink-gecko-2018344/#fragment "Title")
- [#fragment only](#fragment)

• https://example.com/#fragment
• direct
• direct with #fragment
• #fragment only

New

Special

The [text](./path/to/content/) format is useful when you want to create a link to another part of your website, under the same (sub)-domain but not part of the current Hugo project. This format will not generate an external link icon if the How-To add link icons in Hugo markdown links is also installed.

The [text.ext](./path/to/file.ext) is useful for download links hosted under the same (sub)-domain, within or external relative to the current Hugo project.

1
2

- [send a gift](./p/gift/)
- [link-icons.7z](./techmagus/dls/link-icons.7z)

• send a gift
• link-icons.7z

Without a file extension

1
2
3
4
5
6
7
8

- [](20181210-browser-wars-iii)
- [](/20181210-browser-wars-iii)
- [](20181210-browser-wars-iii "Title")
- [](/20181210-browser-wars-iii "Title")
- [Text](20181210-browser-wars-iii)
- [Text](/20181210-browser-wars-iii)
- [Text](20181210-browser-wars-iii "Title")
- [Text](/20181210-browser-wars-iii "Title")

• Browser wars III: Blink vs Gecko Quantum
• Title
• Title
• Text
• Text
• Text
• Text

With file extension

1
2
3
4
5
6
7
8

- [](20181210-browser-wars-iii.md#fragment)
- [](/20181210-browser-wars-iii.md#fragment)
- [](20181210-browser-wars-iii.md#fragment "Title")
- [](/20181210-browser-wars-iii.md#fragment "Title")
- [Text#fragment](20181210-browser-wars-iii.md#fragment)
- [Text#fragment](/20181210-browser-wars-iii.md#fragment)
- [Text#fragment](20181210-browser-wars-iii.md#fragment "Title")
- [Text#fragment](/20181210-browser-wars-iii.md#fragment "Title")

• Browser wars III: Blink vs Gecko Quantum
• Title
• Title
• Text#fragment
• Text#fragment
• Text#fragment
• Text#fragment

Not supported

Internal linking without a file extension and with a #fragment produces a wrong link.

1
2
3
4
5
6
7
8

- [](20181210-browser-wars-iii#fragment)
- [](/20181210-browser-wars-iii#fragment)
- [](20181210-browser-wars-iii#fragment "Title")
- [](/20181210-browser-wars-iii#fragment "Title")
- [Text#fragment](20181210-browser-wars-iii#fragment)
- [Text#fragment](/20181210-browser-wars-iii#fragment)
- [Text#fragment](20181210-browser-wars-iii#fragment "Title")
- [Text#fragment](/20181210-browser-wars-iii#fragment "Title")

Also take note of the following formats.

1
2

- [link-icons.7z](/dls/link-icons.7z)
- [link-icons.7z](../../dls/link-icons.7z)

Instead of the above, use [text](./path/to/file.ext) like so [link-icons.7z](./techmagus/dls/link-icons.7z) will render as: link-icons.7z

Improve it

Feel free to improve the code above and share back to the community. Please provide your website and name so you will be properly credited.

Once again congratulations on creating a Keybase account. You have joined a growing number of people worldwide who have taken their privacy and security to the next level.

Keybase offers a lot of features, there is end-to-end encrypted Chat, a free 250 GB File storage, a signed hosting, and the ability to easily sign any text, images, and the usual document files. However, there is one feature usually ignored and this feature was one of the hottest when Keybase first sent invites to testers. That is what I will guide you through today.

What is a Keybase Identity?

A Keybase identity is a secure online representation of someone (a person) or some entity (an organisation). It lists all the verified online assets (social network accounts, domain names, microblog accounts) of the owner of the Keybase account.

By design, it is near impossible to gain an unauthorised access to any Keybase account without an active “device” (see our previous post). This generally give us the assurance that whoever is updating a particular Keybase account is the actual owner.

However, a bad element can simply create their own Keybase account to impersonate someone. This was solved in two ways by Keybase. The first is by adding third-party identities; and the second is by being followed by other verified Keybase users.

What is a “third-party identity”?

A third-party identity is an account well-known to be under the control of the Keybase account owner. This could be a Twitter account, a domain name, a Mastodon account, or any of the different services supported by Keybase.

By adding multiple third-party identities, a Keybase account’s trust factor—if we can call it that—increases. An impersonator will not be able to add the official Twitter account of their target under their fake Keybase account. They can add their own fake Twitter account or if they successfully gained unauthorised access to the official account. It becomes harder for an impersonator to establish trust to their fake Keybase account when the official one also added a well-known Mastodon account or the domain names he or she owns.

It is impossible for a fake Keybase account to acquire the same level of trust the official account have by that point. Check my Keybase account here and count how many third-party identities are listed. An impersonator will need to have access to all of those social media accounts and domain names before they can add it to their fake Keybase account. Unless they put a gun on my head, they will not be able to do it (especially since I also use two-factor authentication in those accounts).

How to add a third-party identity?

It is quite simple, follow these steps.

1. Launch Keybase and go to your profile
2. Click/tap "Prove your Twitter"
3. Enter your Twitter username
4. Copy the text shown exactly as it appears and tweet it; or just click the "Tweet it now" button
5. After tweeting, go back to Keybase if you were not redirected, and click the "Reload profile" button
6. Your Keybase profile should now show your Twitter as a verified third-party identity

See the verication tweet live.

Repeat the process for every third-party account you have which is supported by Keybase. If a third-party service is a shared account, for example domain names or corporate microblogging accounts, it is possible to have multiple Keybase accounts verified. Check the Mastodon account for the Kolverse Worldbuilding and Writing Project, there are two Keybase accounts which verified ownership of it: @VersesSpace@writing.exchange.

Let’s say your Twitter account was hacked or you no longer have access to it. It is imperative to revoke it from your Keybase account. Simple go back to your Keybase profile, click your Twitter account, and revoke it. What it means is you are officially declaring that Twitter account to be no longer yours and any posts from it did not come from you.

It is true there could be a delay to the timestamp when you disavowed your third-party identity to when it was actually compromised, however, remember that by the time we discover our account was compromised it is always after the fact. There is nothing that can be done in that regard other than to revoke it in your Keybase account so you have an official timestamp for record purposes (especially if later you are accused of the content posted by your compromised third-party identity).

Why is being followed important?

When other Keybase users follows your Keybase account, they are automatically signing your profile or Keybase identity. A follower is virtually saying “I verify this account is who s/he claims to be and the third-party identities s/he added as of this date and time I also verified to be owned by this Keybase user”.

Whenever a Keybase user changed anything in their third-part identities, their followers can optionally verify those changes by visiting the account. If they do, they are signing it effectively saying “I have checked the changes in this account’s third-party identities and have confirmed it as valid”. The more Keybase users who follows and/or verify the changes, the higher the trust factor.

Getting your family & friends to follow your Keybase account and verifying changes in your third-party identities makes it very solid that your Keybase account is actually yours and those third-party identities are also actually yours and have full control. An impersonator or fake account will not be able to build this kind of trust level.

Again, what if a third-party identity was compromised? Revoke it. Your Keybase followers can then visit your profile and confirm the change. By doing so, they are signing or adding their Keybase signature into your revocation update. We can probably say they effectively stand as “witnesses” when you revoked your compromise third-party identity.

There you go. Add all those third-party identities into your Keybase account as a “verified identity” and get your family, friends, and followers to verify those changes. The higher the trust factor of your Keybase account, the stronger and more secure your digital identity becomes.

Freedom, anonymity, privacy, & security, are the most important part of our lives, and this is especially true today as we move faster into the digital world. We need to secure our online communications to prevent anyone from listening. We need to prove the identity of the other person we are working with. We need an easy way to use encryption to keep private data from being seen by unauthorised individuals.

There are various software, apps, services, available which offers one, two, or maybe three features mentioned. However, there is one which is largely ignored, that is Keybase.

What is Keybase?

To put it simply, Keybase is a tool which makes it easier for regular users to do encryption and signing. Private stuff stays private. Accounts are secure against spoofing, phishing, and scamming. It also helps in establishing which online accounts are officially owned by a Keybase user, effectively nullifying online attacks through impersonation.

In other words, every person who takes their freedom, anonymity, privacy, & security very seriously must have a Keybase account.

Let’s get you started with Keybase

The first thing to understand is registration through a web browser is not possible by design and for security reasons. New users must download Keybase which is available in GNU/Linux, Android, iOS, and Windows: download Keybase here.

* We’re using Keybase for Android below, the process is the same regardless of platform.

1. Launch Keybase
2. Click the "Create an account" button
3. Pick a username. Mandatory; public; permanent
4. Name this device. Mandatory; public; permanent This can be any name/label useful for you to identify which device (laptop, desktop, server, phone) you logged-in your Keybase account.
5. Phone number. Optional; private Used to help other people find your Keybase account.
6. Email address. Optional; private Used to help other people find your Keybase account.

Congratulations! You have successfully created a Keybase account and have taken your first step in establishing a way for others to prove your online identity beyond any reasonable doubt as well as to chat, share files, collaborate with your team, with a peace of mind everything is automatically end-to-end encrypted and signed.

Create a “Paper Key” for recovery

Establishing a way for others to prove our online identity, chat with family & friends, and collaborate with teams, would be practically useless if we later can not login our account. In Keybase, each [re]-installation is considered a “new device” regardless if it was exactly the same device used.

What is a “device”?

A “device” in Keybase is simply an access point or a “device” where an account is logged-in.

Registering each devices creates another security layer, if a phone was stolen one can simply “Revoke” the device. If for some reason the account was not automatically logged-out, any actions made from the “Revoked” device is automatically invalid.

Let’s create a new paper key.

1. Go to the "Hamburger Menu" (lower-right corner in Android and iOS)
2. Click "Devices"
3. Click "Add a device or paper key"
4. Click "Create a paper key"
5. Wait until the random words (a.k.a. paper key) are generated Write your paper key down and place it somewhere safe and fully secure. This can be in your bank stash where only you can access; or in a 2048-bit encrypted file which only you knows how to decrypt and where the encrypted file is located.

   Never ever leave it where anyone can easily find it. If they know what it is for, then they know how valuable it is.

6. Tap the switch button "Yes, I wrote this down"
7. Click "Done"

What is a “Paper Key” for?

A Keybase paper key is technically a “device”. It’s main purpose is to give the account owner a way to confirm a “new device” if a registered literal device is not or no longer available.

Many new Keybase users skip this step, uninstalls Keybase, and later can no longer login because they are stuck in the “new device” process. Without an existing device logged-in to Keybase you can not confirm a “new device”. A paper key acts as an “existing device” to approve a “new device”. The used paper key can be optionally revoked and a new one created (a very good practice); or create a new paper key every three months (an even better practice).

There is another way to recover a Keybase account if a paper key is not available. The catch with this method is your Keybase account will be reset back to start, all confirmed online accounts, domain names, devices, teams, followers, following, will be removed; it is as if you created a new account. The reason behind this is if you no longer have access to any of your “devices” (including your paper keys if you created any), then it is assumed all of your devices were lost and/or compromised.

Welcome to Keybase! Before you start exploring Keybase, noticed how you were not asked to enter a password/passphrase? It is only used if you want to login via a web browser—which is not advisable—and if you prefer to auto-logout when you close the Keybase app (an added security; if you reinstalled Keybase it will be considered a “new device”). We will discuss this another day.

Here is a short guide on how to activate and use Baybayin-Buhid, Baybayin-Hanunoó, Baybayin-Tagalog, and Baybayin-Tagbanwa, using Google’s Gboard app.

How to Install

1. Download the Gboard app from the Google Play Store and Apple App Store (not yet available for iOS).

2. Go to the Gboard settings

   • In Android 9 Pie: Settings > System > Languages & Input > Virtual keyboard > Gboard
   • In Android 8 Oreo: Settings > Languages & Input > Keyboard > Gboard

3. Go to Languages

4. Tap the “ADD KEYBOARD” button at the bottom of the screen

5. In the “Add keyboard” page, choose:

   • “Filipino (Baybayin)” – Baybayin-Tagalog
   • “Hanunuo” – Baybayin-Hanunoó (Mangyan)
   • “Buhid” – Baybayin-Buhid (Mangyan)
   • “Aborlan” – Baybayin-Tagbanwa [thank you to Ki Wakat for informing us]

6. Optionally, add:

   • “English (Philippines)”
   • “Filipino (Latin)”

7. Then remove any other keyboard layouts which were automatically added.

Not working? Join the Beta

If you can not find the keyboard layouts mentioned above, one possible reason is your Google Play Store account and/or unit is yet to receive an update push. Until then, joining the beta is the only way.

1. Go to the Gboard app Google Play Store page
2. Scroll-down and tap “Join the Beta”
3. Wait for a few minutes and reopen the Google Play Store app
4. Then follow again the steps in “I. How to Install"

Still no Baybayin related keyboard layouts? The last option is for you to download the latest Gboard APK, which is not advisable. But if it is your cup of tea, then download here. Remember, it may not be compatible with your phone model!

Baybayin in Gboard is now available for everyone.

2019-08-24 Update

It was discovered that the Gboard app is automatically disabling the layouts if there are no font support in the system.

For example, manufacturers Samsung and MyPhone deleted the Noto Tagalog font in their Android 7 and Android 8 models but left Noto Buhid, Noto Hanunoó, and Noto Tagbanwa. This is the reason why Samsung and MyPhone users can not see the “Filipino (Baybayin)” Gboard layout.

The best way to test this is to open this article in your favourite mobile browser and check if you can see the following texts.

• Baybayin-Buhid: ᝀᝁᝂᝃᝄᝅᝆᝇᝈᝉᝊᝋᝌᝍᝎᝏᝐᝑ
• Baybayin-Hanunoó: ᜠᜡᜢᜣᜤᜥᜦᜧᜨᜩᜪᜫᜬᜭᜮᜯᜰᜱ
• Baybayin-Tagalog: ᜃᜄᜅᜆᜇᜈᜉᜊᜋᜌᜎᜏᜀᜁᜂᜐᜑ
• Baybayin-Tagbanwa: ᝣᝤᝥᝦᝧᝨᝩᝪᝫᝬᝮᝯᝠᝡᝢᝰ

If you can not see one of those, then your mobile phone is missing the appropriate Noto font support for that script. This in turn will automatically disable Gboard support for it. It means it is time to switch to an “Android One” model.

How to type in Baybayin after activation

1. Long-tap the “spacebar” to show the “Change Keyboard” menu; or tap the “world” icon
2. Switch between the activated keyboard layouts now available (as shown in the above screeeshot)
3. Type away

Since I got my first ever smartphone, Samsung Galaxy Y (S5360), (and Android too) I was having some problems with calibrating phone’s compass. The compass applications I found in the Android Market instructs users to do a figure-8 wave. I did all kinds of figure-8 wave and well, nothing.

Until I found this video showing the one figure-8 method I haven’t tried - wrist movement. It is as simple as that, all I can do is laugh at myself for doing all the silly figure-8 movements I can think of.

Watch the video:

It works for all other phones with compass features like iPhone and Symbian based phones.

Google, the largest search engine today (and the “Microsoft” of the cyberworld), is slowly deploying IPv6 across their sites. But even if you are already connected to IPv6, you will still not get an IPv6 Google.

Why? Their current IPv6 implementation is currently in its testing phase. All IPv6 access must come from a reliable network that they have to pre-approve, this is the Google over IPv6 project.

How it works

Google over IPv6 uses the IPv4 address of your DNS resolver to determine whether a network is IPv6-capable. If you enable Google over IPv6 for your resolver, IPv6 users of that resolver will receive AAAA records for IPv6-enabled Google services …

Normally, if a DNS resolver requests an IPv6 address for a Google web site, it will not receive one…

… but a DNS resolver with Google over IPv6 will receive an IPv6 address, and its users will be able to connect to Google web sites using IPv6.

So unless you are using a DNS with Google over IPv6 enabled, the only IPv6 Google website you will be able to use is ipv6.google.com. That’s sad! Especially if most of the sites you visit are still hosted on non-IPv6 enabled servers.

Fortunately, there are many good-hearted people and corporations in the world today offering free access to their IPv6 DNS. We have Gogo6.com’s Freenet6 DNS and Hurricane Electric’s Tunnelbroker.net DNS.

But how do we use these IPv6 DNS? Let me show you how.

Ubuntu Linux way

• Go to Synaptic (System -> Administration -> Synaptic Package Manager)

• Search for “dnsmasq” and install it

• Open a Terminal (Accessories -> Terminal)

• Type:

  1	gksu gedit /etc/dnsmasq.conf

• Look for:

  1	#listen-address=

• Change it to:

  1	listen-address=127.0.0.1

• Look for:

  1	#server=/localnet/192.168.0.1

• Add the following after/below it:

  1 2 3 4 5 6 7 8

  server=/google.com/2001:470:20::2 server=/google.com/74.82.42.42 server=/www.google.com/2001:470:20::2 server=/www.google.com/74.82.42.42 server=/youtube.com/2001:470:20::2 server=/youtube.com/74.82.42.42 server=/www.youtube.com/2001:470:20::2 server=/www.youtube.com/74.82.42.42

• Save and close the file

• Still in the Terminal, type:

  1	gksu gedit /etc/dhcp3/dhclient.conf

• Look for:

  1	#prepend domain-name-servers 127.0.0.1;

• Uncomment that line by removing the sharp (’#’) sign

• Save and close the file

• Still in the Terminal, type:

  1	gksu gedit /etc/resolv.conf

• Before any other nameserver entries, add this:

  1	nameserver 127.0.0.1

• Save and close the file

• Still in the Terminal, type:

  1	sudo /etc/init.d/dnsmasq restart

What happens is this: we are using dnsmasq to reroute all queries to google.com to HE’s IPv6 DNS which has been confirmed to be Google over IPv6 enabled. Any Google services that are not yet using IPv6 or not yet part of the project will simply use IPv4, like the YouTube entry we added (read: YouTube is the IPv6 team’s number one priority right now).

But if you are not using DHCP, then the DHCP edits you did previously will not work. Or if you are using NetworkManager to manage your connection settings, then it will only overwrite your resolv.conf file. Here’s what you should do to solve this:

• Open your NetworkManager and go to your network/connection profile (example: eth0)

• Open/edit it and go to the “IPv4 Settings” tab

• In the “DNS servers:” field, simply add this before any other DNS entries you may have:

  1

  127.0.0.1

• Click “Apply”, then close it.

  This way, every time the NetworkManager connects and overwrites the resolv.conf file, it will always add 127.0.0.1 to the file. Just like in the DHCP edits you did above, it ensures that the listening IP being used by dnsmasq is the first DNS your system will check when you are browsing.

In your terminal type:

1

ping6 www.google.com

You should see something like this:

1
2
3

ping6 www.google.com
PING www.google.com(tx-in-x68.1e100.net) 56 data bytes
64 bytes from tx-in-x68.1e100.net: icmp_seq=1 ttl=59 time=231 ms

These are the Google sites and services tested to be accessible via IPv6 (as of this article):

• Google Sites: https://sites.google.com
• Google Translate: https://translate.google.com
• Google Earth: https://earth.google.com
• Google Moderator: https://web.archive.org/web/20150621104346/https://moderator.appspot.com/
• Google FeedBurner: https://feedburner.google.com
• Google YouTube: https://www.youtube.com
• Google App Engine: https://appengine.google.com
• Google Code: https://code.google.com
• Google Docs: https://docs.google.com
• Google Health: https://health.google.com
• Google Mail (“gmail”): https://mail.google.com
• Google Wave: https://wave.google.com
• Google Blogs: https://web.archive.org/web/20140819225340/https://blogsearch.google.com/
• Google Images: https://images.google.com
• Google News: https://news.google.com
• Google Maps: https://maps.google.com
• Google Picasa: https://picasa.google.com
• Google Picasa Web Albums: https://picasaweb.google.com
• Google Accounts: https://www.google.com/accounts
• Google Ad Manager: https://www.google.com/admanager
• Google AdSense: https://www.google.com/adsense
• Google Analytics: https://www.google.com/analytics
• Google Calendar: https://www.google.com/calendar
• Google Finance: https://www.google.com/finance
• iGoogle: https://www.google.com/ig
• Google Reader: https://www.google.com/reader/
• Google Search: https://www.google.com
• Google Alerts: https://www.google.com/alerts
• Google Apps: https://www.google.com/apps
• Google Chrome: https://www.google.com/chrome
• Google Directory: https://web.archive.org/web/20111109041904/https://www.google.com:80/dirhp
• Google Mars: https://www.google.com/mars
• Google Mobile: https://www.google.com/intl/en/mobile
• Google Moon: https://www.google.com/moon
• Google Sky: https://www.google.com/sky
• Google and Space: https://web.archive.org/web/20110925082258/https://www.google.com:80/space/
• Google Talk: https://www.google.com/talk

Not yet accessible via IPv6:

• Google AdWords: https://adwords.google.com
• Google Scholar: https://scholar.google.com
• Google Orkut: https://www.orkut.com

As far as I know, it is not possible to host a “sub-folder” in another server, thus we can safely assume that all Google sites with this URL format: www.google.com/{sitename} are IPv6 enabled. However, Google sites and services that are using a subdomain.google.com URL or any other, can either be IPv6 already or not. Subdomains can easily be pointed to a totally different server somewhere in cyberspace.

How about Windows users?

For those who are still using Windows XP, you are out-of-luck. Even if you can add an IPv6 DNS, it will not work, I tried it myself and it was confirmed by Mikael Lind here.

Update for Windows XP users: I found a way to do it and I will be posting it here soon! The life of your too old OS just got a little bit longer.

For Windows 7 users, you will have to wait until I can get a Win7 OS or a machine that I can break. Or better ask the experts in IPv6 like the guys and gals of the gogo6 Community.

Update 2010-02-25: Sorry WinXP users you really have to upgrade to Windows 7. The method works but it is not consistent - sometimes it works, sometimes not. It is also very different per machine (it is weird!) even if you have everything duplicated perfectly.

It will only invite frustration and plenty of questions. Again, I recommend upgrading to Windows 7 if you want a consistent and stable IPv6 capability.

Update 2010-09-20: Google Sites, Google Translate, Google Earth, Google Moderator, and Google FeedBurner, are now all IPv6 enabled.

IPv6 or Internet Protocol version 6 is the answer to our IPv4 problem. What problem? By 2011 or 2012 (according to estimates), there will be no more IPv4 addresses left. This means that, anyone with a need to have a static IP address will not be able to get any for their project or service.

When this day comes, someone must start finding IP address owners who does not really need a static address and give it to someone who needs it seriously. We may even see owners starting to sell their extra IPs at a price far more expensive that what it is worth today.

But that will not happen, because two decades ago, the powers-that-be already started experimenting with IPv6 which will give us 2¹²⁸ addresses. That is equivalent to 340,282,366,920,938,463,463,374,607,431,768,211,456 IPv6 Addresses, according to my Einstein brain calculation :p Or simply: 340 with 36 zeroes (I admit, I used a calculator).

Compare that to IPv4 which only have 2³² or 4,294,967,296 IP addresses. It is a huge difference! IPv6 which use 128-bit addresses and IPv4 which is only 32-bit. Each computer in the world can now have its own IP Address and we are only scratching the surface of IPv6. In fact, if we subtract the number of IPv4 addresses we have, we still have 340,282,366,920,938,463,463,374,607,427,473,244,160 IPv6 addresses available.

I know you have plenty of questions but time is not on our side. What I am going to answer for you today is how you can start connecting to the IPv6 Internet without waiting for your ISP to start implementing it.

For this tutorial or How-To Guide, I am going to show you how I setup my Ubuntu Linux 9.10 “Karmic Koala” Linux Mint 11 “Katya” 64-bit (based on Ubuntu 11.04 “Natty Narwhal”). So let’s begin!

• Go to Synaptic (System -> Administration -> Synaptic Package Manager)

• Search for: miredo; gogoc; and radvd and install all three.

• Open a terminal (Accessories -> Terminal)

• Type:

  1	sudo /etc/init.d/radvd stop

• Type:

  1	gksu gedit /etc/gogoc/gogoc.conf

• If your main connection is not eth0 then change if_prefix= accordingly

• If you are setting this up on a workstation computer, then change host_type=router to host_type=host

• Type:

  1	sudo /etc/init.d/gogoc restart

Update 2010-03-29: Additional step from Ubuntu 10.04 “Lucid Lynx” and up.

• Still on your terminal, type:

  1	gksu gedit /etc/default/gogoc

• Look for # CHECK_KEYFILE="yes" and change it to CHECK_KEYFILE="no"

Update 2009-12-23: An update from Jeremy Duncan on setting up your Linux box as a router.

Make sure IPV6FORWARDING is set to yes in /etc/sysconfig/network like so: IPV6FORWARDING=yes.

You are done! To test if your IPv6 is working do or visit the following:

• In your terminal, type:

  1	ping6 ipv6.google.com

  it should show something like this:

  1 2 3

  ping6 ipv6.google.com PING ipv6.google.com(fx-in-x68.1e100.net) 56 data bytes 64 bytes from fx-in-x68.1e100.net: icmp_seq=1 ttl=50 time=496 ms

• Open up your favorite browser and visit test-ipv6.com

• and/or ipv6-test.com

• and/or ip6.me

Why use a Tunnel Broker if we have Miredo/Teredo?

For one, Miredo/Teredo was developed only as a temporary gateway to the IPv6 Internet. In fact, it was set as the last access point when you have other IPv6 implementation like a tunnel broker.

Another reason is to have a static IPv6 address (even if your ISP gives you a dynamic IPv4 address). For this to work, you have to register an account over at Gogo6.com’s Freenet6 service (register here).

Then you have to edit your gogoc.conf, follow the instructions below:

• Open a Terminal again

• Type:

  1	sudo /etc/init.d/radvd stop

• Type:

  1	gksu gedit /etc/gogoc/gogoc.conf

• Adjust your existing gogoc.conf with this one:

  1 2 3 4

  userid=ENTER_YOUR_FREENET6_USERNAME_HERE passwd=ENTER_YOUR_FREENET6_PASSWORD_HERE server=authenticated.freenet6.net auth_method=any

• Type:

  1	sudo /etc/init.d/gogoc restart

You’re done! From now on, you will have the same IPv6 address everytime you connect to Freenet6’s network. However, do note that you still get a different static IP depending on which Freenet6 server you are connected. If you really want to connect to the exact same server simply change this configuration in your gogoc.conf

1

always_use_same_server=no

to:

1

always_use_same_server=yes

But before you do that, please connect to Freenet6 at least once, so your gogoc daemon will have a list of servers to connect to and be able to choose the “best” one for you. Then set it up as instructed, and you’ll be connecting to that same “best” server everytime the gogoc daemon is (re)-started. Easy?

Welcome to the next generation of the Internet - the IPv6 world.

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.

Last night, I searched if there were fonts updated to include the Philippine Peso currency sign which has been added in Unicode since version 3.2 release. The Unicode position of the Peso sign is at point 20B1 if you want to check it out for yourself.

I was planning on creating a Peso font if I can not find one, this was after the availability of the Peso sign was discussed during the [Event] Philippine Ubuntu 9.04 release party. My search turned-out positive, there’s not just one but countless of fonts with the Peso sign already included.

This is the real Peso sign: ₱ – it is not an uppercase strike-through P. Here’s a comparison:

If you can not see the Peso sign above, then you do not have an updated font, or any font for that matter, with a Peso sign included. This also means that your fonts are possibly non-Unicode compliant. Time to update.

Let’s Start Typing the Peso Sign

• For Microsoft® Office (2002+) and WordPad, there are two ways to do this:
  1. Simply Copy & Paste the Peso sign above to your document; or
  2. Type in your document the hexadecimal value of the Peso sign: 20B1 or U+20B1. Then press Alt+X (do not put a space after the hexadecimal code)
• For Firefox users, install the Unicode Input Tool/Converter extension. Then just type "Peso" in the field "Search by character name".

Let’s Put A Peso Sign In Your Computer

Here are some of the free-of-charge fonts that you can freely download and install, which already have the Peso sign included (U+20B1).

• Code2000
• DejaVu family
• Gentium family
• Linux Libertine family
• Unicode BMP Fallback SIL

Start typing those Peso signs, the correct way!

Update 2010-11-14: You can now type the ₱eso sign directly from your keyboard simply by pressing RightAlt+P or AltGr+P.  But before you can do that, you need to add the Philippines Unicode Keyboard Layout which is now available in both GNU/Linux and Windows®.

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.