The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Embed Instagram HTML code into website not working, Embed Instagram HTML code into website not working
ks0ks
post Nov 21 2015, 04:35 AM
Post #1





Group: Members
Posts: 4
Joined: 21-November 15
Member No.: 23,760



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>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 21 2015, 10:58 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Just add http: to the beginning of the src of the scripts.
Then both sample codes work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ks0ks
post Nov 21 2015, 12:22 PM
Post #3





Group: Members
Posts: 4
Joined: 21-November 15
Member No.: 23,760



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 22 2015, 05:14 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You're welcome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ks0ks
post Dec 7 2015, 08:23 AM
Post #5





Group: Members
Posts: 4
Joined: 21-November 15
Member No.: 23,760



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. sad.gif

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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2015, 08:50 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



Do you try to use it outside FB?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 7 2015, 12:05 PM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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-faceb...web-pages/9715/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ks0ks
post Dec 10 2015, 09:28 AM
Post #8





Group: Members
Posts: 4
Joined: 21-November 15
Member No.: 23,760



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

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-faceb...web-pages/9715/ .



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 12 2015, 08:20 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th July 2021 - 12:16 AM