Список встроенных постов в Instagram на странице Ionic 3 - PullRequest
Новая
       27

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

0 голосов
/ 03 сентября 2018

Я хочу перечислить встроенные посты 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>**
  1. Также я изменил src скрипта с 

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

до 

<script async defer src="http://www.instagram.com/embed.js"></script>
  1. Также я вставил код скрипта в 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.log('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.

Ответы [ 2 ]

0 голосов
/ 05 января 2019 
   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(); }

Это решение, которое работает для меня.

0 голосов
/ 03 сентября 2018

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

instgrm.Embeds.process()

Edit: 

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);
    }
}
...