Skip navigation
Currently Being Moderated

Help with Facebook Plugin Coding in Dreamweaver

Feb 17, 2012 4:51 PM

Hey,

 

I am trying to add a Facebook Plugin on my website but I am having some difficulties.

After I insert the appropriate code into my html, I get an error message "all.js is not on the local disk"

I don't know what this means or how to fix it.

 

Any help would be greatly appreciated.

 

Thanks in advance!

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Feb 17, 2012 4:57 PM   in reply to dgigga80

    Pretty had to say for sure without seeing the exact code....post link to live page for best chance of help.

    But that being said, it sounds like there are some javascript files that DW thinks are suppose to be on your local machine.... my guess is that they are not suppose to be local files, but rather files stored on remote server and should be accessed by an absolute URL in the <head> rather than a relative URL (on local machine).

    Or... if they are suppose to be on your local machine, then you have not downloaded those javascript files or they are placed in the wrong folder.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2012 11:24 AM   in reply to dgigga80

    That's a so called "Flash website". So where did you put the HTML code?

    After I insert the appropriate code into my html

    I don't see anything on the page... or are you talking about the Facebook "Join Me" in the middle of the page... that seems to be working.. so what exactly are the difficulties... in detail.

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 10:55 AM   in reply to dgigga80

    I'm not sure what your problem is but you might do well to check your page in the validator:

     

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdjjigs.com%2F

     

    I notice that you have a <div> element in your <head> which isn't allowed.

     

    <head>

    <title></title>

    <div id="fb-root"></div>

    <script>(function(d, s, id) {

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 12:53 PM   in reply to dgigga80

    You have a "Flash" website displayed at 100% w/h.... so where do you expect the Facebook like box to display?

    The code shows it at the very bottom of the page but since the Flash is 100%, there is no room for the Like box.... which works by the way:

    http://www.cidigitalmedia.com/tutorials/face.html

    Just not sure what you are trying to do... where is the Like box supposed to display?

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 12:57 PM   in reply to dgigga80

    You need to declare your document encoding so put this at the very top of your page:

     

    <?xml version="1.0" encoding="UTF-8"?>

     

    The explanations behind that for me, are extraodinarily technical so, either wait for an expert to confirm that bit or do a bit of your own research.

     

    When you add a <script> tag you should declare a type.  LIke this for javascript:

     

    <script type="text/javascript">

     

    Other validatoin errors relate to the fb shizzle and that's a bit over my head.

     

    And can you say a bit more about what the problem is you want to fix?

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 1:31 PM   in reply to martcol

    flashsite.jpg

     

    Is this this anything like what you are trying for?  If it is, I'm not sure it can be done.

     

    What I did there was to move the <div id="fb-root"> to the bottom of the page and use it to wrap that wierd <fb: like-box... stuff with it.  Now, if that fb: like-box stuff is inserted dynamically then it will mean working out how that is done so that it ends up in that <div id="fb-root">  Then I made that dib absolute positioned and gave it a width and top and left px dimensions.

     

    Now, I am still wondering if that is what you are after and if it is, the problem is there doesn't seem anything else in the page to fix that too i.e. to make postion relative.  Also, I am right on the edge no, just over the edge of my technical abilities so the further I go after this the more nonsense I might dish up.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 1:49 PM   in reply to dgigga80

    OK. so take a look at the source of the page you use as an example and compare it with the source on your page.  It is full of lovely HTML elments which includes a special warm and cosy place for that fb like thing to fit into!  Your page is not much more than a big flash object inside a <body> element and not much else.  But still, I'll go over what I did.  I can't post the code or anything because that was done in Firebug and I showed you a screenshot.

     

    Looking at your code you seemed to have an empty <div id="fb-root"></div>  I kind of guessed that is where the fb code needs to go.  You will need to check that with the fb widget you are using.

     

    After that I ended up with a div that had the fb code and I applied some CSS to that.  Once it has width and is absolute positioned it is easy to add coordinates to place it where you want in the page.  However the problems start there.  As it is, the absolute position would be relative to the top most element or the browser.  So as page gets displayed in different sized windows, so the position would be dependent on that.

     

    The only way around that might be to contain everything in a <div>, give it a width, center it and make it postion relative.  That way the position of the absolute positioned div will be relative to it and be stable on the page.

     

    As I said before, I am on the edge of my understanding here so, we'll need to wait for an expert to put us straight.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 1:52 PM   in reply to dgigga80

    OK I'll have a go

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 2:08 PM   in reply to martcol

    This is at the bottom of your page:

     

    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" />

    </a>

         </div>

    <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/all.js#xfbml=1&amp;appId=30334990972264 7";

      fjs.parentNode.insertBefore(js, fjs);

    }(document, 'script', 'facebook-jssdk'));</script>

     

    <fb:like-box href="http://www.facebook.com/?ref=tn_tnmn#!/pages/DJ-JIGS/245171578834739" width="220" colorscheme="dark" show_faces="true" border_color="Blue" stream="false" header="true"></fb:like-box>

    </body>

    </html>

     

    Now, what I am saying is that might be rendered or dynamic code so it might look different to what you have on your local machine.  But I changed that to this:

     

    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" />

    </a>

         </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/all.js#xfbml=1&amp;appId=30334990972264 7";

      fjs.parentNode.insertBefore(js, fjs);

    }(document, 'script', 'facebook-jssdk'));</script>

     

    <div id="fb-root">

    <fb:like-box href="http://www.facebook.com/?ref=tn_tnmn#!/pages/DJ-JIGS/245171578834739" width="220" colorscheme="dark" show_faces="true" border_color="Blue" stream="false" header="true"></fb:like-box></div>

    </body>

    </html>

     

    All that did obviously, is to wrap that face book shizzle in a div with id fb-root.

     

    Then this CSS rule which can go in the head of your page or a seperate style sheet:

     

    div#fb-root {

    width: 220px;

    position: absolute;

    top; a unit of px sufficient to push the div away from the top.

    left: a unit of px sufficient to push the div away from the left.

    }

     

    The problem with that will be I think, that it is position relative to the user agent.  So the a different size/ration of screen size will change the postion of that div.  The only way around that would be to put everthing in the page <body> inside a container div.  give it a fixed width and position: relative.  That might muck your page up though because at the moment your flash content seems to fill the page.   If you had a fixed width wrapper you would need to do something with the page boundaries for screen sizes wider thant the page.

     

    I hope I explained myself OK and I hope adninjastrator comes back to have a look at what is going on here.  I'm working without a safety net and he's pretty good at this web stuff!

     

    Martin

     

    PS I don't do Flash!

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 2:25 PM   in reply to dgigga80

    I suggest you make a duplicate of this page.  Rename it and see if you can achieve where we've got to so far.  If you can get a test page up withnsomething that youbcan positionnthatvdiv egere you want then we can try and iron out the bumps later. 

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 3:15 PM   in reply to dgigga80

    Replace:

    </script>

    div#fb-root {

    width: 220px;

    position: absolute;

    top; a unit of px sufficient to push the div away from the top.

    left: a unit of px sufficient to push the div away from the left.

    }

     

      

      <style type="text/css" media="screen">

    <!--

    html, body, #myContent     {

    height:100%;

    }

     

    body     {

    background-color:#000000;

    margin:0;

    padding:0;

    overflow:hidden;

    }

     

    -->

    </style>

     

    With:

     

    </script>

    <style type="text/css" media="screen">

     

    html, body, #myContent     {

    height:100%;

    }

     

    body     {

    background-color:#000000;

    margin:0;

    padding:0;

    overflow:hidden;

    }

     

     

    div#fb-root {

    width: 220px;

    position: absolute;

    top: You need to specify this - distance from top;

    left: You need to specify this - distance from left;

    }

     

    </style>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 4:44 PM   in reply to dgigga80

    dgigga80,

    you have a 100% (so called) Flash site and you are attempting to mix in and display in that site an html <div>.... IT WILL NOT WORK!

    What is being suggested is an overlay above the Flash, which yes, can be done but will never look like it's part of the Flash display unless you create blank space for the Like box in the Flash, which then in effect becomes the background for the Like Box.

    But if you set the Flash at 100% w/h, the likebox will be sliding all over the site as the window size in increased/decreased.

    So to have a chance for this to work, you'll need to set the w/h of the Flash, choose a location above the Flash for the Like Box that will not cover up anything in the Flash, and then position the Like Box in a <div> over the top of the Flash using an absolute position and z-indexing.

    Not that complex as long as you start out understanding that the Like Box can NOT be added to the Flash content, it can only live in a layer above the surface of the Flash.

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 4:48 PM   in reply to dgigga80

    Don't listen to martcol he's giving you misinformation in post #15 as evidenced in his statement "I'm not sure what your problem is" in post # 5.

     

    fb-root id does not wrap in like container. Use the code that you got from facebook, not the incorrectly-modfied code that others are providing. Wrap fb-like code for postioning, but don't wrap with fb-root containter.

     

    best,

    Shocker

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2012 9:48 PM   in reply to dgigga80

    Well I can't speak for the others but as a Flash developer as well as a Web developer myself, I stand by my advice.

    Integrating a Facebook Like box into a Flash site will require a little more work than just copy/paste of the code.

    My street creds:

    Flash .flv (with alpha channel) positioned over HTML... the walk on:

    http://www.mrfilmbiz.com/

    One Flash <object> positioned over another Flash <object>:

    http://www.worldbarefootcenter.com/

    The whole background is one Flash file while the Vimeo video player is a second Flash file positioned in a layer over the top of the other... but in a way that makes it look like it's part of one overall design.

    And Facebook Like Box:

    http://www.hiesequim.com/

    and

    http://www.sqis.net/

    Understand that what you are attempting to do.... add HTML content to a Flash Web site... DOESN"T WORK... but you can make the display appear as though it's part of the site.

    So to get this to work for you, you first need to set a width and height for the Flash content... probably a template, right? go back over the insrtuctions or set the w/h here:

    swfobject.embedSWF("DjTemplate.swf", "myContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);

    those 100% are width/height

    You will also need to adjust the CSS

    html, body, #myContent {

      height:100%;

      }

    no more 100% anything... you must define a set width/height:

    Once you have a set width container, then you can position the Likebox over the top of that... provided there is room and you are not covering something in the Flash.

    You'll have a little work to do but start with the premise that what you are doing is unorthadoxed (mixing Flash and HTML) and requires the extra effort.

    http://www.w3schools.com/css/css_boxmodel.asp

    http://www.barelyfitz.com/screencast/html-training/css/positioning/

    http://www.w3schools.com/css/css_positioning.asp

    Be sure to create or clear the space in the Flash file for the Like Box (as though it were actually part of the Flash). The idea is to present the two separate elements as though they where one and the same.

    Best of luck,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2012 9:28 AM   in reply to dgigga80

    Quick and dirty CSS... adjust later as needed:

    body {

    border: 0px;

    margin: 0px;

    padding: 0px;

    background-color: #0000ff; 

    }

    #main_container {

    width: 1000px;

    position: relative;

    background-color: #000000;

    border:none;

    padding: 0px;

    margin-left: auto;

    margin-right: auto;

    }

    #myContent {

    width: 1000px;

    height: 750px;
    border: 0px;
    margin: 0px;
    padding: 0px;
    background-color: #ff0000;

    }

    #like_box_holder {

    width: 300px;

    height: 300px;

    background-color: #00ff00;

    position: absolute;

    top: 200px;

    left: 50px;

    z-index:10;

    }

    HTML for the <body>

    <body>
    <div id="main_container">

      <div id="like_box_holder">
       LIKE BOX CODE GOES HERE
      </div>
     
      <div id="myContent">
       YOUR FLASH STUFF WILL GO HERE... JUST USE WHAT YOU ALREADY HAVE
      </div> 
     
    <!-- CLOSE main_container -->
    </div>

    </body>

     

    Before you add ANY other content, TEST the page as show above... the different colored backgrounds will make it easy for you to see the various containers. After you see and recognize those containers, then adjust size, background colors and add actual content to complete your project.

    also set width height to 1000 and 750 here:

    swfobject.embedSWF("DjTemplate.swf", "myContent", "100%", "65%", "9.0.0", false, flashvars, params, attributes);

    This is a quick layout that will center a 1000px wide container on the screen, inside that container is 300x300 like box that will be positioned 200 px from top, 50 px from left edge of main_container positioned over the top of myContent.

    Best of luck!

    Adninjastator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2012 10:52 AM   in reply to dgigga80

    This goes in the <head>:

    <style type="text/css">

    <!--

    body {

    border: 0px;

    margin: 0px;

    padding: 0px;

    background-color: #0000ff; 

    }

    #main_container {

    width: 1000px;

    position: relative;

    background-color: #000000;

    border:none;

    padding: 0px;

    margin-left: auto;

    margin-right: auto;

    }

    #myContent {

    width: 1000px;

    height: 750px;

    border: 0px;

    margin: 0px;

    padding: 0px;

    background-color: #ff0000;

    }

    #like_box_holder {

    width: 300px;

    height: 300px;

    background-color: #00ff00;

    position: absolute;

    top: 200px;

    left: 50px;

    z-index:10;

    }

    -->

    </style>

    Review "Internal Style Sheet" here:

    http://www.w3schools.com/css/css_howto.asp

     

    This is the <body>

    <

    body>
    <div id="main_container">

     

      <div id="like_box_holder">
       LIKE BOX CODE GOES HERE
      </div>
     
      <div id="myContent">
       YOUR FLASH STUFF WILL GO HERE... JUST USE WHAT YOU ALREADY HAVE
      </div> 
     
    <!-- CLOSE main_container -->
    </div>

    </body>

    review basic html layout here:

    http://www.scriptingmaster.com/html/basic-structure-HTML-document.asp

    and

    http://www.jonstorm.com/html/struct.htm

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2012 1:52 PM   in reply to dgigga80

    Try this complete page without changing any of the CSS or anything... lets make sure the flash and likebox are displaying before worry about colors, margins etc.

    Then post the link again and I'll review.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Untitled Document</title>

      <title></title>

      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

                    <script type="text/javascript" src="js/swfobject.js"></script>

            <script type="text/javascript" src="js/swffit.js"></script>

            <script type="text/javascript" src="js/swfaddress.js"></script>

            <script type="text/javascript" src="js/swfmacmousewheel2.js"></script>

      <script type="text/javascript">

       var flashvars = {};

       var params = {};

       params.scale = "noscale";

       params.salign = "tl";

       params.allowfullscreen = "true";

       var attributes = {id:"myContent"};

       swfobject.embedSWF("DjTemplate.swf", "myContent", "1000", "750", "9.0.0", false, flashvars, params, attributes);

       swfmacmousewheel.registerObject(attributes.id);

    </script>

     

    <style type="text/css">

     

    <!--

    body {

    border: 0px;

    margin: 0px;

    padding: 0px;

    background-color: #ffffff; 

    }

    #main_container {

    width: 1000px;

    height: 750px;

    position: relative;

    background-color: #0000FF;

    border:none;

    padding: 0px;

    margin-left: auto;

    margin-right: auto;

    }

    #myContent {

            width: 1000px;

            height: 750px;

            border: 0px;

            margin: 0px;

            padding: 0px;

            background-color: #000000;

    }

    #like_box_holder {

    width: 220px;

    height: 300px;

    background-color: #00ff00;

    position: absolute;

    top: 71px;

    left: 22px;

    z-index:50;

    background-image: none;

    }

    -->

    </style>

     

    </head>

     

    <body>

      <div id="main_container">

     

       <div id="like_box_holder">

        <fb:like-box href="http://www.facebook.com/profile.php?id=52805509#!/pages/DJ-JIGS/245171 578834739" width="220" colorscheme="dark" show_faces="true" border_color="Blue" stream="false" header="true"></fb:like-box>

       </div>

      

       <div id="myContent">

        <a href="http://www.adobe.com/go/getflashplayer">

         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" /></a>

       </div> 

     

    <!-- CLOSE main_container -->

    </div>

    </body>

    </html>

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2012 3:11 PM   in reply to dgigga80

    swfobject is rewriting some of the CSS... and your Facebook like box code was not working... so it never showed up.

    Made a couple quick adjustments and switch your FB box to the iframe version of the code instead of what you had.

    Test this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Untitled Document</title>

      <title></title>

      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

                    <script type="text/javascript" src="js/swfobject.js"></script>

            <script type="text/javascript" src="js/swffit.js"></script>

            <script type="text/javascript" src="js/swfaddress.js"></script>

            <script type="text/javascript" src="js/swfmacmousewheel2.js"></script>

      <script type="text/javascript">

       var flashvars = {};

       var params = {};

       params.scale = "noscale";

       params.salign = "tl";

       params.allowfullscreen = "true";

       var attributes = {id:"myContent"};

       swfobject.embedSWF("DjTemplate.swf", "myContent", "1000", "750", "9.0.0", false, flashvars, params, attributes);

       swfmacmousewheel.registerObject(attributes.id);

    </script>

     

    <style type="text/css">

     

    <!--

    body {

    border: 0px;

    margin: 0px;

    padding: 0px;

    background-color: #ffffff; 

    }

    #main_container {

    width: 1000px;

    height: 750px;

    position: relative;

    background-color: #0000FF;

    border:none;

    padding: 0px;

    margin-left: auto;

    margin-right: auto;

    }

    #content_holder {

    width: 1020px;

        height: 760px;

        border: 0px;

        margin: 0px;

        padding: 4px;

        background-color: #cccccc;

    }

    #myContent {

        width: 1000px;

        height: 750px;

        border: 0px;

        margin: 0px;

        padding: 0px;

        background-color: #000000;

    }

    #like_box_holder {

    width: 220px;

    height: 300px;

    background-color: #00ff00;

    position: absolute;

    top: 71px;

    left: 22px;

    z-index:50;

    background-image: none;

    }

    -->

    </style>

     

    </head>

     

    <body>

      <div id="main_container">

     

       <div id="like_box_holder">

        <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.fac ebook.com%2Fprofile.php%3Fid%3D52805509%23%21%2Fpages%2FDJ-JIGS%2F2451 71578834739&amp;width=220&amp;height=300&amp;colorscheme=light&amp;sho w_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;ap pId=295529015178" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:220px; height:300px;" allowTransparency="true"></iframe>

       </div>

      

       <div id="content_holder"

      

        <div id="myContent">

         <a href="http://www.adobe.com/go/getflashplayer">

          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" /></a>

        </div>

     

      </div>   

     

    <!-- CLOSE main_container -->

    </div>

    </body>

    </html>

    Let me know when it's up.

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2012 6:49 PM   in reply to dgigga80

    What browser are you using to view? Do you have FireFox?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2012 8:49 PM   in reply to dgigga80

    Well remember that at the very beginning I told you that attempting to add HTML content to a Flash Web site doesn't work?

    And now you are having problems to prove that.

    Start by correcting this error... two <title>s

     

    <title>Untitled Document</title>

     

      <title></title>

    can't have both... delete one..

    But by the way... our work around displays just fine in FF.... just needs your customization of w/h, colors, etc.

    Later I also mentioned how your swfobject is changing the CSS?... well it's also creating a IE conditional... meaning its ADDING somting to the page that if it detects Internet Explorer... do this, and if not, do that....

    So the Flash template you are using is fighting every effort you make to edit it and change any of the preset defaults.

    You might try removing

    content="IE=EmulateIE8"

    from

     

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

    Next step would be to tear into the .js and remove all IE conditionals... which may be a real mess.

    http://reference.sitepoint.com/css/conditionalcomments

    to verify this problem, view your site on Firefox on an friends computer.... the display in IE is now being controlled by the Flash template... not something in the HTML

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2012 11:47 PM   in reply to adninjastrator

    adninjastrator: I am bowled over by you generosity and determination.

     

    Dgigga80: maybe it's time to ask whether you really need the fb stuff?  if so then perhaps you need to rethink your strategy.

     

    I have found the discussion helpful

     

    Martin

     
    |
    Mark as:
1 2 Previous Next
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points