홈페이지에 번역이 필요한경우 자동으로 번역을 해주는 api 입니다.

굉장히 심플한 소스입니다.

<style>
.goog-trans{background:#f0f0f0}
.goog-trans-control{float:left;height:40px}
.goog-trans-control a{display:inline-block;padding:0 10px;height:40px;line-height:40px;background:#383838;color:#fff;text-align:center;text-decoration:none}
.goog-trans-info{float:left;margin:0 0 0 10px;height:40px;line-height:40px;color:#686868}
.goog-trans:after{display:block;visibility:hidden;clear:both;content:''}
</style>

<script>
    function googleSectionalElementInit() {
        new google.translate.SectionalElement({
            sectionalNodeClassName: 'goog-trans-section',
            controlNodeClassName: 'goog-trans-control',
            background: '#78E7FF'
        }, 'google_sectional_element');
    }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=ko"></script>

<div id="google_sectional_element" style="display:none"></div>
<div class="goog-trans-section">
    <div class="goog-trans">
        <div class="goog-trans-control"></div>
        <div class="goog-trans-info">[번역]을 누르시면 번역이 됩니다.</div>
    </div>
    <div id="google_translate_element_area">The page you are looking at is being generated dynamically by CodeIgniter.</div>
</div>

추가적으로 페이지가 로딩되면 바로 번역이 이루어지게 하려면 아래와 같이 javascript 를 추가하시면 됩니다.

<script type="text/javascript">
    google_initialized = false;

    function google_auto_translate()
    {
        if(google_initialized)
        {
            jQuery('a.goog-te-gadget-link')[0].click();
        }
        else if( jQuery('a.goog-te-gadget-link').length )
        {
            console.log('has button');
            google_initialized = true;
            setTimeout(google_auto_translate, 500);
        }
        else{
            console.log('no button');
            setTimeout(google_auto_translate, 100);
        }
    }

    jQuery(document).ready(function(){
        setTimeout(google_auto_translate, 1000);
    });
</script>