Tích hợp Instagram vào ứng dụng PHP, Phần 1

Sử dụng Instagram API để tích hợp hình ảnh từ Instagram vào ứng dụng PHP

Instagram là một dịch vụ chia sẻ hình ảnh phổ biến, nó cho phép người dùng tự chụp ảnh bằng các loại điện thoại thông minh và sau đó chia sẻ chúng trên web. Các nhà phát triển có thể truy cập và tải các bức ảnh này, đồng thời có thể đóng góp ý kiến (comment) và nhấn "like" thông qua Instagram REST API. Bài viết này gồm 2 phần, giới thiệu về Instagram API và các tính năng khi sử dụng cùng với ứng dụng PHP nhằm thúc đẩy khả năng sáng tạo của người dùng cũng như tạo ra các ứng dụng web mới lạ hơn.

01/02/2013 - Thêm đường link vào Phần 2 trong mục Lấy thông tin hình ảnh chi tiếtTài nguyên.

Vikram Vaswani, Tổng Giám đốc, Melonfire

Ảnh của Vikram VaswaniVikram Vaswani là nhà sáng lập và điều hành công ty Melonfire, một công ty dịch vụ chuyên tư vấn về các công cụ và công nghệ nguồn mở. Ông cũng là tác giả của những quyển sách Zend Framework: A Beginners GuidePHP: A Beginner's Guide.



18 07 2013

Giới thiệu

Nếu như bạn đang sở hữu một chiếc điện thoại thông minh chạy Android hoặc Apple có sử dụng camera, thì đồng nghĩa với việc bạn đang có cơ hội tiếp xúc với ứng dụng Instagram. Ứng dụng miễn phí này cho phép người dùng chụp ảnh, chỉnh sửa và làm đẹp hơn với các hiệu ứng đặc biệt, sau đó chia sẻ chúng với bạn bè thông qua website của Instagram. Chương trình này cũng tương tự như Twitter vậy, nhưng thay vì là "tweets" thì nay là hình ảnh. Và với hơn 100 triệu người đang sử dụng, tính đến hết tháng 9 năm 2012, rõ ràng là ứng dụng này đang ngày càng phổ biến hơn.

Bên cạnh việc cung cấp một nền tảng cho người dùng có thể chia sẻ hình ảnh, Instagram còn là một nhà phát triển nhiều tiềm năng cho công nghệ API, công nghệ cho phép những nhà phát triển có thể truy cập được vào các nội dung mà người sử dụng tạo ra, cũng như sáng tạo ra một ứng dụng web có nền tảng xoay quanh nội dung này. API này, được xây dựng theo mô hình của REST, có thể được truy nhập thông qua bất kỳ ngôn ngữ lập trình nào mà có thể hiểu đươc JSON là gì, bao gồm cả PHP.

Bài viết này gồm 2 phần tập trung giới thiệu đến các bạn Instagram API, cũng như hướng dẫn cách tích hợp và sử dụng nội dung do người dùng tạo ra trên Instagram với ứng dụng PHP. Bài viết cũng liệt kê một số ví dụ về việc truyền tải và nhận hình ảnh, lời bình luận, tìm kiếm hình ảnh theo từ khóa, truyền tải các thông tin và vị trí của người sử dụng, cũng như quản lý các mối quan hệ của họ. Bây giờ để tìm hiểu chi tiết hơn, chúng ta hãy bắt đầu tìm hiểu!


Khởi đầu

Trước khi bắt đầu phát triển các ứng dụng với Instagram API, bạn cần phải hiểu nó hoạt động như thế nào. Cũng giống như nhiều chương trình API khác, Instagram API hoạt động trên nền tảng của HTTP và sử dụng HTTP request đến các ứng dụng đầu cuối. Với yêu cầu này, hệ thống máy chủ của API sẽ tự động phản hồi thông qua nguồn cung cấp dữ liệu JSON chứa các dữ liệu được yêu cầu. Và sau đó tiến hành phân tích dữ liệu này bằng cách sử dụng một ngôn ngữ lập trình từ máy chủ (ví dụ như PHP hoặc PERL) hoặc một bộ công cụ từ phía máy của khách hàng (ví dụ như jQuery hoặc Mootools) và trích xuất nội dung từ nó để tích hợp thành một trang web.

Để hiểu rõ hơn quy trình này hoạt động thế nào, đầu tiên cần làm 2 bước sau:

  1. Tạo một tài khoản Instagram. Quy trình đăng ký là hoàn toàn miễn phí, người dùng có thể đăng ký thông qua các ứng dụng Instagram trên Android, iPhone hoặc iPad. Sau khi đăng ký sử dụng xong, chụp một vài tấm ảnh trên điện thoại và tải chúng lên trang Instagram cá nhân của bạn.
  2. Tạo một ứng dụng thứ 2 để truy cập vào các APIs Instagram. Đăng nhập vào website Instagram bằng tài khoản đã tạo ở bước đầu tiên và đăng ký thêm 1 tài khoản khách hàng thông qua giao diện điều khiển phát triển. Bạn cần phải điền hết các thông tin cơ bản dành cho khách hàng, ví dụ như họ tên, mô tả, cùng với một đường dẫn URL chứng thực OAuth 2.0 (Hình 1).
    Hình 1. Giao diện đăng ký thông tin trên Instagram (đăng ký tài khoản mới cho OAuth)
    Ảnh đăng ký Instagram client (Đăng ký mới OAuth Client)

    Sau khi các thông tin được hoàn tất, khách hàng của bạn sẽ có một ID bí mật (Hình 2). Cần lưu ý là bạn sẽ cần đến những ID này để truy cập vào API Instagram có sử dụng OAuth 2.0.

    Hình 2. Giao diện đăng ký thông tin khách hàng trên Instagram (Manage Clients)
    Ảnh đăng ký Instagram client (Quản lý các Client)

Ngay khi bạn nhận được ID bí mật của khách hàng, bạn sẽ có những công cụ hỗ trợ cần thiết để tạo ra một yêu cầu sử dụng OAuth 2.0 đến chương trình Instagram API. Các giao thức OAuth 2.0 và quy trình thực hiện khá phổ biến khi tìm tài liệu (có thể tham khảo thêm những tài liệu có liên quan ở phần Tài nguyên). Bài viết này sẽ không tập trung quá sâu vào những chi tiết này, minh họa bên trên nhằm mở ra một ví dụ khác để chỉ ra phương thức thực hiện quy trình này cùng với Instagram API.

Cũng phải lưu ý rằng việc sử dụng chương trình Instagram API cho các ứng dụng của bên thứ ba cần phải được thực hiện dưới sự quản lý của các điều khoản sử dụng chương trình này. Hãy dành một vài phút để lướt qua những điều khoản này trước khi tiến hành, để có thể đảm bảo rằng mọi quy trình thực hiện của bạn đều không có bất kỳ vi phạm nào. Bạn có thể tham khảo những tài liệu này tại phần Tài nguyên.


Chọn ra những bức ảnh phổ biến

Trước khi bắt đầu với PHP code, hãy quan sát một tí cách thức hoạt động của API Instagram. Cũng giống như các dịch vụ hoạt động trên nền tảng của REST, API được kích hoạt bằng cách tạo một yêu cầu HTTP đến một điểm nguồn. Yêu cầu HTTP này sẽ chứa một hay nhiều các thông số đầu vào; máy chủ sẽ tiến hành xử lý các thông số này và gởi trả lại một phản ứng được gọi là JSON, mà phản ứng này sẽ được phân tích và sử dụng trong một trang web. Để tăng tính bảo mật, tất cả các yêu cầu của Instagram API đều phải được thực hiện qua SSL.

Instagram API cung cấp một số các "điểm đầu cuối" khác nhau. Và các điểm này lúc nào cũng thích ứng được với các phương tiện truyền thông, các ý kiến, sở thích, tags, các địa điểm, dành cho mọi đối tượng người tiêu dùng và thậm chí cho cả các mối quan hệ của họ. Một vài "điểm đầu cuối" này có thể được truy nhập bằng cách thông qua các ID của khách hàng như một tham số yêu cầu, với những người sử dụng khác thì đòi hỏi phải có đăng ký OAuth 2.0.

Một gói Instagram điển hình chứa một nguồn cấp dữ liệu chi tiết về hình ảnh và các thông tin có liên quan. Để xem ví dụ, hãy mở trình duyệt web và gõ https://api.instagram.com/v1/media/popular?client_id=xx (thay thế xx bằng ID của bạn trong Instagram). Yêu cầu này sẽ cho ra một nguồn cấp dữ liệu JSON cùng với những hình ảnh phổ biến nhất trên Instagram ngay tại thời điểm đó. Hãy xem qua thông tin xuất ra (Hình 3) để làm quen với các element chính. Như bạn thấy, tài liệu phản hồi chứa danh sách các hình ảnh và thiết lập phổ biến, cho mỗi hình ảnh, đường dẫn hình ảnh (cho ảnh thu nhỏ, độ phân giải thấp, và một bản có độ phân giải cao), chú thích, các tag, thời gian tạo, lời bình luận, số like, bộ lọc, vị trí, đường dẫn thu gọn, thông tin người dùng, và vân vân.

Hình 3. Ví dụ về phản hồi Instagram API
Ảnh phản hồi mẫu của Instagram API

Khá dễ dàng để định dạng thông tin này vào một trang web mà có thể đọc được dưới dạng json_decode của PHP và các đuôi HTML cơ bản. Liệt kê 1 sẽ chứng minh cho quy trình này.

Liệt kê 1. Quy trình nhận các hình ảnh phổ biến
<html>
  <head></head>
  <body>  
    <h1>Popular on Instagram</h1>  
    <?php
    // load Zend classes
    require_once 'Zend/Loader.php';
    Zend_Loader::loadClass('Zend_Http_Client');

    // define consumer key and secret
    // available from Instagram API console
    $CLIENT_ID = 'YOUR-CLIENT-ID';
    $CLIENT_SECRET = 'YOUR-CLIENT-SECRET';

    try {
      // initialize client
      $client = new Zend_Http_Client('https://api.instagram.com/v1/media/popular');
      $client->setParameterGet('client_id', $CLIENT_ID);

      // get popular images
      // transmit request and decode response
      $response = $client->request();
      $result = json_decode($response->getBody());
      
      // display images
      $data = $result->data;  
      if (count($data) > 0) {
        echo '<ul>';
        foreach ($data as $item) {
          echo '<li style="display: inline-block; padding: 25px"><a href="' . 
            $item->link . '"><img src="' . $item->images->thumbnail->url . 
            '" /></a> <br/>';
          echo 'By: <em>' . $item->user->username . '</em> <br/>';
          echo 'Date: ' . date ('d M Y h:i:s', $item->created_time) . '<br/>';
          echo $item->comments->count . ' comment(s). ' . $item->likes->count . 
            ' likes. </li>';
        }
        echo '</ul>';
      }

    } catch (Exception $e) {
      echo 'ERROR: ' . $e->getMessage() . print_r($client);
      exit;
    }
    ?>
  </body>
</html>

Liệt kê 1 bắt đầu bằng việc thiết lập một Zend Framework và sau đó tạo ra một lớp Zend_Http_Client. Lớp client này được dùng để tạo và truyền tải một yêu cầu GET đến Instagram API để nhận các hình ảnh phổ biến tại https://api.instagram.com/v1/media/popular. Cần lưu ý rằng các URL phải có ID do khách hàng tạo ra thông qua giao diện điều khiển phát triển của Instagram.

Phản hồi JSON được phân tích và chuyển đổi vào đối tượng PHP thông qua phương thức json_decode() của PHP. Nếu bạn so sánh các mã ở Liệt kê 1 với các đối tượng JSON nguyên thủy được hiển thị trong Hình 3, bạn sẽ thấy được sự tương ứng giữa các đối tượng cũng như các cặp key-value (khóa-giá trị) JSON. Và bây giờ bạn có thể tương tác thông qua các đối tượng thành viên, lấy được dữ liệu các hình ảnh riêng lẻ (như đường dẫn URL của hình ảnh, tên người dùng sở hữu hình ảnh, các bình luận và số lượt like), và định dạng này cũng được hiển thị dưới dạng một trang web. Hình 4 là minh họa cụ thể.

Hình 4. Liệt kê những hình ảnh phổ biến
Hình ảnh một trang web liệt kê các ảnh phổ biến

Tìm kiếm hình ảnh dựa vào tag

Như minh họa ở Hình 3, bạn có thể liên kết mỗi hình ảnh trên Instagram với một hay nhiều tag (thẻ tìm kiếm), chúng là những từ khóa mô tả mà bạn cũng có thể dùng để phân loại hình ảnh. API cho phép người dùng thực hiện việc tìm kiếm hoặc tiếp nhận tag. Đường dẫn mà hầu hết mọi người hay dùng là /tags/search, cho phép bạn tìm kiếm các tag phù hợp với từ khóa. Ví dụ ở Liệt kê 2 sẽ minh họa chi tiết hơn.

Liệt kê 2. Tìm kiếm theo tag
<html>
  <head></head>
  <body>
    <h1>Instagram Tag Search</h1>
    <?php
    if (!isset($_POST['submit'])) {
    ?>
    <form method="post" 
      action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
      Search for:
      <input type="text" name="q" /> 
      <input type="submit" name="submit" value="Search" />      
    </form>
    <?php
    } else {
    ?>
    <h2>Search results for '<?php echo $_POST['q']; ?>'</h2>
    <?php
      require_once 'Zend/Loader.php';
      Zend_Loader::loadClass('Zend_Http_Client');

      // define consumer key and secret
      // available from Instagram API console
      $CLIENT_ID = 'YOUR-CLIENT-ID';
      $CLIENT_SECRET = 'YOUR-CLIENT-SECRET';

      try {
        // initialize client
        $client = new Zend_Http_Client('https://api.instagram.com/v1/tags/search');
        $client->setParameterGet('client_id', $CLIENT_ID);
        $client->setParameterGet('q', $_POST['q']);

        // get and display similar tags
        $response = $client->request();
        $result = json_decode($response->getBody());
        $data = $result->data;  
        if (count($data) > 0) {
          echo '<ul>';
          foreach ($data as $item) {
            echo '<li>' . $item->name . ' (' . $item->media_count . 
              ') </li>';
          }
          echo '</ul>';
        }
      } catch (Exception $e) {
        echo 'ERROR: ' . $e->getMessage() . print_r($client);
        exit;
      }
    }  
    ?>
  </body>
</html>

Liệt kê 2 bắt đầu bằng việc tạo ra một giao diện web đơn giản, dành cho người sử dụng để gõ vào các thuật ngữ tìm kiếm. Khi giao diện này được gởi đi, một đối tượng Zend_Http_Client mới được tạo ra và một yêu cầu cũng được tạo tại đầu cuối /tags/search, tương tự như mô tả ở Liệt kê 1. Các thuật ngữ tìm kiếm mà người dùng nhập vào được chuyển sang đầu cuối này như một tham số yêu cầu trong đối số yêu cầu "q".

Đáp ứng lại yêu cầu này là một loạt các định dạng tag mà có kết quả phù hợp với thuật ngữ tìm kiếm. Bạn hoàn toàn có thể giải mã được các thông tin này và hướng theo định dạng trên web, sẽ cho ra kết quả như Hình 5:

Hình 5. Danh sách các tag được liệt kê
Ảnh chụp kết quả tìm kiếm cho từ khóa 'beach', một danh sách các thẻ tìm kiếm

Trong nhiều trường hợp, bạn thích các hình ảnh đi kèm với các tag hơn. Đó là nơi mà đầu cuối /tags/[tag-name]/media/recent đến. Như bạn có thể đoán từ cấu trúc đầu cuối, nó tạo ra một danh sách các hình ảnh gần đây được tag với tên cụ thể. Liệt kê 3 minh họa cách dùng các tag, bằng ách tạo một ứng dụng mẫu để tìm kiếm hình ảnh trên Instagram dựa vào tag.

Liệt kê 3. Tìm kiếm hình ảnh dựa vào tag
<html>
  <head></head>
  <body>
    <h1>Instagram Photo Search by Tag</h1>
    <?php
    if (!isset($_POST['submit'])) {
    ?>
    <form method="post" 
      action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
      Search for:
      <input type="text" name="q" /> 
      <input type="submit" name="submit" value="Search" />      
    </form>
    <?php
    } else {
    ?>
    <h2>Search results for '<?php echo $_POST['q']; ?>'</h2>
    <?php
      require_once 'Zend/Loader.php';
      Zend_Loader::loadClass('Zend_Http_Client');

      // define consumer key and secret
      // available from Instagram API console
      $CLIENT_ID = 'YOUR-CLIENT-ID';
      $CLIENT_SECRET = 'YOUR-CLIENT-SECRET';

      try {
        // initialize client
        $client = new Zend_Http_Client('https://api.instagram.com/v1/tags/'. 
          $_POST['q'] . '/media/recent');
        $client->setParameterGet('client_id', $CLIENT_ID);

        // get images with matching tags
        // transmit request and decode response
        $response = $client->request();
        $result = json_decode($response->getBody());
        
        // display images
        $data = $result->data;  
        if (count($data) > 0) {
          echo '<ul>';
          foreach ($data as $item) {
            echo '<li style="display: inline-block; padding: 25px"><a href="' . 
              $item->link . '"><img src="' . $item->images->thumbnail->url . 
              '" /></a> <br/>';
            echo 'By: <em>' . $item->user->username . '</em> <br/>';
            echo 'Date: ' . date ('d M Y h:i:s', $item->created_time) . '<br/>';
            echo $item->comments->count . ' comment(s). ' . $item->likes->count . 
              ' likes. </li>';
          }
          echo '</ul>';
        }

      } catch (Exception $e) {
        echo 'ERROR: ' . $e->getMessage() . print_r($client);
        exit;
      }
    }  
    ?>
  </body>
</html>

Liệt kê 3 là sự kết hợp giữa Liệt kê 1Liệt kê 2. Nó được hiển thị dưới dạng một giao thức web để người dùng gõ vào từ khóa cần tìm kiếm. Sau đó nó sử dụng thuật ngữ tìm kiếm này như một tag, và gửi một yêu cầu đến endpoint (đầu cuối) /tags/[tag-name]/media/search để tìm kiếm một loạt các danh sách phù hợp. Các kết quả tìm được sẽ tiếp tục được xử lý như trong Liệt kê 1, để tạo ra một trang bao gồm nhữnh hình ảnh được liệt kê dưới dạng thumbnail và các thông tin cơ bản. Hình 6 hiển thị kết quả.

Hình 6. Danh sách hình ảnh dựa vào tag
Trang hình ảnh được liệt kê theo thẻ tìm kiếm

Tìm kiếm hình ảnh dựa vào vị trí

Cũng giống như cách thức tìm kiếm hình ảnh theo tag, bạn cũng có thể sử dụng cách thức tìm kiếm hình ảnh theo vị trí, địa điểm. Endpoint /media/search sẽ nhận các tham số "lat" và "long" và tạo ra danh sách hình ảnh phù hợp với vĩ độ và kinh độ. Để minh họa, hãy cùng xem xét ví dụ ở Liệt kê 4, cho phép người dùng nhập vào tọa độ kinh độ/vĩ độ và sau đó xuất ra danh sách các hình ảnh ở trong vùng cụ thể đó.

Liệt kê 4. Tìm kiếm hình ảnh dựa vào vị trí
<html>
  <head></head>
  <body>
    <h1>Instagram Photo Search by Location</h1>
    <?php
    if (!isset($_POST['submit'])) {
    ?>
    <form method="post" 
      action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
      Latitude: <input type="text" name="lat" />  
      Longitude: <input type="text" name="long" /> 
      <input type="submit" name="submit" value="Search!" />      
    </form>
    <?php
    } else {
    ?>
    <h1>Search results for 'lat:<?php echo $_POST['lat']; ?>, 
      long:<?php echo $_POST['long']; ?>'</h1>
    <?php
      require_once 'Zend/Loader.php';
      Zend_Loader::loadClass('Zend_Http_Client');

      // define consumer key and secret
      // available from Instagram API console
      $CLIENT_ID = 'YOUR-CLIENT-ID';
      $CLIENT_SECRET = 'YOUR-CLIENT-SECRET';

      try {
        // initialize client
        $client = new Zend_Http_Client('https://api.instagram.com/v1/media/search');
        $client->setParameterGet('client_id', $CLIENT_ID);
        $client->setParameterGet('lat', $_POST['lat']);
        $client->setParameterGet('lng', $_POST['long']);

        // get images matching specified location
        $response = $client->request();
        $result = json_decode($response->getBody());
        
        // display images
        $data = $result->data;  
        if (count($data) > 0) {
          echo '<ul>';
          foreach ($data as $item) {
            echo '<li style="display: inline-block; padding: 25px"><a href="' . 
              $item->link . '"><img src="' . $item->images->thumbnail->url . 
              '" /></a> <br/>';
            echo 'By: <em>' . $item->user->username . '</em> <br/>';
            echo 'Date: ' . date ('d M Y h:i:s', $item->created_time) . '<br/>';
            echo $item->comments->count . ' comment(s). ' . $item->likes->count . 
              ' likes. </li>';
          }
          echo '</ul>';
        }

      } catch (Exception $e) {
        echo 'ERROR: ' . $e->getMessage() . print_r($client);
        exit;
      }
    }  
    ?>
  </body>
</html>

Hình 7 minh họa kết quả tìm kiếm cho các hình ảnh ở tọa độ 18.9218 N, 72.8347 E, và nó cho ra kết qửa tương ứng với vị trí tại Gateway, Mumbai, Ấn Độ.

Hình 7. Các hình ảnh được liệt kê theo vị trí
Trang hình ảnh được liệt kê theo vị trí

Cần chú ý rằng bạn hoàn toàn có thể mở rộng phạm vi tìm kiếm, từ 1km đến 5km, bằng cách đưa thêm một thông số "khoảng cách" theo yêu cầu. Mặc dù không có minh họa cụ thể, nhưng dữ liệu API Instagram cũng sẽ cung cấp cho người dùng một tham số vị trí, để từ đó bạn có thể sử dụng để tìm được những thông tin chi tiết cho một vị trí.


Nhận thông tin hình ảnh chi tiết

Các ví dụ trước đây được dùng để minh chứng cho cách thức tìm kiếm và nhận hình ảnh phù hợp với các tiêu chí cụ thể. Instagram cũng cung cấp cho bạn các endpoint the /media/[media-id], mà có thể sử dụng qua đó để tìm kiếm các thông tin chi tiết về một hình ảnh cụ thể. Liệt kê 5, minh họa rõ nét nhất cho những loại thông tin này thông qua endpoint.

Liệt kê 5. Nhận dữ liệu hình ảnh
<html>
  <head>
    <style>
    #container {
      margin: 0 auto;    
    }
    #info {
      float: left; 
      width: 300px;
      padding-right: 20px;
    }
    #image {
      float: left; 
      width: 320px;
      padding-right: 20px;
    }    
    #comments {
      clear: both;
    }
    .item {
      float:none;
      clear:both;
      margin-top:1em;  
    }
    .profile {
      float:left;
      margin-right:1em; 
      padding-bottom: 10px;
      height: 48px;
      width: 48px;
    }
    </style>
  </head>
  <body>  
    <h1>Instagram Image Detail</h1>
    <?php
    // load Zend classes
    require_once 'Zend/Loader.php';
    Zend_Loader::loadClass('Zend_Http_Client');

    // define consumer key and secret
    // available from Instagram API console
    $CLIENT_ID = 'YOUR-CLIENT-ID';
    $CLIENT_SECRET = 'YOUR-CLIENT-SECRET';

    try {
      // define image id
      $image = '338314508721867526';
    
      // initialize client
      $client = new Zend_Http_Client('https://api.instagram.com/v1/media/' . $image);
      $client->setParameterGet('client_id', $CLIENT_ID);

      // get image metadata
      $response = $client->request();
      $result = json_decode($response->getBody());
      
      // display image data
    ?>
      <div id="container">
        <div id="info">
          <h2>Meta</h2>  
          <strong>Date: </strong> 
          <?php echo date('d M Y h:i:s', $result->data->created_time); ?>
          <br/>
          <strong>Creator: </strong>
          <?php echo $result->data->user->username; ?>
          (<?php echo !empty($result->data->user->full_name) ? 
            $result->data->user->full_name : 'Not specified'; ?>)
          <br/>
          <strong>Location: </strong>
          <?php echo !is_null($result->data->location) ?
          $result->data->location->latitude . ',' . 
            $result->data->location->longitude : 'Not specified'; ?>
          <br/>
          <strong>Filter: </strong>
          <?php echo $result->data->filter; ?>
          <br/>
          <strong>Comments: </strong>
          <?php echo $result->data->comments->count; ?>
          <br/>
          <strong>Likes: </strong>
          <?php echo $result->data->likes->count; ?>
          <br/>
          <strong>Resolution: </strong>
          <a href="<?php echo $result->data->images
            ->standard_resolution->url; ?>">Standard</a> | 
          <a href="<?php echo $result->data->images
            ->thumbnail->url; ?>">Thumbnail</a>
          <br/>
          <strong>Tags: </strong>
          <?php echo implode(',', $result->data->tags); ?>
          <br/>
        </div>
        <div id="image">
          <h2>Image</h2>  
          <img src="<?php echo $result->data->images
            ->low_resolution->url; ?>" /></a>
        </div>
        <div id="comments">
          <?php if ($result->data->comments->count > 0): ?>
          <h2>Comments</h2>
          <ul>
            <?php foreach ($result->data->comments->data as $c): ?>
              <div class="item"><img src="<?php echo $c
                ->from->profile_picture; ?>" class="profile" />
              <?php echo $c->text; ?> <br/>
              By <em> <?php echo $c->from->username; ?></em> 
              on <?php echo date('d M Y h:i:s', $c->created_time); ?>
              </div>
              
              </li>
            <?php endforeach; ?>
          </ul>
          <?php endif; ?>
        </div>      
      </div>
    <?php
    } catch (Exception $e) {
      echo 'ERROR: ' . $e->getMessage() . print_r($client);
      exit;
    }
    ?>
  </body>
</html>

Sau khi load thư viện Zend_Http_Client, Liệt kê 5 sẽ tạo ra một yêu cầu gửi đến endpoint /media/[media-id], cùng với ID được kèm theo với yêu cầu URI. Các ID này thường được đính kèm trong mỗi kết quả tìm kiếm, cùng với các hình ảnh siêu dữ liệu khác.

Các phản hồi đến API a /media/[media-id] là một dạng dữ liệu JSON có chứa đựng các thông tin chi tiết về các hình ảnh củ thể. Những thông tin này bao gồm thời gian được chụp của tấm ảnh, tên người chụp, các cường độ vĩ tuyến, bộ lọc Instagram, số lượng người đánh giá thích hoặc nhật xét riêng. Dữ liệu trả về cũng sẽ đi kèm các đường link cho cả 3 phiên bản — một phiên bản hình ảnh thu nhỏ, một phiên bản có độ phân giải thấp, một phiên bản có độ phân giải cao — đều đi kèm với danh sách các tag. Một danh sách các bình luận được đưa vào dữ liệu JSON; như bạn thấy ở danh sách xuất ra, bạn có thể xem được danh sách các bình luận này cho từng hình ảnh, đồng thời thấy cả tên và thông tin của người đăng bình luận.

Hình 8 hiển thị kết quả xuất ra từ Liệt kê 5. Theo như minh họa, các API Instagram sẽ cho phép hiển thị tất cả các thông tin mà bạn sẽ dễ dàng tìm thấy thông qua các ứng dụng của Instagram cũng như trên web, và thông qua ứng dụng tùy chỉnh PHP.

Hình 8. Hiển thị thông tin hình ảnh chi tiết
Trang hình ảnh được liệt kê chi tiết

Đây cũng chỉ là một trong các thủ thuật. Instagram API còn cho phép các nhà phát triển truy cập vào hệ thống nguồn cấp dữ liệu của người sử dụng để xác thực các hình ảnh, tìm kiếm hình ảnh, tạo ra thêm các mối quan hệ, cùng với những tiện ích khác. Trong đa số các trường hợp, các quy trình tiến hành và hoạt động chỉ có thể được thực hiện dưới sự điều khiển của OAuth 2.0, vì vậy đòi hỏi các nhà phát triển phải tiến hành thiết lập OAuth 2.0.Bên cạnh đó, các khía cạnh khác của API Instagram sẽ tiếp tục được đề cập trong phần 2, bạn đã sẵn sàng chưa?.

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=937695
ArticleTitle=Tích hợp Instagram vào ứng dụng PHP, Phần 1
publish-date=07182013