Embedding instagram webpage inside an iframe

Question

I am getting this error:

Refused to display 'http://instagram.com/p/page/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

I want to show instagram page inside my web because it is a mobile app and I want to use my back buttons.

This is my webpage:

<body id="responsiveDemo">  
<div data-role="page" id="test" data-theme="g">
<div data-theme="g" data-role="header">
    <a href="javascript:history.back()" data-icon="back" data-iconpos="notext"></a>
    <h1>Instagram</h1>
</div>

<div data-role="content">

<iframe id="iframeInstagram" src="" name="IframeInstagram" style="width: 100%; height: 1000px; border: medium none;visibility: visible;"></iframe>

            <script>

            var query = location.search.substring(1);
            //console.log(query);
            var parameters = {};
            var keyValues = query.split(/&/);
            for (var i = 0; i < keyValues.length;i++) {
                var keyValuePairs = keyValues[i].split(/==/);
                var key = keyValuePairs[0];
                var value = keyValuePairs[1];
                parameters[key] = value;
            }



                /*+$(document).ready(function() {
                    //console.log(parameters['page']);
                    document.getElementById('iframeColaborador').src = parameters['colaborador'];


                });
                */
                //$(document).on("pageload", '#test', function() {
                $(document).on("pageshow", '#test', function() {
                //$(document).load(function() {
                    console.log(parameters['instagram']);
                    document.getElementById('iframeInstagram').src = parameters['instagram'];
                    //document.getElementById('iframeNews').src = 'http://www.unican.es';


                });


            </script>



</div> <!-- /content -->

I was using this webpage to show others webs but I don't know why it fails with instagram.

you cant do this clientside, you could fetch the page serverside .. or do some dirty yql-hack — john Smith, Jul 14 '14 at 15:21

score 36 · Accepted Answer · edited Jul 23 '23 at 14:01

36

YES, you can display instagram pages with this format

https://www.instagram.com/p/BdJRABkDbXU/

...inside iframes as long as you add the suffix embed/ like

<iframe width="320" height="440" src="https://www.instagram.com/p/BdJRABkDbXU/embed/" frameborder="0"></iframe>

See JSFIDDLE

edited Jul 23 '23 at 14:01

Benjamin M Berwien - berwiecom

21
5

answered Jul 14 '14 at 21:23

JFK

40,963
31
133
306

Can you show the votes page instead of the photo? I would want to be able to upvote or downvote or so. I cannot show that page – Biribu Jul 15 '14 at 07:30
2

Your answer embed the photo and number of likes from instagram but I need to embed the like button to be able to uplike a photo. Is that possible? With your code, I have to press on "instagram" view on instagram to vote or leave a comment. I would want to do that inside my app – Biribu Jul 15 '14 at 16:33
@Biribu I don't think it's possible inside the iframe with the current API, you would need to view the photo (and to login) in Instagram to be able to like it or leave a comment. – JFK Jul 15 '14 at 16:46
ok, thanks. Well, I should think in other way to do it. I am ok with this behaviour on android but on ios I cannot go back to my app. And I can't open safari with instagram link I don't know why. Thanks for your time – Biribu Jul 15 '14 at 16:50
To use the latest embed style, you should add `/?cr=1&v=7` at the end of the `src`, so you would have: `` – Spone Mar 20 '17 at 15:59
1

is there any way to show entire instagram page in to our website for example "https://www.instagram.com/jaybhalodi/" i want this entire page to load in my website, i got same error Refused to display 'https://www.instagram.com/jaybhalodi/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. – Jay Bhalodi Nov 29 '18 at 10:53
This solution did not work for me unless i've added https (s for secure!). – NicoHood Feb 11 '23 at 07:14
Other options you can add to the iframe: scrolling="no" allowtransparency="true" – NicoHood Feb 11 '23 at 07:24

score 5 · Answer 2 · answered Jul 14 '14 at 15:10

5

You won't be able to because Instagram denies external websites from putting their website in a frame. This is why you got that error message about X-Frame-Options being set to SAMEORIGIN -- same origin means it will only allow Instagram to use the frame, but not others.

answered Jul 14 '14 at 15:10

josh

9,656
4
34
51

Ok thanks. Then I should check how to open a browser outside the webapp browser in javascript. Damm it, it seems too easy! – Biribu Jul 14 '14 at 15:16
Yes, it's possible. See my answer. – JFK Jul 14 '14 at 21:23

score 5 · Answer 3 · answered May 11 '17 at 14:25

First of all Instagram let you embed the shares you did. All you have to do is

 
1-open instagram from your web browser
2-click any share you have 
3-at right bottom there is hidden menu with shape of ... (3 dot) click it 
4-select second menu which is embed to website
5-click copy link from the next page  and use that code to use instagram embeded link at your page

also if you find it difficult or you want the pure code here is all you have to do use below code with your own url

<blockquote class="instagram-media" data-instgrm-version="7" >
<a href="https://www.instagram.com/p/BT8cmZRlkVJ/"></a> 
</blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Embedding instagram webpage inside an iframe

3 Answers3

Linked