Список встроенных постов Instagram на странице Ionic 3

Я хочу вывести список встроенных постов в Instagram в моем приложении Ionic 3. Я пробовал делать это вручную: 1. Зашел в Instagram на моем рабочем столе, выбрал общедоступный пост и нажал на три точки на опции встраивания. Я скопировал ссылку и вставил ее на свою страницу:

<blockquote class = "instagram-media" data-instgrm-captioned data-instgrm-permalink = "https://www.instagram.com/p/Bmoikg2ABAt/?utm_source=ig_embed" data-instgrm-version = "9" style = " background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style = "padding:8px;"> <div style = " background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style = " background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style = " margin:8px 0 0 0; padding:0 4px;"> <a href = "https://www.instagram.com/p/Bmoikg2ABAt/?utm_source=ig_embed" style = " color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target = "_blank">And lastly, my actual #1 @courtneyjbarry you are an incredible woman. The way you handle life’s most confusing moments is indescribable and graceful. You are moved by the littlest stories to the most heartbreaking ones, you will give someone your perfume if they say you smell nice, you are freaking hilarious and always stand firm in your faith, a loving sister, an amazing friend and a beautiful daughter. You are the definition of FEARFULLY and WONDERFULLY made baby! #1</a></p> <p style = " color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href = "https://www.instagram.com/selenagomez/?utm_source=ig_embed" style = " color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target = "_blank"> Selena Gomez</a> (@selenagomez) on <time style = " font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime = "2018-08-18T20:20:56+00:00">Aug 18, 2018 at 1:20pm PDT</time></p></div></blockquote> **<script async defer src = "//www.instagram.com/embed.js"></script>**

Также я изменил src скрипта с

<script async defer src = "//www.instagram.com/embed.js"></script>

<script async defer src = "http://www.instagram.com/embed.js"></script>

Также я вставил код скрипта в index.html внизу:

<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
  <meta charset = "UTF-8">
  <title>Ionic App</title>
  <meta name = "viewport" content = "viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name = "format-detection" content = "telephone=no">
  <meta name = "msapplication-tap-highlight" content = "no">

  <link rel = "icon" type = "image/x-icon" href = "assets/icon/favicon.ico">
  <link rel = "manifest" href = "manifest.json">
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  <meta name = "theme-color" content = "#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name = "apple-mobile-web-app-capable" content = "yes">
  <meta name = "apple-mobile-web-app-status-bar-style" content = "black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src = "cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.info('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href = "build/main.css" rel = "stylesheet">
  <link href = "assets/css/font-awesome.min.css" rel = "stylesheet">
</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

    <!-- Instagram -->
    <!-- <script async defer src = "http://platform.instagram.com/en_US/embeds.js"></script> -->

    <!-- The polyfills js is generated during the build process -->
    <script src = "build/polyfills.js"></script>

    <!-- The vendor js is generated during the build process
      It contains all of the dependencies in node_modules -->
      <script src = "build/vendor.js"></script>

      <!-- The main bundle js is generated during the build process -->
      <script src = "build/main.js"></script>

      <script async defer src = "http://www.instagram.com/embed.js"></script>
</body>
</html>

Но проблема в том, что сообщение не отображается, и все, что я вижу, это следующее:

Глянь сюда

Мой вопрос в том, как я могу показать сообщение вместо серого логотипа Instagram. Мне нужно, чтобы изображение / видео отображалось как обычный пост в Instagram.

У меня тоже такая же проблема. Вы смогли найти решение?

— 04.01.2019 04:40

@otakuProgrammer Я выложил ответ. Меня устраивает. Попробуйте и дайте мне знать.

— 05.01.2019 09:59

javascript html ionic-framework ionic3 instagram-api

03.09.2018 11:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

938

Ответы 2

Попробуйте вызвать эту функцию, когда контент загружен:

instgrm.Embeds.process()

Редактировать:

import { Injectable } from '@angular/core';

@Injectable()
export class InstagramProvider {

    constructor() {
        this.insertInstagramScript();
    }

    loadEmbeds() {
        let win = <any>window;
        if (win.instgrm && win.instgrm.Embeds) {
        win.instgrm.Embeds.process();
        }
    }

    private insertInstagramScript() {
        var script = document.createElement('script');
        script.setAttribute('src', 'http://platform.instagram.com/en_US/embeds.js');
        document.body.appendChild(script);
    }
}

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

— 04.09.2018 14:01

03.09.2018 18:05

   removeScript(){
        let fjs = document.getElementsByTagName('script')[0]

   fjs.parentNode.removeChild(document.getElementById('instagram-wjs'));

  }
  instagramPosts(){
    ! function(d, s, id){
      let js: any;
      let fjs = d.getElementsByTagName(s)[0];

      if (! d.getElementById(id)) {
        js = d.createElement(s);
        js.setAttribute("onLoad","window.instgrm.Embeds.process()");
        js.id = id;
        js.src = "https://platform.instagram.com/en_US/embeds.js";

        fjs.parentNode.insertBefore(js,fjs);
      }
    } (document, "script", "instagram-wjs");
  }

  ionViewWillLoad() {
    this.instagramPosts();
  }

ionViewWillLeave(){ this.removeScript(); }

Это решение, которое мне подходит.

Пытался скопировать код, но он показывает ошибку в instagramPosts (), начиная с! . Вы используете машинописный текст? Однако я не знаком с этой функцией.

— 06.01.2019 04:14

И это для мобильного приложения (нативного?) Или в браузере. Потому что шахта работает на ионную подачу. Но если я построю его на реальном устройстве или симуляторе / эмуляторе, это не сработает.

— 06.01.2019 08:43

Это машинописный текст для ионного приложения. Не могли бы вы сказать, какую проблему / ошибку он выдает?

— 06.01.2019 10:03

Выражение типа void не может быть проверено на достоверность. Затем, если я удалю!. Идентификатор, ожидаемый при функции (d Тогда Левая часть запятой oeprator не используется и не имеет побочных эффектов. (Документ, "sciprt") Я тестировал, изменяя функцию, но хочу знать, что мне повезло с ее работой.

— 07.01.2019 03:30

05.01.2019 09:58