How to Auto Generate ShortURLs with Goo.gl in every Blogger Blog Post

Many people will not be bothered to write long URL. To overcome this, URL shortening is a simple alternative. In this article I will share tips on how to make automatic generate ShortURLs on your blog post with goo.gl, and I've been applied in this blog.

That you need to do to apply generate url shortener on your blog post in blogger and works automatically in each of your blog posts. First one you must create a URL Shortener API please visit here https://console.developers.google.com/apis/library

URL Shortener API is a programming interface for goo.gl URL shortener, using this API, you can integrate the application / website with Google's URL Shortener, this will allow you to get a code, whose function is to activate the URL Shortener is automatic in each of your blog posts.

Noticed on the menu that is in the picture using a red arrow, You have to select the menu to make the URL Shortener API.

Now you have to create a project is needed to enable APIs, click on the button for the "create project" that is on the right.

Now you have to create a project is needed to enable APIs, click on the button for the "create project" that is on the right. After pressing the button create a project, you will see a box.

"API Manager, Dashboard. The Google API Console uses projects to manage resources. To get started, create a project." Please press on the button create project. and create a project that according to your wishes, and press the button create.

Once the project has been successfully created, press the button "enable", now an API that you created has been activated, but you can't use it in your project until you create credentials.. please Click "Go to Credentials".

Add credentials to your project

• Which API are you using? (will automatically display the name of the project that you created)
• Where will you be calling the API from? Select "Web Browser (Javascript)"
• What data will you be accessing? select "Public data "
• Press button  What credentials do I need?

 Create an API key

• Name (already filled in automatically, but you can make the desired change)
• Accept requests from these HTTP referrers (web sites) (Optional)
• Use asterisks for wildcards. If you leave this blank, requests will be accepted from any referrer. Be sure to add referrers before using this key in production.
• Press Button Create API Key

Get your credentials

• Please Copy your API key
• then press button Done

And now you own URL Shortener API, switch to blogger, to apply the code this below, Copy kode Auto Generate ShortURLs.

 <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+="<p><a href=" + response.id + ">" + response.id + "</a></p>";   
 document.getElementById("output").innerHTML = str;   
 } else {   
 alert("ERROR: creating short url n" + response.error);}});}   
 function load() {   
 gapi.client.setApiKey('YOUR API KEY');   
 gapi.client.load('urlshortener', 'v1', function () {   
 document.getElementById("output").innerHTML = ""; }); } window.onload = load;   
 //]]>   
 </script>  
 <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>  
 bloggerkan.blogspot.com

Copy the code above, and note the red text 'YOUR API KEY " input the API KEY URL Shortener that you created earlier.

And now go to Blogger Dashboard > select the menu Template > Click on the Edit HTML button. 

Be careful if you are not familiar to edit your blog on this menu. advice from me, you copy the template first and paste it into notepad.

you're on the edit page templates let's continue execution ..: D Click the button Jump To widget, select the Blog1, Then find the code <b: includable id='post' var='post'> and find the <data: post.body />

1:  <b:if cond='data:blog.pageType==&quot;item&quot;'>  
2:  <data:post.body />  
3:  <script src='//apis.google.com/js/client.js' type='text/javascript'/>    
4:   <script type='text/javascript'>   
5:   //<![CDATA[    
6:   function makeShort() {    
7:   var longUrl=document.getElementById("longurl").value;    
8:   var request=gapi.client.urlshortener.url.insert({'resource':{'longUrl':longUrl}});    
9:   request.execute(function(response){   
10:   if(response.id!=null) {    
11:   str="";    
12:   str+="<p><a href=" + response.id + ">" + response.id + "</a></p>";    
13:   document.getElementById("output").innerHTML = str;    
14:   } else {    
15:   alert("ERROR: creating short url n" + response.error);}});}    
16:   function load() {    
17:   gapi.client.setApiKey('YOUR API KEY');    
18:   gapi.client.load('urlshortener', 'v1', function () {    
19:   document.getElementById("output").innerHTML = ""; }); } window.onload = load;    
20:   //]]>    
21:   </script>   
22:   <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>      

Copy Code: http://codepen.io/bloggerkan/pen/JKqbVx

Test Script click the button  "Create Shorten URLs" in below,
So much from me, greeting blogger and have a nice day brother :)

Advertisement