Embedding instagram webpage inside an iframe
html, iframe, instagram, javascript, jquery
Solution
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
Problem
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.