`
gegewu0825
  • 浏览: 47439 次
社区版块
存档分类
最新评论

[转载]如何使用Google短网址的API来创建我们自己简单的短网址服务

阅读更多

 

由于现在使用Twitter服务的越来越多,短网址服务也越来越受欢迎。 因此越来越多的第三方的短网址服务开始大批量创建。  
如果你有兴趣,那么请跟随本文,这里将教大家如何使用Google短网址的API来创建我们自己简单的短网址服务。 Let's go!

以下是本文的目录

  1. 1. 准备
  2. 2. 创建 index.php
  3. 3. 创建gen.php
  4. 4. 演示
  5. 5. 下载
  6. 6. 结束

 

内容

1. 准备

创建两个PHP文件,并命名为 "index.php" 和"gen.php"。

  1. 1 index.php: 首页。
  2. 2 gen.php: 服务端调用Google短网址服务API。 我们不能使用JavaScript直接(跨域)从谷歌获得数据。
  3. 3 从http://code.google.com/apis/urlshortener/v1/getting_started.html#APIKey , 获得谷歌的API密钥,此密钥将用于从谷歌查询数据,这个是关键点。
  4. 4 复制和粘贴图片"load.gif" 到"index.php"同目录下。 此图片将用于AJAX的等待加载提示。

 

2. 创建 index.php

先创建一个简单的HTML原型的index.php页面:

01 <html>
02 <head>
03 </head>
04 <body>
05 <div id="container">
06  
07     <h1>Google URL Shortener</h1>
08     <div id="generator">
09         <form id="form" action="#" method="post">
10  
11             <fieldset>
12                 <input type="text" name="url" id="short">
13                 <input type="submit" value="Shorten"></input>
14  
15                 <div class="loading"></div>
16             </fieldset>
17         </form>
18     </div>
19 </div>
20 </body>
21  
22 </html>

这里将创建一个简单的文本框和提交按钮。 
效果如下:

如何使用Google短网址的API来创建我们自己简单的短网址服务

接下来,让我们添加一些CSS样式,使它更好看些。代码如下:

01 <html>
02 <head>
03 <style>
04  
05 body{   
06     width:100%; 
07     margin:0px; 
08     padding:0px;
09 }
10 #container{
11     font-family: Arial, serif; 
12     font-size:12px;   
13     padding-top:20px; 
14     width:700px;  
15     margin: auto; 
16 }
17 form{ 
18     width:100%;  
19     padding: 0px;
20     margin: 0px;
21 }
22 form fieldset{ 
23     padding:20px;
24 }
25 form input{
26     padding:5px;  
27     font-size:14px;
28 }
29 form input[type=text]{ 
30     float:left; 
31     width:80%;  
32     border: 1px solid #CCCCCC;
33 }
34 form input[type=submit]{ 
35     width:10%;  
36     margin-left:5px; 
37     float:left;
38     border: 1px solid #CCCCCC;  
39     background: #DDDDDD; 
40     cursor: pointer;
41 }
42 div.loading{  
43     display:none;
44     margin:5px; 
45     float:left; 
46     width:16px;  
47     height:16px;  
48     background-image: url("load.gif"); 
49     background-repeat: no-repeat;
50     background-position: top left; 
51     background-color: transparent;
52 }
53 </style>
54 </head>
55 <body>
56 <div id="container">   
57     <h1>Google URL Shortener</h1>
58     <div id="generator">     
59         <form id="form" action="#" method="post">   
60             <fieldset>             
61                 <input type="text" name="url" id="short">      
62                 <input type="submit" value="Shorten"></input>       
63                 <div class="loading"></div>       
64             </fieldset
65         </form
66     </div>
67  
68 </div>
69 </body>
70 </html>

我们这里就不对CSS样式进行说明了。

请注意,我们还要创建了一个"class='loading'"的"DIV" 层,这用于Ajax的加载;默认情况它是不显示的,我们使用jQuery控制它的隐藏显示。

如何使用Google短网址的API来创建我们自己简单的短网址服务

完成"index.php"的最后一步,也是最重要的一步,我们将导入jQuery库来完成Ajax操作。 
复制并粘贴以下的JavaScript代码到CSS样式下面。我们稍后将作解释。

01 <html>
02 <head>
03 <style>
04 body{   
05     width:100%; 
06     margin:0px; 
07     padding:0px;
08 }
09 #container{
10     font-family: Arial, serif; 
11     font-size:12px;   
12     padding-top:20px; 
13     width:700px;  
14     margin: auto; 
15 }
16 form{ 
17     width:100%;  
18     padding: 0px;
19     margin: 0px;
20 }
21 form fieldset{ 
22     padding:20px;
23 }
24 form input{
25     padding:5px;  
26     font-size:14px;
27 }
28 form input[type=text]{ 
29     float:left; 
30     width:80%;  
31     border: 1px solid #CCCCCC;
32 }
33 form input[type=submit]{ 
34     width:10%;  
35     margin-left:5px; 
36     float:left;
37     border: 1px solid #CCCCCC;  
38     background: #DDDDDD; 
39     cursor: pointer;
40 }
41 div.loading{  
42     display:none;
43     margin:5px; 
44     float:left; 
45     width:16px;  
46     height:16px;  
47     background-image: url("load.gif"); 
48     background-repeat: no-repeat;
49     background-position: top left; 
50     background-color: transparent;
51 }
52  
53 </style>
55 <script>    
56     $(document).ready(function(){      
57         $('#form').submit(function(){     
58             $.ajax({            
59                 type: "POST",   
60                 url: "gen.php",  
61                 data: $(this).serialize(), 
62                 beforeSend: function(){    
63                     $('.loading').show(1);     
64                 },         
65                 complete: function(){ 
66                     $('.loading').hide(1); 
67                 },      
68                 success: function(data){    
69                     $('#short').val(data);   
70                 }         
71             });     
72             return false; 
73         });  
74     });
75 </script>
76 </head>
77  
78 <body>
79 <div id="container">   
80     <h1>Google URL Shortener</h1>
81     <div id="generator">     
82         <form id="form" action="#" method="post">   
83             <fieldset>             
84                 <input type="text" name="url" id="short">      
85                 <input type="submit" value="Shorten"></input>       
86                 <div class="loading"></div>       
87             </fieldset
88         </form
89     </div>
90  
91 </div>
92 </body>
93 </html>

让我们来仔细看看,上面添加在那些的JavaScript代码:

01 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- setp 1 -->
02  
03 <script>
04     $(document).ready(function(){   
05         $('#form').submit(function(){           //step 2     
06             $.ajax({                            //step 3          
07                 type: "POST",        
08                 url: "gen.php",         
09                 data: $(this).serialize(),        
10                 beforeSend: function(){         //step 4             
11                     $('.loading').show(1);           
12                 },             
13                 complete: function(){           //step 5     
14                     $('.loading').hide(1);           
15                 },           
16                 success: function(data){        //step 6             
17                     $('#short').val(data);             
18                 }           
19             });       
20             return false;    
21         });   
22     });
23 </script>
  •  
    • 第1步:使用谷歌提供的jQuery库。
    • 第2步:一个提交的事件处理程序。
    • 第3步:使用“POST”方法的数据序列化形式,提交表单数据到“gen.php”。
    • 第4步:发送数据时,显示加载的DIV层。
    • 第5步:AJAX操作完成时,隐藏加载的DIV层 。
    • 第6步:将AJAX完成的数据显示在文本框中。

接下来,我们继续完成“gen.php”,它涉及Google的短网址API。

3. 创建 gen.php

复制并粘贴以下代码,完成“gen.php”。

01 <?php
02 //1
03 if(isset($_REQUEST['url'])&&!empty($_REQUEST['url'])){          
04     //2   
05     $longUrl = $_REQUEST['url'];  
06     $apiKey  = 'Your-Api-Key';     
07     //3  
08     $postData = array('longUrl' => $longUrl, 'key' => $apiKey); 
09     $jsonData = json_encode($postData);     
10     //4    
11     $curlObj = curl_init();   
12     curl_setopt($curlObj, CURLOPT_URL,'https://www.googleapis.com/urlshortener/v1/url'); 
13     curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);  
14     curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);  
15     curl_setopt($curlObj, CURLOPT_HEADER, 0);   
16     curl_setopt($curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json')); 
17     curl_setopt($curlObj, CURLOPT_POST, 1); 
18     curl_setopt($curlObj, CURLOPT_POSTFIELDS, $jsonData);    
19     //5  
20     $response = curl_exec($curlObj);  
21     $json = json_decode($response);    
22     //6   
23     curl_close($curlObj);  
24     //7  
25     if(isset($json->error)){    
26         echo $json->error->message;    
27     }else{      
28         echo $json->id;   
29     }    
30 }else
31     echo 'Please enter a URL';
32 }
33 ?>

在我解释这段代码之前,请先在第6行处提供你的“Google API密钥”。

  1. 1. 当提交的数据($_REQUEST ['URL'])不存在,则它会响应一个错误消息(“请输入网址”)。
  2. 2. 从$_REQUEST中得到URL。
  3. 3. 创建一个JSON数据,包含URL和谷歌API密钥。这个JSON数据将被发送到Google作为请求参数。
  4. 4. 使用PHP的cURL连接谷歌API服务器。
  5. 5. 从谷歌获取数据,并解码JSON对象。
  6. 6. 关闭cURL连接。
  7. 7. 如果返回数据有错误,就返回错误信息,否则显示短URL。

大功告成。现在你可以去体验以下自己的短网址服务了。

分享到:
评论

相关推荐

    (转载)ArcGIS Flex API配合LibertyGISI加载SHP文件.doc

    在本文中,我们将探讨如何使用开源的Flex GIS框架LibertyGIS与ArcGIS Flex API一起在浏览器端加载SHP数据。 LibertyGIS是一个专门用于展示ShapeFiles的开源Flex框架,它的官方网站位于...

    转载:ActivityGroup 实现TabHost

    但是,从Android 3.0(API级别11)开始,这个类已经被废弃,推荐使用Fragment和FragmentTransaction来替代。 **ActivityGroup的工作原理:** 1. **内部Activity:** 在ActivityGroup中,你可以定义多个内部...

    【RPA之家转载视频教程1】Facebook Messenger聊天机器人使用Dialogflow-UiPath Hyper Hack .rar

    Dialogflow是Google开发的一款自然语言处理(NLP)平台,用于构建聊天机器人和语音助手。通过识别用户输入的文本或语音,它能理解语境并提供相应的响应。在聊天机器人的开发中,Dialogflow扮演了关键角色,帮助我们...

    2008十大优秀Java应用程序(转载)

    【标题】: "2008十大优秀Java应用程序(转载)" 这些优秀的Java应用程序展示了Java在不同领域的广泛应用和强大性能。以下是对各个程序的详细解释: 10. **无线传感器开发环境Sun SPOT** - Sun SPOT是一个创新的...

    [转载]Selenium2.0之WebDriver学习总结(1).docx

    以下是一个简单的Java示例,展示了如何使用FirefoxDriver打开Google网站并输入搜索查询: ```java package demo; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa....

    快速将电脑中的文件在互联网上共享

    【描述】:“AspC#用友华表V51制作的web自定义报表系统(转载)”揭示了在这一过程中可能使用到的一种特定工具。Asp.NET是微软开发的一个用于构建Web应用程序的框架,而C#是一种广泛使用的面向对象的编程语言。用友...

    (转载)安卓点击和滑动切换页面FragmentActivity

    在Android应用开发中,Fragment是Android 3.0(API级别11)引入的一个关键组件,用于构建可重用的UI模块。Fragment可以独立于Activity存在,并且可以在多个Activity之间移动,这使得开发者能更灵活地设计用户界面,...

    安卓MP3播放器修改

    在本项目中,开发者可能使用了Android SDK,包含了必要的API和工具,用于构建和运行Android应用。 2. **MP3解码与音频播放**:MP3是一种广泛使用的音频格式,其解码和播放需要特定的库。在Android中,可以使用...

    wordpress 代码分析整理

    在WordPress中,可以通过安装统计插件如Google Analytics或Jetpack来追踪用户行为,进行数据驱动的决策。理解如何集成和解读这些数据,有助于优化用户体验和提高网站性能。 6. **WordPress的流程和结构图** 结合`...

    SEO搜索引擎优化学习资料

    - 对于竞争激烈的关键词,可以考虑使用付费广告来提高排名。 **3.2 关键词密度** - **3.2.1 什么是关键词密度** - 关键词密度是指关键词在网页内容中出现的次数与总单词数的比例。 - **3.2.2 适当的关键词密度**...

    最好的asp CMS系统科讯CMSV7.0全功能SQL商业版,KesionCMS V7.0最新商业全能版-免费下载

    我们认为“简单就是美”,因此一直以来,科汛开发人员在开发过程中无处不充分考虑用户的使用习惯,尽最大可能降低用户的使用门槛,让用户关注于内容维护本身, 而不需要投入过多的时间来学习系统的使用技巧,在细节...

    springmybatis

    查询出列表,也就是返回list, 在我们这个例子中也就是 List&lt;User&gt; , 这种方式返回数据,需要在User.xml 里面配置返回的类型 resultMap, 注意不是 resultType, 而这个resultMap 所对应的应该是我们自己配置的 ...

Global site tag (gtag.js) - Google Analytics