Cara Memasang Short Url Goo.gl di blogger

Asyik dapat ilmu baru nih, cara ini berkaitan langsung dengan maraknya penggunaan url pendek atau short url seperti layanan goo.gl - t.co - bit.ly - fb.me dan sebagainya. Kita tahu bahwa dengan url yang simple akan lebih mempermudah ketika dishare dimedia sosial ataupun memasang url diblog atau situs lain. Selain itu dari segi SEO bisa jadi dihitung sebagai backlink redirect dan jika boleh saya menyarankan sebaiknya pastikan status layanan short url tersebut 301 (permanent). Tapi untuk mencegah hal yang tidak diinginkan sebaiknya back-up dulu template kita.

Baik untuk langkah pertama pastikan anda memiliki kode API dari Google Developers Console untuk bisa mengakses kode API tersebut silakan langsung menuju ke https://cloud.google.com/console/project kemudian klik API Project lalu klik APIs & auth sehingga muncul project-project API dari google, setelah itu cari URL Shortener API dan pastikan statusnya ON untuk lebih jelas mengenai cara mendapatkan kode API bisa lihat di bersosial.com.
Jika sudah punya kode API bisa kita lanjutkan dengan membuka dashboard blogger dan langsung buka tab Template lalu Edit html, silakan pasang jquery library namun jika di template anda sudah memilikinya maka langsung saja ke bagian script kedua :
script pertama

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

Silakan pasang script kedua seperti yang terlihat dibawah ini :

<!-- shorturl -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script src='//apis.google.com/js/client.js' type='text/javascript'/>
    <script type='text/javascript'>//<![CDATA[
      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 += "<pre><code>" + response.id + "</code></pre>";
                  document.getElementById("output").innerHTML = str;
              } else {
                  alert("ERROR: creating short url n" + response.error);
              }
          });
      }

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

pasangkan script kedua sebelum kode

</head>

Jika sudah silakan cari kode :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

dan pastikan bukan bagian dari template mobile, silakan  pasang script ketiga tepat dibawah kode tersebut :

<br/><br/>
&lt;input class=&quot;btn btn-google btn&quot; type=&quot;hidden&quot; name=&quot;url&quot; value=&quot;<data:post.url/>&quot; id=&quot;longurl&quot; /&gt;
<input class='btn btn-google btn' onclick='makeShort(); this.style.visibility= &quot;hidden&quot;;' type='button' value='Create Shorten URLs'/>
<div id='output'>Loading...</div>

Dan jika sudah silakan save template anda dan lihat hasilnya, semoga sekarang anda sudah bisa mengetahui cara memasang short url goo.gl di blogger.

ncang

13 Comments

tips

Jumat, 10 Januari 2014

Artikel Terkait