instagram搜索_如何使用jQuery和PHP构建自己的Instagram搜索引擎

自Google推出即时搜索功能以来，它已成为Web设计中的流行趋势。在线上有一些有趣的示例，例如Michael Hart的Google图片应用。这些技术非常简单，即使是具有jQuery经验的Web开发人员也可以选择编程API和JSON数据。

对于本教程，我想解释一下我们如何构建类似的即时搜索Web应用程序 。与其从Google提取图片，我们还可以使用在短短几年中发展Swift的Instagram 。

这个社交网络最初是作为iOS的移动应用程序。用户可以拍照并与朋友分享，发表评论并上传到Flickr等第三方网络。该团队最近被Facebook收购，并为Android Market发布了一个全新的应用程序。他们的用户基础已经极大地增长，现在开发人员可以像instasearch演示一样构建出色的微型应用程序。

观看演示
下载源

获取API凭证

在创建任何项目文件之前，我们应该首先研究Instagram API系统背后的想法。您将需要一个帐户来访问开发人员门户，该门户为初学者提供了有用的说明。我们查询Instagram数据库所需要做的只是一个“客户端ID”。

在顶部工具栏中，单击“ 管理客户端”链接，然后单击绿色按钮“注册新客户端”。您需要为应用程序提供名称，简短描述和网站URL。在这种情况下，URL和重定向URI可以是相同的值，这仅是因为我们不需要验证任何用户。只需填写所有值并生成新的应用程序详细信息即可。

您会看到一长串名为CLIENT ID的字符。稍后在构建后端脚本时，我们将需要此密钥，因此我们将回到本节。现在，我们可以开始构建jQuery即时搜索应用程序。

默认网页内容

对于我们正在使用的功能，实际HTML非常薄。由于大多数图像数据是动态附加的，因此我们在页面内只需要几个较小的元素。可以在index.html文件中找到此代码。

<!doctype html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Instagram Photo Instant Search App with jQuery</title><meta name="author" content="Jake Rocheleau"><link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="ajax.js"></script>
</head><body><div id="w"><section id="sform"><small>Note: No spaces or punctuation allowed. Searches are limited to one(1) keyword.</small><input type="text" id="s" name="s" class="sfield" placeholder="Enter a search tag..." autocomplete="off"></section><section id="photos"></section></div>
</body>
</html>

我正在使用最新的jQuery 1.7.2库以及两个外部.css和.js资源。输入搜索字段没有外部表单包装器，因为我们不想提交表单并导致页面重新加载。我在搜索字段中禁用了一些按键操作，以便在用户键入时有更多有限的限制。

我们将在中间部分ID #photos中填充所有照片数据。它使我们的基本HTML保持整洁且易于阅读。所有其他内部HTML元素将通过jQuery添加，并且在每次新搜索之前也将被删除。

从API中提取

我想首先创建动态PHP脚本，然后再使用jQuery。我的新文件名为instasearch.php ，它将包含API中所有重要的后端挂钩。

<?php
header('Content-type: application/json');$client = "YOURCLIENTIDHERE";
$query = $_POST['q'];
$api = "https://api.instagram.com/v1/tags/".$query."/media/recent?client_id=".$client;function get_curl($url) {if(function_exists('curl_init')) {$ch = curl_init();curl_setopt($ch, CURLOPT_URL,$url);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);curl_setopt($ch, CURLOPT_HEADER, 0);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); $output = curl_exec($ch);echo curl_error($ch);curl_close($ch);return $output;} else{return file_get_contents($url);}
}

第一行表示返回数据的格式为JSON，而不是纯文本或HTML。这是JavaScript函数正确读取数据所必需的。之后，我进行了一些变量设置，其中包含应用程序客户端ID，用户搜索值和最终的API URL。确保更新$client字符串值以匹配您自己的应用程序。

要访问此URL数据，我们需要解析文件内容或使用cURL函数。定制函数get_curl()只是一小段代码，可以检查当前PHP配置。

如果您尚未激活cURL，这将尝试激活功能并通过其自己的函数库提取数据。否则，我们可以简单地使用file_get_contents（），它虽然速度较慢，但仍然可以正常工作。然后，我们实际上可以将这些数据拉入一个变量，如下所示：

$response = get_curl($api);

组织和返回数据

我们可以从Instagram返回此原始JSON响应，并加载所有信息。但是有太多额外的数据，遍历所有内容非常烦人。我更喜欢组织Ajax响应并确切地提取我们需要哪些数据。

首先，我们可以为所有图像设置一个空白数组。然后在foreach()循环中，我们将一个接一个地提取JSON数据对象。我们只需要三个（3）特定值，分别是$ src （全尺寸图像URL）， $ thumb （缩略图图像URL）和$ url （唯一照片永久链接）。

$images = array();
if($response){foreach(json_decode($response)->data as $item){        $src = $item->images->standard_resolution->url;$thumb = $item->images->thumbnail->url;$url = $item->link;$images[] = array("src" => htmlspecialchars($src),"thumb" => htmlspecialchars($thumb),"url" => htmlspecialchars($url));}
}

那些不熟悉PHP循环的人可能会在此过程中迷路。如果您不了解语法，请不要过多地关注这些代码段。我们的图像阵列将包含从最新发布日期提取的最多16-20张独特的照片条目。然后，我们可以将所有这些代码作为jQuery Ajax响应输出到页面上。

print_r(str_replace('\\/', '/', json_encode($images)));
die();

但是，既然我们已经了解了幕后情况，就可以跳入前端脚本了。我创建了一个文件ajax.js ，其中包含绑定到搜索字段的几个事件处理程序。如果您到现在仍在跟进，那么请激动一下，我们已经接近完成！

jQuery关键事件

第一次打开文档ready()事件时，我要设置几个变量。前两个充当搜索字段和照片容器的直接目标选择器。我还使用JavaScript计时器暂停搜索查询，直到用户完成输入后900毫秒。

$(document).ready(function(){var sfield = $("#s");var container = $("#photos");var timer;

我们仅使用两个主要功能块。当专注于搜索字段时，主处理程序由.keydown（）事件触发。我们首先检查键码是否与我们的任何禁止键匹配，如果匹配，则否定键事件。否则，请清除默认计时器并等待900ms，然后再调用instaSearch() 。

/** * keycode glossary * 32 = SPACE* 188 = COMMA* 189 = DASH* 190 = PERIOD* 191 = BACKSLASH* 13 = ENTER* 219 = LEFT BRACKET* 220 = FORWARD SLASH* 221 = RIGHT BRACKET*/
$(sfield).keydown(function(e){if(e.keyCode == '32' || e.keyCode == '188' || e.keyCode == '189' || e.keyCode == '13' || e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220') {e.preventDefault();} else {clearTimeout(timer);timer = setTimeout(function() {instaSearch();}, 900);   }
});

每次更新值时，它将自动获取新的搜索结果。我们可能还阻止了许多其他关键代码来触发Ajax函数-但在本教程中无法列出。

Ajax instaSearch（）函数

在我的新自定义函数中，我们首先在搜索字段中添加一个“正在加载”类。此类将更新相机图标以获取新的加载gif图像。我们还希望清空照片部分中剩余的所有可能数据。查询变量是从搜索字段中输入的当前值动态提取的。

function instaSearch() {$(sfield).addClass("loading");$(container).empty();var q = $(sfield).val();$.ajax({type: 'POST',url: 'instasearch.php',data: "q="+q,success: function(data){$(sfield).removeClass("loading");$.each(data, function(i, item) {var ncode = '<div class="p"><a target="_blank" href="'+data[i].src+'" class="fullsize" target="_blank"><img src="img/full-image.png" alt="fullsize"></a> <a target="_blank" href="'+data[i].url+'" target="_blank"><img src="'+data[i].thumb+'"></a></div>';$(container).append(ncode);});},error: function(xhr, type, exception) { $(sfield).removeClass("loading");$(container).html("Error: " + type); }});
}

如果您熟悉.ajax（）函数，那么所有这些参数都应该看起来很熟悉。我将用户搜索参数“ q”作为POST数据传递。成功或失败后，我们将删除“正在加载”类，并将所有响应附加回#photos包装器。

在成功函数中，我们遍历最终的JSON响应以提取单个div元素。我们可以使用$ .each（）函数并以响应数据数组为目标来完成此循环。否则，失败方法将直接从Instagram API输出任何响应错误消息。这就是所有的一切！

观看演示
下载源

最后的想法

Instagram团队在扩展如此庞大的应用程序方面做得非常出色。该API有时可能很慢，但是响应数据始终采用正确的格式并且非常易于使用。我希望本教程可以证明在第三方应用程序上有很多功能。

不幸的是，当前的Instagram搜索查询一次不允许超过1个标签。这仅限于我们的演示，但它肯定不会消除其任何魅力。您应该查看上面的实时示例并下载我的源代码副本以进行试用。另外，请在下面的帖子讨论区中告诉我们您的想法。

翻译自: https://www.hongkiat.com/blog/instagram-photo-search/