Embed posting of social networks with Ionic

ionic-v1
1

I am having a problem when wanting to embed a post from Twitter, Instagram or Vine with Ionic Framework, all social networks using Blockquote to display the content, look bad, do not show all the elements nor display the correct styles…

This is the code in Twitter:

<blockquote class="twitter-tweet" lang="en"><p>Web designers life by <a href="https://twitter.com/Monish_bansal">@Monish_bansal</a> CC <a href="https://twitter.com/CsharpCorner">@CsharpCorner</a> <a href="https://twitter.com/hashtag/webdeveloper?src=hash">#webdeveloper</a> <a href="https://twitter.com/hashtag/webdevelopment?src=hash">#webdevelopment</a> <a href="https://twitter.com/hashtag/developers?src=hash">#developers</a> <a href="https://twitter.com/hashtag/programmers?src=hash">#programmers</a> <a href="http://t.co/inTkoRpJ0k">pic.twitter.com/inTkoRpJ0k</a></p>&mdash; C# Corner (@CsharpCorner) <a href="https://twitter.com/CsharpCorner/status/560759820731445249">January 29, 2015</a></blockquote>

This is in Vine:

<iframe src="https://vine.co/v/bjHh0zHdgZT/embed/postcard" width="300" height="300" frameborder="0"></iframe><script src="https://platform.vine.co/static/scripts/embed.js"></script>

And this is in Instagram:

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" 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:658px; 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; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); 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://instagram.com/p/0YwbCVpsq_/" 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="_top">Tarde de proyectorista #cine #ushuaia #packewaia #proyector</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 photo posted by @gabfiocchi on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-03-18T23:04:25+00:00">Mar 18, 2015 at 4:04pm PDT</time></p></div></blockquote>
1 Like
2

I have the same issue

3

Did you find a solution ? Because I search on my side and I also have not found any good solution.

4

@max @tim @Ben Any idea?

5

Hi! I’m facing the same issue…

For twitter, I do:

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

      if (! d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";

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

And it works fine.

For instagram, I do the same but with the url “https://platform.instagram.com/en_US/embeds.js”. It works too, but only the first time (my app is a news feed and the articles shows in a popover. If the user loads ever the same article, it works fine. Otherwise, if loads other articles, only works for the first article)…

I tried to remove and add the scripts every time that the popover shows, so I have to put:

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

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

hope it helps… and if anyone knows how to do to instagram works every time, please post it.

sorry for my english!

6

Did you find a solution? I’m having the same problem and I don’t know how to solve it.

I have a news app and the first time when I open the detail page of a new It works and show the complete instagram post, but if I slide to another new I only show the box of instagram and the text below but the image is empty.

7

Hi! I also have a news app. I can’t fix it but I found a better solution.

I show an iframe that points to my server. That html has the body of the article, with every script that is needed. So in that way, instagram and twitter embeds work fine.

8

Hi, at the end we found a better solution, i think.

When I load the script from instagram I had a little function where the URL is generated with the protocol, and the rest of the url from the script.

At this point once the script is prepared we add this line if the script is from instagram:

js.setAttribute(“onLoad”,“window.instgrm.Embeds.process()”);

And it works for me in all the news pages.

It is very important to have the script pre loaded because if not this instruction show an error because instgrm doesn’t exist yet.

9

Can ou please tell me how you do this:

When I load the script from instagram I had a little function where the URL is generated with the protocol, and the rest of the url from the script.

Give me an example pls

10

I had a function to load the script, as you have, and once the script is prepared I add this:

js.setAttribute(“onLoad”,“window.instgrm.Embeds.process()”);

To the script load is the only thing that works for me.