Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Facebook Plugin on Website

    Hey,

    I don't have much experience with coding so I am looking for some help with this issue.
    I am trying to add the facebook plugin to my webpage and I want it to be displayed on the right side of the page.
    The website is http://www.djjigs.com

    This is the code of the FB plugin:
    Code:
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    Code:
    <div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="220" data-colorscheme="dark" data-show-faces="true" data-border-color="Blue" data-stream="false" data-header="true"></div>
    This is my index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    	<head>
    		<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", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
    			swfmacmousewheel.registerObject(attributes.id);
    		</script>
            
            <style type="text/css" media="screen">
    		<!--
    		html, body, #myContent	{ 
    		height:100%; 
    		}
    		
    		body	{ 
    		background-color:#000000;
    		margin:0; 
    		padding:0; 
    		overflow:hidden; 
    		}
    			
    		-->
    		</style>
    	</head>
    	<body>
        <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>
    	</body>
    </html>
    This is my settings.xml
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <djtemplate>
    
    	<!-- 
    	Attributte = htmlTitle : The title for your website.
    	Attributte = logoPath: The path of your logo. Use a maximum height of 40px.
    	
    Attributte = color: The main color for your website.
    	Attributte = topBottomBarColor: The color for the top and bottom bar.
    	Attributte = topBottomBarAlpha: the alpha for the top and bottom bar (0-1).
    	 -->
    	<main htmlTitle="DJ JIGS Official Site" logoPath="images/main/Boston_Skyline.png" color="#0000FF" topBottomBarColor="#9999FF" topBottomBarAlpha="0.0"/>
    	
    	<!-- 
    	Attributte = src : The path/ID of the background media. You can load an own image, flash movie(swf), youtube video(ID) or even an own video as background. 
    	Attributte = scaleMode : You can also set a scaleMode, how the background should be scaled - not required for a youtube video.
    	Available scale modes:
    		- "stretch" (the default) - The background will fill the stage width/height exactly.
    		- "proportionalInside" - The background will be scaled proportionally to fit inside the area defined by the stage width/height.
    		- "proportionalOutside" - The background will be scaled proportionally to completely fill the area, allowing portions of it to exceed the bounds defined by the stage width/height.
    		- "widthOnly" - Only the width of the background will be adjusted to fit.
    		- "heightOnly" - Only the height of the background will be adjusted to fit.
    		- "none" - No scaling of the background will occur.
    		
    	Attributte = loopVideo(only for a video/youtube background) : To repeat a video indefinitely, just set yes. For now repeats just set no.
    	Attributte = videoSound : Enables(yes) or disables(no) the sound of the background video.
    							  When you enable it, the music of the mp3 player doesnt start automatically. When you disable it, the music of the mp3 player starts automatically.
    	 -->
    	<background src="images/main/hi-res.jpg" scaleMode="stretch" loopVideo="yes" videoSound="no" youtubeQuality="large" />
    	
    	<!-- 
    	Attributte = textColor : The color for the text of the menu.
    	Attributte = overTextColor : The color for the text of the menu, when you move your mouse over it.
    	Attributte = mouseOverColor : The color for the background layers of the menu, when you move your mouse over it.
    	-->
    	<menu textColor="#FFFFFF" overTextColor="#000000" mouseOverColor="#808080" />
    	
    	<!--
    	The footer text, no HTML allowed.
    	Attributte = textColor : The color for text of the copyright.
    	-->
    	<copyright textColor="#FFFFFF">Copyright  2011 DJ JIGS</copyright>
    	
    	<!--
    	Attributte =  offsetLineColor : The color for the line between items and the color for the track of all scrollbars. 
    	Attributte = mouseOverRectangleColor : The color for the background of some items, when you move your mouse over it. 
    	Attributte =  mouseOverRectangleAlpha : The alpha(0-1) for the background of some items, when you move your mouse over it. 
    	Attributte =  modalControllerColor : The color for the controller buttons and text in the modal container(News, Gallery). 
    	Attributte =  backgroundColor : The color of the shape behind each textfield(Modifification for Dj Jigs). 
    	Attributte =  backgroundAlpha : The opacity of the shape behind each textfield(Modifification for Dj Jigs).
    	-->
        <modules  offsetLineColor="#333333" mouseOverRectangleColor="#FFFFFF" mouseOverRectangleAlpha="0.2" modalControllerColor="#FFFFFF" backgroundColor="#000000" backgroundAlpha="0.8">
    	<!-- You can set an own title for each module and the linkage of the corresponding header image. Dont delete or change the id, these are necessary for internal usage.-->
    		<module title="HOME" headerImage="images/main/DJ_JIGS_PS2B.png" xml="xml/modules/home.xml" id="home" />
    		<module title="BIO" headerImage="images/main/DJ_JIGS_PS2B.png" xml="xml/modules/biography.xml" id="bio" />
    		<module title="AUDIO" headerImage="images/main/DJ_JIGS_PS2B.png" xml="xml/modules/discography.xml" id="disco" />
    		<module title="GALLERY" headerImage="images/main/DJ_JIGS_PS2B.png" xml="xml/modules/gallery.xml" id="gallery" />
    		<module title="CONTACT" headerImage="images/main/DJ_JIGS_PS2B.png" xml="xml/modules/contact.xml" id="contact" />
    		<!--<module title="CUSTOM" headerImage="images/main/header2.jpg" xml="xml/modules/custom.xml" id="custom" />-->
    	</modules>
    	
    	
    	<music>
    		<!-- You can set unlimited of tracks for the mp3Player. Just create a new track node with a linkage of the track and set the title of the track in the title attribute.-->
    		<track title="DJ Got Us Fallin In Love (Instr)">music/Usher ft Fatman Scoop and Disco Fries - DJ Got Us Fallin In Love (Instr).mp3</track>
    		<track title="93 Til Infinity-Instr">music/Souls Of Mischief-93 Til Infinity-Instr.mp3</track>
    		<track title="Otis">music/Jay-Z and Kanye West - Otis.mp3</track>
    	</music>
    	
    	
    	<!--
    	Sociales buttons settings:
    	You can set an own number of sociales buttons, which will be displayed at the bottom right corner.
    	Your social icons need a max. height of 25px.
    	Preset for adding a new social linkage button:
    	
    	<social icon="URL OF THE ICON" link="THE LINKAGE OF THE SOCIAL SITE" />
    	
    	Attributte = icon : The URL of the icon. You find more icons in the src/icons folder.
    	Attributte = link : The linkage of the social website.
    	-->
    	<sociales>
    		<social icon="socialIcons/facebook_32.png" link="http://www.facebook.com/pages/DJ-JIGS/205354326148906" />
    		<social icon="socialIcons/twitter_32.png" link="http://activeden.net/user/radykal/portfolio" />
    		<social icon="socialIcons/soundcloud_icon.png" link="http://soundcloud.com/dj-jigs-1" />
    	</sociales>
    	
    	
    	<!--
    	Sharing service settings:
    	You can set unlimited of share buttons. This service runs with www.addthis.com.
    	So if you like, you can register as a member and control and view your own analytics.
    	Here is a list of all available sharing services:
    	http://www.addthis.com/services/list
    	
    	Attributte = enable : Enable (yes) or disable (no) the share toolbar.
    	Attributte = icon : The URL of the share icon, you see top right.
    	Attributte = link : The URL of the page being shared - required.
    	Attributte = title : The title of the page being shared - not required.
    	Attributte = description : A short description of the page being shared. - not required.
    	Attributte = userName : Your AddThis username (used to attribute shares, in your analytics). - not required.
    	
    	Preset for adding a new share button:
    	
    	<share icon="URL OF THE ICON" title="TITLE OF THE SHARING SERVICE" code="CODE OF THE SERVICE" />
    	
    	Attributte = icon : The URL of the icon. You find more icons in the icons folder.
    	Attributte = title : The title of the sharing service.
    	Attributte = code : The code of the sharing service. See this list for all codes: http://www.addthis.com/services/list
    	-->
    	<sharings enable="yes" icon="sharingIcons/sharethis_16.png" link="http://activeden.net/user/radykal/portfolio" title="My Dj template" description="Dj Template with Mp3 Player, Youtube Player etc." userName="YOUR USERNAME">	
    		<share icon="sharingIcons/facebook_16.png" link="http://www.facebook.com" title="Facebook" code="facebook" />
    		<share icon="sharingIcons/twitter_16.png" title="Twitter" code="twitter" />
    		<share icon="sharingIcons/blogger_16.png" title="Blogger Post" code="blogger" />
    		<share icon="sharingIcons/soundcloud_icon.png" title="Soundcloud" code="soundcloud" />
    	</sharings>
    	
    </djtemplate>
    Can anybody help with this because I am lost

    Thanks in advance!

  • #2
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hello dgigga,

    I would suggest putting
    Code:
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    and
    Code:
    <div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="220" data-colorscheme="dark" data-show-faces="true" data-border-color="Blue" data-stream="false" data-header="true"></div>
    both in the body tags. For example, look at this web page. If you want to move the plug-in itself, you can try putting the tag that aligns it to the right:
    Code:
    <right><div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="220" data-colorscheme="dark" data-show-faces="true" data-border-color="Blue" data-stream="false" data-header="true"></div></right>
    Hope this helps.
    Last edited by Taro; 02-18-2012 at 04:17 PM. Reason: forgot something
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I appreciate the response.

    I added the code like you said but I am still having a problem. I use dreamweaver for editing purposes.
    After I add the code to my html, I get an error message "all.js is not on local disk"

    I am not sure what I need to do at this point.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    	<head>
    		<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", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
    			swfmacmousewheel.registerObject(attributes.id);
    		</script>
            
            <style type="text/css" media="screen">
    		<!--
    		html, body, #myContent	{ 
    		height:100%; 
    		}
    		
    		body	{ 
    		background-color:#000000;
    		margin:0; 
    		padding:0; 
    		overflow:hidden; 
    		}
    			
    		-->
    		</style>
    	</head>
    	<body>
        <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="220" data-colorscheme="dark" data-show-faces="true" data-border-color="Blue" data-stream="false" data-header="true"></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>
    	</body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •