Как настроить / автоматизировать встроенный Instagram на сайте?

Я редактирую сайт Squarespace для друга, и он хочет, чтобы его профиль в Instagram отображался на одной из страниц, но ему нужны не только фотографии, которые сейчас предлагает Instagram.

Он должен иметь возможность отображать текст, связанный с каждой фотографией, предпочтительно справа или, возможно, под фотографией с интерактивными ссылками на #hashtags и @friends. Если проще всего иметь настройку, похожую на настоящий веб-сайт Instagram, с лайками и комментариями, это тоже было бы здорово.

Я знаю, что мне нужно избавиться от «блока Instagram» SquareSpace, который включен в CMS, и добавить свой собственный код. Я знаю, что вы можете просто встроить код прямо со страницы фотографии в Instagram, но нам нужно, чтобы он был автоматизирован.

Я буду честен, я новичок в этом, и просто изучаю не только HTML и CSS, но и немного JS, поэтому я хотел бы толкнуть в правильном направлении, чтобы помочь разобраться в этом, и обязательно предоставьте дополнительную информацию, если я слишком расплывчата.

Я не уверен, можно ли этого достичь с помощью API Instagram, или какого-нибудь Javascript, или что?

Ниже приведена ссылка, которая поможет проиллюстрировать, чего я пытаюсь достичь. Опять же, если проще просто встроить каждую фотографию, используя код «встраивания» Instagram, это тоже замечательно, но мне нужно убедиться, что это автоматизировано, чтобы нам не приходилось заходить на наш сайт каждый раз, когда мы загружаем фотографию. в Instagram.

что нужно


javascript html instagram instagram-api squarespace
person user122552    schedule 26.08.2015    source источник
comment
Как вы узнаете, какой текст, написанный вашим другом, сопровождается какими картинками. Спасибо!   -  person N-ate    schedule 26.08.2015
comment
Подпись. ссылка для уточнения   -  person user122552    schedule 27.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать клиент javascript Instagram в блоке кода JavaScript SquareSpace - см. Добавление пользовательского HTML, CSS и JavaScript

Затем попробуйте какой-нибудь клиент javascript - то есть код, уже написанный людьми, который вы можете в основном использовать "plug-n-play" и настраивать только те вещи, которые вам нужно изменить в блоке кода SquareSpace.

Самый популярный клиент JavaScript для Instagram, о котором я знаю, - это instafeed.js.

instafeed.js

Вот как вы можете получить фид идентификатора пользователя вашего друга с помощью instafeed.js

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: YOUR_USER_ID,
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();
</script>

Чтобы получить заголовок, используйте переменную шаблона {{caption}}, как указано в документации instafeed.js.

{{caption}} - Image's caption text. Defaults to empty string if there isn't one.

person Shiva    schedule 27.08.2015
comment
Я уже видел документы, и мой друг хочет чего-то еще, поэтому почему я задаю этот вопрос? Я точно знаю, что мне нужно будет сделать некоторую нестандартную кодировку. Вопрос не в том, есть ли у SquareSpace простой ответ, а в том, есть ли в Instagram код, который я могу легко вставить? - person user122552; 27.08.2015
comment
Понял. Я обновил свой ответ, добавив вариант, который вы можете изучить. - person Shiva; 27.08.2015