Ning Mobile and Google Tranlate

[Misty Summers]

I was able to integrate Google translate into my ning site and remove the pop up bar at the top of the page and the hover over pop ups on the translated words by adding the following code into the Add Custom CSS feild.

.goog-te-banner-frame.skiptranslate {
    display: none !important;
} body { top: 0px !important; }
.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

<meta name="google-translate-customization" content="ef276d42fdac9ac1-97ee542f221dbae9-g1bbca3471367fe77-25"></meta>

I have not been able to do this on ning mobile.

Does anyone have any suggestions for integrating Google Translator into Ning Mobile but disabling the pop up bar at the top of the page and the hover over pop ups?

Can I add code in a Cutom CSS area that will effect Ning Mobile as well?

Or is there a better way to add code into an HTML area of ning mobile?

Any suggestions would be greatly appreciated ;0) Misty

[Misty Summers]

I choose my site language as English, Translation languages all, but you can choose specific one there if you want. Display mode Automatic so that it remembers the chosen language. I also check both boxes: And: Your page contains content in multiple languages.

[Stephanie Sikorski]

i will try this and let you know. we don't do mobile so I only need it on my regular site.

[Misty Summers]

Great! I think you will love it! I do ;0) Please let me know if you run into anything that doesn't work right or that your members do not enjoy. I have not tested it live with muti-language members so there may be more that come up for you.

[Misty Summers]

Even better! You can add the following code in the custom code box in tools...and have the Google translate floating with your page on the right hand side. You will need to remove any other places you put the translator on the page becuase you can only have one per page.

<div style='position: fixed; top: 75px; right: -155px;'  id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

[Stephanie Sikorski]

I like this option best!

Question though ... 

in my custom code box I already have code - does it matter where I paste the code above?

[Stephanie Sikorski]

I did it!!! 

Thank you SO MUCH!!!!!

THANK YOU!!!!

[Misty Summers]

YEAH!!! Please let me know how it goes!!

[Misty Summers]

Nope

[Glenn Lynch]

Nice! Since your the translate wizard, how can I make the google translate bar to appear in the bottom of the original site, no the mobile site?

[dave]

I use Wibiya, it shows up at the bottom of the site.

[Misty Summers]

Glenn,

You can use Wibiya http://wibiya.conduit.com/ as mentioned by dave! Thx dave!

Or jensocial offers a great customizable tool bar I am using on my site. She offers it with her premium tips on her site: http://jensocial.com/

Or just enable the footer ad bar and copy and paste your Google translate code in there.

[dave]

Thanks Misty for sharing this great tip on integrating google on the phones Top Marks :-)