Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Embed Instagram HTML code into website not working

Posted by: ks0ks Nov 21 2015, 04:35 AM

Hi,

I am trying to embed a few Instagram photos on my website.

- I click on an Instagram photo
- Click on the [...] at the bottom right corner.
- Click on Embed.
- Copy and paste the code into my html
- Test me html page.

The white box for Instagram picture appears with the caption. But the picture didn't show up!

I am not using Wordpress or whatsoever. Just writing my own html with reference to a textbook.

Anyone can help with this? A few Instagram codes given below for your reference. (all didnt work for me).

Example 1

CODE

<blockquote class="instagram-media" data-instgrm-version="6" 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% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gI
B4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf// 42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElF
OYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHv
Gz1TBCxMkd3kwNVbU0gKHkx+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=" 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 href="https://www.instagram.com/p/8NJqsFmu0Z/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A photo posted by @ryu_ifs</a> on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-09-29T07:05:16+00:00">Sep 29, 2015 at 12:05am PDT</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Example 2

CODE

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" 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:37.5% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gI
B4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf// 42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElF
OYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHv
Gz1TBCxMkd3kwNVbU0gKHkx+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://www.instagram.com/p/-B5aQgiyZL/" 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">Ayo cepet di order stok cmn 20 set. #Repost @ryu_ifs with @repostapp. ・・・ STOOOOKEEEED !!! edisi terbatas beudh ga nerima book"an ga jelas memperlambat !!! COD / KIRIM"(Pembayaran via transfer) siiiikaaaaat paaajiiiii !!! #freeline #freelineskate #freelineskates #skate #skates #skating #skater #sell #jakarta #indonesia #freeskates #stoked</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 IndonesiaFreelineSkates (@indonesiafreelineskates) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-11-13T15:14:21+00:00">Nov 13, 2015 at 7:14am PST</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Posted by: Frederiek Nov 21 2015, 10:58 AM

Just add http: to the beginning of the src of the scripts.
Then both sample codes work.

Posted by: ks0ks Nov 21 2015, 12:22 PM

QUOTE(Frederiek @ Nov 21 2015, 11:58 PM)

Just add http: to the beginning of the src of the scripts.
Then both sample codes work.

Many thanks!

I've just tested it. Works the way I want it.

Posted by: Frederiek Nov 22 2015, 05:14 AM

You're welcome.

Posted by: ks0ks Dec 7 2015, 08:23 AM

QUOTE(Frederiek @ Nov 22 2015, 06:14 PM)

You're welcome.

Frederiek,

I have another similar problem. Hope you can spot the mistake again.

I'm trying to use the Facebook embed video feature. Copied the code to my html file and it doesn't show up on my webpage. Only the caption shows up.

I tried the same trick of adding "http:" to the src field. But no luck.

Could you please help me again? Also, (if you have any idea) tell me what's wrong with those "Embed" buttons that only does 99% of the job. That 1% of the code is missing and it got me stuck badly.

Here's one for you to test.

CODE

<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-video" data-allowfullscreen="1" data-href="/jmkride/videos/vb.1654328411466470/1660120777553900/?type=3"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/jmkride/videos/1660120777553900/"><a href="https://www.facebook.com/jmkride/videos/1660120777553900/">JMKRIDE SoCal launch with Mattie Tyce</a><p>JMK launching SoCal with Mattie Tyce cruising Pacific Beach, CA. Hit us up to test them out and get yours!</p>Posted by <a href="https://www.facebook.com/jmkride/">JMKRIDE</a> on Wednesday, July 29, 2015</blockquote></div></div>

Thank you!

Posted by: pandy Dec 7 2015, 08:50 AM

Do you try to use it outside FB?

Posted by: Frederiek Dec 7 2015, 12:05 PM

Apparently, it is possible to embed a video posted on Facebook in another website.

I searched a bit, using "how to use a video posted on facebook in another website" as query, and, among others, found this: http://www.labnol.org/internet/embed-facebook-videos-in-web-pages/9715/ .

Posted by: ks0ks Dec 10 2015, 09:28 AM

QUOTE(Frederiek @ Dec 8 2015, 01:05 AM)

Yes, I was trying to embed a Facebook video onto my website.

I tried the "Embed Video" button on Facebook. Copied the code to my HTML file. But it doesn't work.

The video doesn't show up. I only get a caption and a link to the video itself.

Any thoughts?

Posted by: Frederiek Dec 12 2015, 08:20 AM

Your HTML and data-href/src looks quite different from the sample video at labnol.org.
I copied their container div for the video, added the script and some CSS and it works.

Their actual video seems to be inside the SPAN and uses a video.php with a version query.

This is what I used:

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>FB video test</title>
<style type="text/css">
.content {
    width: 600px;
    margin: 20px auto;
}
.fb_iframe_widget {
    display: inline-block;
    position: relative;
    max-width: 100%;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
        fjs.parentNode.insertBefore(js, fjs);
        }
        (document, 'script', 'facebook-jssdk')
    );
</script>
<div class="content">

    <div class="fb-video fb_iframe_widget fb_iframe_widget_fluid_desktop" data-allowfullscreen="true" data-href="https://www.facebook.com/video.php?v=10152463995718183&set=vb.500808182&type=1" fb-xfbml-state="rendered" fb-iframe-plugin-query="allowfullscreen=true&app_id=&container_width=600&href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3D10152463995718183%26set%3Dvb.500808182%26type%3D1&locale=en_US&sdk=joey" style="width: 100%;">
        <span style="vertical-align: bottom; width: 100%; height: 337px;">
            <iframe name="f3c1a27b3c" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:video Facebook Social Plugin" src="http://www.facebook.com/v2.3/plugins/video.php?allowfullscreen=true&app_id=&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FTlA_zCeMkxl.js%3Fversion%3D41%23cb%3Df357e601c%26domain%3Dwww.labnol.org%26origin%3Dhttp%253A%252F%252Fwww.labnol.org%252Ff2dd9a194%26relation%3Dparent.parent&container_width=600&href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3D10152463995718183%26set%3Dvb.500808182%26type%3D1&locale=en_US&sdk=joey" class="" style="border: none; visibility: visible; width: 100%; height: 337px;"></iframe>
        </span>
    </div>
</div>
</body>
</html>