2013-08-28 2 views
4

Я узнал об этом на форуме, но это не помогло мне. На фото не отображался только заголовок.Чтобы загрузить фото instagram на сайт

Любой может мне помочь в этом?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-instagram/0.2.2/jquery.instagram.min.js"></script> 
<title>Instagram Demo</title> 

</head> 

<body> 

<h1>jQuery Instagram demo</h1> 

<div class="instagram"></div> 
<script type="text/javascript"> 
    $(".instagram").instagram({ 
     userId: '0ce2a8c0d92248cab8d2a9d024f7f3ca', 
     accessToken: '34834147.0ce2a8c.92d5a4d1d326438fb063a31b63e208a2', 
     image_size: 'standard_resolution', 
    }); 
    </script> 


</body> 
</html> 

Спасибо!

+1

Сообщение об ошибке/консоли.? Импортирует правильный файл instagram.js ..? Подробнее. –

+0

нет сообщения об ошибке, когда я запускаю его в браузере, только заголовок появляется в моем браузере, но у меня нет изображения, он должен вытащить некоторую фотографию из instagram, чтобы не только показать заголовок. – youaremysunshine

+0

@jovine Дайте ссылку на сообщение, где вы узнали от –

ответ

7

Instafeed.js - это простой способ добавить фотографии Instagram на ваш сайт. Нет необходимость JQuery, просто «ола Javascript

<script type="text/javascript"> 
    var feed = new Instafeed({ 
     get: 'tagged', 
     tagName: 'awesome', 
     clientId: 'YOUR_CLIENT_ID' 
    }); 
    feed.run(); 
</script> 

Проверить ссылку INSTAFEED

Insta demo Сделана для вас

+0

Я проверяю это раньше, но он все еще терпит неудачу. Я changded моего кода в этом:

JQuery Instagram демо

<типа скрипта = "текст/JavaScript"> \t корма вара = новый Instafeed ({ прибудет: 'меченый', тэгу: 'удивительный', clientId: '0ce2a8c0d92248cab8d2a9d024f7f3ca' }); feed.run(); , но он все еще не вытащил любую фотографию. – youaremysunshine

+0

возможно ли, что что-то пошло не так, когда я зарегистрирую клиента? – youaremysunshine

+0

https://api.instagram.com/v1/media/popular?client_id=afd15cca7d664a1c964d54bac0488b93 попробуйте это –

1

Вы можете получить изображения по обычной Jquery без какого-либо другого плагина. как показано ниже:

$(document).ready(function() { 
     var apiurl = "https://api.instagram.com/v1/users/<YOURUSERNAME>/media/recent/?access_token=<YOURACCESSTOKEN>&count=5&callback=?"; 
     $.getJSON(apiurl, function (data) { 
      console.log("suatroot"); 
      var suatroot = data.data; 

      console.log(suatroot); 
      $.each(suatroot, function (key, val) { 
       console.log("item"); 
       var itemobj = val.images.low_resolution.url; 
       var hrefobj = val.link; 
       var captobj = val.caption.text; 
       console.log(captobj); 
       console.log(itemobj); 
       var suatpaket = "<a target='_blank' href='"+hrefobj+"'><img src='" + itemobj + "'/><br>"+captobj+"<br></a>"; 
       $(".instagram").append(suatpaket); 
      }); 

     }); 
    }); 

и HTML:

<div class='instagram'></div> 

К этому раствору ваш маркер доступа может быть видно из исходного кода страницы, однако, что это не может быть большой проблемой для вас.

0

Вот решение, которое не имеет никаких зависимостей. Он также не требует токена доступа. Чтобы этот фрагмент работал, вам нужно получить URL-адрес bitsalad.co для вашего фида.

<html> 
<body> 
<div id='instagram-feed'></div> 

<script> 
(function(a,b,c,d){ 
    var $ = b.getElementById('instagram-feed'); 
    a['_i'] = function(d){ 
    d.forEach(function(i, x){ 
     html = "<img src='"+i.images.standard_resolution.url+"' />"; 
     $.insertAdjacentHTML('beforeend', html); 
    }) 
    }; 
    var e = b.createElement(c); 
    e.src = d; 
    e.async=1; 
    var f = b.getElementsByTagName(c)[0]; 
    f.parentNode.insertBefore(e,f); 
}(window, document, 'script','http://api.bitsalad.co/v1/feeds/<YOUR FEED ID HERE>?callback=_i')) 
</script> 

</body> 
</html> 
Смежные вопросы