blog@jatinganhotra

render :object => Experience.new

Add Google Website Translator to Your Octopress Blog

| Comments

Having trouble viewing in English, Choose Your Language :    

 

Most countries in the world have English as their official language, but there are many countries where people don’t know English. So, it’s good to have a website translator if people from such countries visit your blog. This article will show you how to add Google Website Translator to your Octopress blog.

Recently, Google announced in a post on their Google translate blog that they are introducing a beta website translator for blogs and websites. Google translate currently works over 60 languages. Once you add the customization meta tag to a webpage, visitors will see your customized translations whenever they translate the page, even when they use the feature in Chrome and Google Toolbar. They’ll also now be able to ’suggest a better translation’ when they notice a translation that’s not quite right, and later you can accept and use that suggestion on your site.

For more information about better translation and suggestion, refer here. You can follow these easy steps to add Google Website Translator to your Octopress blog:

Step 1 : Get <meta> tag and <script>’s which the Website Translator plugin uses

  1. Go to Google Website Translator and sign in with your Google account.
  2. Enter the URL for your website and the original language of your website.
  3. You can customize the plugin settings like Translation languages (all/specific), Display modes (Inline/Tabbed/Automatic) etc. and whether you want to track Translation Traffic using Google Analytics.
  4. Google translate will give you a <meta> tag and a code snippet with <div> and <script> tags.

Step 2 : Use the above snippet in your Octopress blog

  1. Create a file google_translate.html in source/_includes/.
  2. Add the <meta> tag and the <script> tags to this file.
1
2
3
4
5
6
7
8
9
10
11
12
13
<meta name="google-translate-customization" content="ABCDEFGHIJKLMNOPQRSTUVWXYZ"></meta>
<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
              pageLanguage: 'en', 
              layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
              gaTrack: true,
              gaId: 'UA-ABCDEFGH'},
         'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

If you observe carefully, you can look at the values of the parameters that you set when you got the code. e.g. I’m using inline styling with Simple layout and Google Analytics to track translation traffic.
3. Add the following line where you want to display the plugin.

1
<div id="google_translate_element">

4. Include google_translate.html in the <head> tag in the file source/_includes/head.html, like this.
5. Run rake generate ; rake preview to play with it locally on your machine.

For more help, visit official Google translate support page or if you face any problems, mention so in the comments section.

Comments