1

I'm working on a google map that displays the projects created by users around the world. When you click on a marker an infobox opens and displays informations about the user and shows pictures or videos within a carousel in that infobox.

So I need to embed the videos and pictures. No problems with Youtube or Vimeo however the problem is with Facebook videos because I need to add a javascript method that allows us to embed the facebook videos :

The script I need to include :

<script type="text/javascript">

$.getScript('//connect.facebook.net/en_US/sdk.js') ;        
$.ajaxSetup({ cache: true });
$('#loginbutton,#feedbutton').removeAttr('disabled');
FB.getLoginStatus(updateStatusCallback);

     window.fbAsyncInit = function() {       
    FB.init({
      appId      : '*******',
      xfbml      : true,
      version    : 'v2.3'
    });
  };
</script>

Then to play the video you have this in the content of the infobox:

 <div id="fb-root"></div><div class="fb-post" id="video_FB" data-href="https://www.facebook.com/****/videos/ID/"> </div>

Here is a link that explains how to embed a facebook video.

I succeded to play that video on a "normal" html page the thing is I can't see it when I put it on a infobox because I could'nt find a way to connect this javascript code to the infobox. And if I just put the javascript code outside the infobox content it doesn't either. I tried to include in the head of the content of my infobox with :

var script = document.createElement('script');  
script.async = true;                        
script.src = "facebook_init.js";
$(the_content_of_the_infobox).children("head").append( script );

or by including directly the script in the content head :

<script type="text/javascript" > code code </script>

When I do that the result I get is that the html page displays literaly the code I've written right after the closing script tag

I've found something to make it work without js therefore it cannot work for every facebook video link I've got in my DataBase, it only works for certain types of url 

<iframe src="https://www.facebook.com/video/embed?video_id=vid_id/" width="400" height="250" frameborder="0"></iframe>

Some links are like : https://www.facebook.com/konstantinos.gargas/videos/vb.1065124383/10205486637779746 with weird things after the /videos/ and it doesn't work the iframe tag above :(

So if someone could help me that'd be great :)

(Sorry for my english, I hope I was clear)

Berthelot Loïc
  • 21
  • 3

0 Answers0