1 2 Previous Next 55 Replies Latest reply: Jan 11, 2013 3:47 AM by martcol RSS

    Help with Facebook Plugin Coding in Dreamweaver

    dgigga80 Community Member

      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!

        • 1. Re: Help with Facebook Plugin Coding in Dreamweaver
          adninjastrator Community Member

          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

          • 3. Re: Help with Facebook Plugin Coding in Dreamweaver
            adninjastrator Community Member

            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

            • 4. Re: Help with Facebook Plugin Coding in Dreamweaver
              dgigga80 Community Member

              Sorry about that. I updated the html code.

               

              Can you take a look at the webpage again? djjigs.com

               

              I am really frustrated at this point. Any help would be greatly appreciated.

               

              Thanks again,

              • 5. Re: Help with Facebook Plugin Coding in Dreamweaver
                martcol Community Member

                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

                • 6. Re: Help with Facebook Plugin Coding in Dreamweaver
                  dgigga80 Community Member

                  I was able to fix some the errors. I am not sure what the following means: required attribute "type" not specified    

                   

                  • 7. Re: Help with Facebook Plugin Coding in Dreamweaver
                    adninjastrator Community Member

                    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

                    • 8. Re: Help with Facebook Plugin Coding in Dreamweaver
                      martcol Community Member

                      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

                      • 9. Re: Help with Facebook Plugin Coding in Dreamweaver
                        martcol Community Member

                        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

                        • 10. Re: Help with Facebook Plugin Coding in Dreamweaver
                          dgigga80 Community Member

                          Yes that is exactly what I am trying to do!

                          • 11. Re: Help with Facebook Plugin Coding in Dreamweaver
                            dgigga80 Community Member

                            I am trying to add the Facebook plugin to the right side of the webpage.

                            • 12. Re: Help with Facebook Plugin Coding in Dreamweaver
                              martcol Community Member

                              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

                              • 13. Re: Help with Facebook Plugin Coding in Dreamweaver
                                dgigga80 Community Member

                                Would you be able to send me the code so I could see exactly what you mean? This would be a huge help!

                                I am trying to understand what you did but I am not exactly sure.

                                 

                                I don't mean to keep bothering you...just trying to figure this out.

                                 

                                Thanks again!

                                • 14. Re: Help with Facebook Plugin Coding in Dreamweaver
                                  martcol Community Member

                                  OK I'll have a go

                                  • 15. Re: Help with Facebook Plugin Coding in Dreamweaver
                                    martcol Community Member

                                    This is at the bottom of your page:

                                     

                                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 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=303349909722647";

                                      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.gif" 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=303349909722647";

                                      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!

                                    • 16. Re: Help with Facebook Plugin Coding in Dreamweaver
                                      dgigga80 Community Member

                                      How do I adjust the height and width of the site?

                                      • 17. Re: Help with Facebook Plugin Coding in Dreamweaver
                                        martcol Community Member

                                        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

                                        • 18. Re: Help with Facebook Plugin Coding in Dreamweaver
                                          dgigga80 Community Member

                                          Ok so I changed the coding but now the webpage width is offset.

                                          • 19. Re: Help with Facebook Plugin Coding in Dreamweaver
                                            Rik Ramsay Community Member

                                            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>

                                            • 20. Re: Help with Facebook Plugin Coding in Dreamweaver
                                              dgigga80 Community Member

                                              I replaced the code and it fixed the page width but now there is no facebook plugin

                                              • 21. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                adninjastrator Community Member

                                                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

                                                • 22. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                  the_shocker Community Member

                                                  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

                                                  • 23. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                    dgigga80 Community Member

                                                    At this point I am really confused as I have received 4 different suggestions. Can someobody please help with this flash site?

                                                     

                                                    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.

                                                     

                                                    Thanks in advance!

                                                    • 24. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                      adninjastrator Community Member

                                                      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

                                                      • 25. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                        dgigga80 Community Member

                                                        Ok I appreciate the information you have provided. It was very detailed.

                                                        I will attempt to get this to work as you explained.

                                                         

                                                        Thanks again!

                                                        • 26. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                          dgigga80 Community Member

                                                          Ok so again, I dont have much experience with web design. I want to adjust my width and height of my flash template so I can layer other div containers over the flash layer.

                                                          How can I change my dimensions to be similar to the website http://www.hiesequim.com/

                                                           

                                                          Any help provided would be greatly appreciated.

                                                           

                                                          Thanks again.

                                                          • 27. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                            adninjastrator Community Member

                                                            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

                                                            • 28. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                              dgigga80 Community Member

                                                              Thank you so much! This is a big help!

                                                               

                                                              I hate to be a bother but can you show me where to place the code?

                                                                             

                                                               

                                                                     

                                                               

                                                                     

                                                               

                                                                  

                                                                  

                                                                             

                                                               

                                                                     

                                                               

                                                                     

                                                               

                                                                     

                                                               

                                                               

                                                                 

                                                              • 29. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                adninjastrator Community Member

                                                                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

                                                                • 30. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                  dgigga80 Community Member

                                                                  Ok so I included the code to my page. I am trying to adjust the style/css settings but I am not quite sure how the site is being effected.

                                                                  It appears that the new content in under the flash layer. Or am I confused? I want to get the new content on top of the flash layer?

                                                                  http://www.djjigs.com

                                                                  • 31. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                    adninjastrator Community Member

                                                                    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/245171578834739" 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.gif" alt="Get Adobe Flash player" /></a>

                                                                       </div> 

                                                                     

                                                                    <!-- CLOSE main_container -->

                                                                    </div>

                                                                    </body>

                                                                    </html>

                                                                    Adninjastrator

                                                                    • 32. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                      dgigga80 Community Member

                                                                      Ok I changed the page coding like you requested.

                                                                      • 33. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                        adninjastrator Community Member

                                                                        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.facebook.com%2Fprofile. php%3Fid%3D52805509%23%21%2Fpages%2FDJ-JIGS%2F245171578834739&amp;width=220&amp;height=300 &amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=fa lse&amp;appId=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.gif" alt="Get Adobe Flash player" /></a>

                                                                            </div>

                                                                         

                                                                          </div>   

                                                                         

                                                                        <!-- CLOSE main_container -->

                                                                        </div>

                                                                        </body>

                                                                        </html>

                                                                        Let me know when it's up.

                                                                        Adninjastrator

                                                                        • 34. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                          dgigga80 Community Member

                                                                          Ok the new code is up now.

                                                                          • 35. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                            adninjastrator Community Member

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

                                                                            • 36. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                              dgigga80 Community Member

                                                                              I do not have firefox. I am using Windows Internet Explorer 9

                                                                              • 37. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                                dgigga80 Community Member

                                                                                What do I need to do at this point?

                                                                                • 38. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                                  adninjastrator Community Member

                                                                                  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

                                                                                  • 39. Re: Help with Facebook Plugin Coding in Dreamweaver
                                                                                    martcol Community Member

                                                                                    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

                                                                                    1 2 Previous Next