Menu
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.
874
An IFrame is HTML code that you can use to embed one HTML page, PDF page, another website, or other web safe file into a another webpage inside a window. The window can be styled using css code. IFrames do not make a website a "framed" site and do not affect SEO.
From the post or profile you'd like to embed, tap in the top right. Tap Embed, then tap Copy Embed Code. Note: If you don't see Embed, the post or account may be private or may have Embeds turned off and cannot be embedded. The embed code will now be copied to your clipboard and can be pasted into your HTML editor.
YES, you can display instagram pages with this format
http://instagram.com/p/qbq6fIJMVZ
...inside iframes as long as you add the suffix /embed like
<iframe width="320" height="440" src="http://instagram.com/p/qbq6fIJMVZ/embed" frameborder="0"></iframe>
See JSFIDDLE
185
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.
20
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
