Alternative Lain Membuat Google URL Shortener Dengan URL Shortener API Key

Alternative Lain Membuat Google URL Shortener Dengan URL Shortener API Key

Bola Hero Gawai

Alternative Lain Membuat Google URL Shortener Dengan URL Shortener API Key

Alternative Lain Membuat Google URL Shortener
Pada postingan sebelumnya, kita membuat Google URL Shortener dengan menggunakan urltinyfy javascript API, nah kini kita akan mencoba membuat Google URL Shortener dengan menggunakan URL Shortener API key akun kita sendiri.

Sebenarnya saya menemukan ini sudah cukup lama dari blog kang +Beben Koben namun masih terkendala dalam membuat URL Shortener API key. Namun akhirnya kemarin saya menemukan tutorial yang pas untuk mendapatkan URL Shortener API key sehingga berhasil membuat Google URL Shortener.

Kemudian saya sedikit memodifikasi tampilannya dengan menghilangkan tombol show hide onclick sehingga short URL akan langsung tampil dan menambahkan select text dengan klik pada short URL untuk memudahkan meng-copy short URL. Juga menambahan asynchronous pada Google client.js agar tidak menyebabkan blocking render js di blog. Untuk demo silahkan lihat pada link di bawah ini, silahkan lihat pada bagian bawah postingan.


Nah bagi yang ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Silahkan simpan kode CSS di bawah ini di atas kode </head>


<style type='text/css'>
/*<![CDATA[*/
.shorten-box{font-size:100%;font-weight:bold;color:#666!important;margin:10px 0}
#output{display:inline-block;}
.shorten-text{display:inline-block;margin-right:5px;border:1px solid transparent;line-height:1;padding:5px 0;}
.output{display:inline-block;font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#000;cursor:pointer;background:#f8f8f8;border:1px solid #ccc;border-radius:3px;line-height:1;padding:5px 8px;margin:0;box-shadow: inset 0px 0px 1px rgba(0,0,0,.08);}
.output:focus,.output:active{outline:none}
.clear{clear:both}
/*]]>*/
</style>

2. Langkah Kedua
Silahkan copy kode HTML di bawah ini dan simpan di bawah postingan blog. Silahkan cari kode ini <b:includable id='post' var='post'> kemudian gulung layar ke bawah dan temukan kode di bawah ini atau yang mirip seperti di bawah ini.


      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Silahkan simpan kode di bawah ini di bawah kode di atas (di bawah kode </div>).


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shorten-box'>
<input expr:value='data:post.url' id='longurl' name='url' type='hidden'/>
<div class='shorten-text'>Share this with short URL:</div>
<div id='output'/>
<div class='clear'/>
  </div>
</b:if>

3. Langkah Ketiga
Pada langkah ini kita harus membuat URL Shortener API key sendiri agar short URL dapat berjalan di blog. Untuk membuat URL Shortener API key, silahkan ikuti tutorialnya DI SINI. Jika Anda mengikuti tutorialnya dengan benar, maka Anda akan mendapat URL Shortener API key yang benar kemudian silahkan catat API key yang Anda dapatkan.

4. Langkah Keempat
Silahkan copy javascript di bawah ini dan simpan di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

function makeShort() {
    var longUrl = document.getElementById("longurl").value;
    var request = gapi.client.urlshortener.url.insert({
        'resource': {
            'longUrl': longUrl
        }
    });
    request.execute(function(response) {
        if (response.id != null) {
            str = "";
            str += "<div class='output' contenteditable='true' onClick='document.execCommand(&quot;selectAll&quot;,false,null)' title='Click and CTRL+C'>" + response.id + "</div>";
            document.getElementById("output").innerHTML = str;
        } else {
            alert("ERROR: creating short url \n" + response.error);
        }
    });
}

function load() {
    gapi.client.setApiKey('XXXXXXXXXXXXXXXXXXXXXXXXXXXXX');
    gapi.client.load('urlshortener', 'v1', function() {
        document.getElementById("output").innerHTML = makeShort();
    });
}
window.onload = load;
//]]>
</script>
</b:if>

Silahkan ganti kode XXXXXXXXXXXXXXXXXXXXXXXXXXXXX di atas dengan URL Shortener API key Anda sendiri yang tadi Anda buat pada Langkah Ketiga.

Selesai... selamat mencoba....

Sumber:
http://beben-koben.blogspot.com/2013/06/add-google-url-shortener-api-for-blogger.html
http://hayageek.com/google-url-shortener-api/

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×