Skip to main content

Translate my page with google translate

As we all know the world is getting multilingual,in our daily lives, specially on internet we find the things which are in another language and we need a way to translate it into the language we understand

As we all know about Google Translate is the place we all will go and paste the content that we want to translate,but what if we have power of that tool into our website or web page,yes it is possible with GOOGLE TRANSLATE (which is able to translate the page into more than 50 languages) to have that integrated into your own website,today we will see how with example



This tool is available from quite sometimes now,but the point is very less of the people from developer community are aware of this,so the reason behind this post is to show how any developer can make use of it and make it so simple to translate their pages...


The process...


The only need to have the power of translation on your website is copy and paste snippet of following code into your web page

<div id="google_translate_element">
</div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

Just put above snippet in your HTML mark up and run the page,you will get standard google translator logo as well as few options which we are interested in right now,see the image below




now you have the full control over language change,just select the language from available languages and see how google translate it for you

What if i do not want to translate some of the content???
Now question comes is what if there are certain portion which you do not want to translate and you want to keep it as it is,so that fix is also there,say there is copyright text or email address which you want to keep as it is,so you just have to add one CSS class to it and gogle will take care of it like following

Contact us at <span class="notranslate">daivagnas@gmail.com</span>

Now if you do not want to translate whole page so just add following

<meta name="google" value="notranslate"></meta>

I was quite amazed with the power which google provides,i hope you also do...i hope this post was useful


To see live demo just have a look at the gadget on this page at top-right-most corner
Labels:

Comments

  1. KamalAugust 31, 2010 at 3:29 AM

    Thanks buddy very useful information.
    Keep sharing such information.

    ReplyDelete
  2. Mitul NakumAugust 31, 2010 at 3:38 AM

    This comment has been removed by the author.

    ReplyDelete
  3. Daivagna NanavatiAugust 31, 2010 at 3:52 AM

    hi mitul

    i have also describe the same thing in my blog as well,that if you want to translate only part of the page you can also do it...you just have to put class="notranslate" and rest will be taken care,and yeah thxs for pointing the mistake out..i have fix it :)

    ReplyDelete
  4. Daivagna NanavatiAugust 31, 2010 at 3:56 AM

    Hi kamlesh

    thxs for the comments,i will be posting some useful posts in coming days,i think you will get notification as you are in my post mailling list...

    ReplyDelete
  5. TarjSeptember 1, 2010 at 2:11 AM

    Useful post and really nice, informative and useful blog for IT Departments.

    ReplyDelete
  6. UnknownSeptember 28, 2010 at 11:57 AM

    Great job buddy..... I tried same code & implemented in first try.....
    Thanks a lot for this kind of post...Keep going...

    ReplyDelete
  7. AnonymousDecember 29, 2010 at 4:04 AM

    this shows the power of technology and the extent the web has gone these days.
    good post.

    ReplyDelete

Post a Comment

Popular posts from this blog

Sitecore Technical Workshops - Top FAQs customers asked on XM Cloud

Hi Readers, I want to talk to you about interesting things which we have been doing which is "Technical Workshops" for our customers, so here goes the scenarios. So, we have been doing multiple types of technical workshops.  1) Training customer and their Sitecore technical team on latest and the greatest technologies like XM Cloud & Another composable stack and try enabling them for new Sitecore tech stack. 2) Customers / Potential Customers have their agenda of existing pain points, and we take a workshop on topics around them with best practices etc. little on new technologies, so they also know the future. Basically, we prepare custom targeted presentations & demos for individual workshops, and make sure it helps them answer their questions and they get insights of where Sitecore eco systems has to offer from their versatile toolset and try to keep them up to date with it. So, Purpose of this blog is, because in all these customer & their technical team's
Post a Comment
Read more

Set up leprechaun code generation with Sitecore XM Cloud Starterkit

Hi Sitecorians, It has been amazing learning year so far and with the change in technology and shift of the focus on frontend frameworks and composable products, it has been market demand to keep learning and exploring new things. Reasons behind this blog Today's topic is something that was in my draft from April-May, and I always thought that there is already a good documentation out there for  Leprechaun  and a blog post is not needed, Until I realized that there was so many of us facing same kind of issues and same kind of problems and spending same amount of time, That is where I thought, if I could write something which can reduce that repetitive troubleshooting time, That would really help the community. 1)  In a project environment, if we get into some configuration issues, we resolve them, we make sure we are not blocked and continue, but if you think same issue, same step and same scenario will come to other people, so if we can draft it online, it will help other people 2
Post a Comment
Read more

Sitecore Solr/SearchStax Auto Suggestions - suggester was not built error and fix

HI Team, This one will be very quick blog post, But sharing it here so it helps anyone on the internet having same issue Problem We are using SearchStax and we have been using auto suggestions functionality of it, Everything was working fine and suddenly lot of users started reporting that they are not able to search anything in the search box. As this was P1, I started looking into the probable cause and logs, first i saw in console that we were getting 500 error, that means there is some issue being thrown from the backend. Upon checking logs found following in logs  The error was "suggester was not built" Well, I knew there is some issue with suggester which causing it to fail, but puzzle was, It has always been working for us Now, because we have this error on SearchStax documentation, If you refer below link, it says  https://www.searchstax.com/docs/hc/suggester-was-not-built/ "The root cause is often query fields that are not defined in the Solr schema. Look in the
Post a Comment
Read more