Example 1: Make a Google Translator

Example 1: Make a Google Translator Widget

This is a step-by-step Guide on how to create and publish a Translator Widget, using Google´s free Website Translator Service. The result will be a working translator on your FM website, together with a a good understanding of how the FirstMagic Widgets System works and how to tailor it with other Web Apps of your choice.

Requirements:

Familiarity with the FirstClass Client
A Google Account [or sign up during this lesson - it´s free]
Controller access to your FirstMagic
website

Production time: about 15 minutes total

Step 1: Get the Google Code

Go to this URL: http://translate.google.com/manager/website/ and click the big blue "Add to your website now" button.

You will be asked to Sign In. If you do not have a Google Account, simply create one by pressing the red "Sign Up" button; after registering, you will arrive at the page we want - the Website Translator-Add Website screen. Simply follow the procedure outlined there, and the next screen will take you to the "Get code" button.

Now, you will be presented with two code snippets. Copy both to a text editor, for example into a temporary FirstClass Document. Keep them separate.

The first one is a metatag, and it looks like this:

... Save that one for later.

The second snippet is the Widget Code we want. It looks like this:

function googleTranslateElementInit() {

new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');

}

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

Copy this snippet to the Clipboard. Logout from Google, and go back here, to the Widget Toolkit container.

Step 2: Create our FirstMagic Widget

Select the Clean Widget Template you can find in the Widget Toolkit container:
Press and hold the ALT key on your keyboard while dragging the Clean Widget Template Icon to your FirstClass Desktop. This creates a copy you can edit.
Open the copy. It looks like this:

1: Paste the Widget Code into the Widget Field [the large white box to the right]

2: Since the translater has no function as a button, check the "No Button" checkbox to disable that function.

3: Also check the "No Digital Sign" checkbox, as the google widget has no practical function in a Sign, as well as the "No Formatting" checkbox, to stop FirstMagic from wrapping the Translator in it´s own styles.

4: Fill in the metafields: What it is for and Where it will Work. This is internal notes, it will not be visible on the web.

5: Add a description of your widget in the Description Field.

6: Add a ttile, and optionally, give it an unique Widget ID.

Left: the finished Widget.

Click the "Lock Widget" padlock to complete it: this will hide the Editor Fields. The padlock will become invisible too, but you can still click it to turn the Editor back on.

Now, drag-and-drop the Widget from your Desktop and into where you want it to appear in your Website - for example the Sidebar container. Note: you will need to Unprotect it in View Properties to be allowed to move it off the Desktop.

Remember to check the "Active" checkbox to turn it on.

Step 3: Install the Meta Tag

There´s one more piece of code to deal with - the Meta Tag. Your new Widget will work fine without it, but installing it will make it more useful; this tag will identify your site to Google, which means, among other things, that your visitors can improve the automatic translation by sending in suggestions you can approve in your Google Account.

However, Meta Tags cannot be located inside Widgets. They need to reside in the Page Headers - inside the <head> tags of the HTML that makes up your site structure. In FirstMagic, we use a dedicated meta include document to take care of this.

To install the Meta Tag, do the following:

Open FM Preferences, and go to Tab 4 [Advanced Options]
In the Includes area, check the Meta HTML checkbox
A tiny button appears next to the checkbox. Click it.
Paste the meta code into the document that pops up, save and close.

... And the installation is complete. Visit your website to see how the Google Translator looks!

Addendum

The Meta HTML document can hold any number of meta tags, script tags etc. that Widgets might require. SImply add them there whenever necessary.