Hello friends

 

Iwas trying to customize myfacebook page and tried to add jquery but its not working

 

here is the code

 

<STYLE TYPE="text/css">
<!--
.main, .main TD, .main TH
{
background-color:#f7f7f7;
color:black;
}
.main .inner TD{
background-color:white;
color:black;
}
.footer, .footer TD, .footer TH
{
background-color:#023865;
color:#ffffff;
}
-->
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
</STYLE>
<script type="text/javascript">
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

	$("ul.tabs li").removeClass("active"); //Remove any "active" class
	$(this).addClass("active"); //Add "active" class to selected tab
	$(".tab_content").hide(); //Hide all tab content

	var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
	$(activeTab).fadeIn(); //Fade in the active ID content
	return false;
});

});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">



<table width="625" height="30" border="0" cellpadding="0" class="main">
<tr>
<td colspan="2"><img src="http://i849.photobucket.com/albums/ab59/sash_007/facebookpage-header.jpg" width="625" height="100"</td>
</tr>
<tr>
<td class="inner"><p> </p>
<p>Webdesigncut  is a promising, web design agency with a passion for website design,website hosting,graphic design and search engine optimisation.  .</p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<ul class="tabs">
   <li><a href="#tab1">Gallery</a></li>
   <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
   <div id="tab1" class="tab_content">
       <!--Content-->
<p>ny with the focus and expertise to translate your business objectives into a success</p>
   </div>
   <div id="tab2" class="tab_content">
      <!--Content--><p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development comp</p>
   </div>
</div>
<p> </p></td>
<td><p> </p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p> </p></td>
</tr>
<tr>
<td><p> </p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p> </p></td>
</tr>
</table>

</td>
</tr>
</table>
<table width="625" height="100" border="0" cellpadding="0" class="footer">
<tr><td><p> </p>
<p>This is a test</p>
<p> </p>
</td>
</tr>
</table>

 

 

The problem is you are using <script> .. </script> facebook don't appreciates this.

Edited June 3, 201016 yr by terydinho

Yep, probably the same as myspace, they aren't going to let you embed something that could affect their site.

All right i referred to this tutorialfor embedding js in fbml 

 

and  also downloaded the fbjquery fromhere

 

and  also referred to thisthread 

 

and here is my code

 

<STYLE TYPE="text/css">
<!--
.main, .main TD, .main TH
{
background-color:#f7f7f7;
color:black;
}
.main .inner TD{
background-color:white;
color:black;
}
.footer, .footer TD, .footer TH
{
background-color:#023865;
color:#ffffff;
}
-->
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
</STYLE>
<script>
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

	$("ul.tabs li").removeClass("active"); //Remove any "active" class
	$(this).addClass("active"); //Add "active" class to selected tab
	$(".tab_content").hide(); //Hide all tab content

	var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
	$(activeTab).fadeIn(); //Fade in the active ID content
	return false;
});

});
</script>
<script src="http://www.webdesigncut.com/javascript/FBjqRY.js"></script>
<script src="http://www.webdesigncut.com/javascript/FBjqRY.min.js"></script>
<script src="http://www.webdesigncut.com/javascript/Utility.js"></script>



<table width="625" height="30" border="0" cellpadding="0" class="main">
<tr>
<td colspan="2"><img src="http://i849.photobucket.com/albums/ab59/sash_007/facebookpage-header.jpg" width="625" height="100"</td>
</tr>
<tr>
<td class="inner"><p> </p>
<p>Webdesigncut  is a promising, web design agency with a passion for website design,website hosting,graphic design and search engine optimisation.  .</p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<ul class="tabs">
   <li><a href="#tab1">Gallery</a></li>
   <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
   <div id="tab1" class="tab_content">
       <!--Content-->
<p>ny with the focus and expertise to translate your business objectives into a success</p>
   </div>
   <div id="tab2" class="tab_content">
      <!--Content--><p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development comp</p>
   </div>
</div>
<p> </p></td>
<td><p> </p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p> </p></td>
</tr>
<tr>
<td><p> </p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p> </p></td>
</tr>
</table>

</td>
</tr>
</table>
<table width="625" height="100" border="0" cellpadding="0" class="footer">
<tr><td><p> </p>
<p>This is a test</p>
<p> </p>
</td>
</tr>
</table>

 

but it still didnt worked

 

 

do you need to have the links to the .js files before your script?

do you need to have the links to the .js files before your script?

 

Yeah, you need to load jQuery prior to writing any jQuery.

 

Just curious to see if jQuery works. So please reply

you mean like this

 

<script src="http://www.webdesigncut.com/javascript/FBjqRY.js"></script>
<script src="http://www.webdesigncut.com/javascript/FBjqRY.min.js"></script>
<script src="http://www.webdesigncut.com/javascript/Utility.js"></script>

<STYLE TYPE="text/css">
<!--
.main, .main TD, .main TH
{
background-color:#f7f7f7;
color:black;
}
.main .inner TD{
background-color:white;
color:black;
}
.footer, .footer TD, .footer TH
{
background-color:#023865;
color:#ffffff;
}
-->
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
</STYLE>
<script>
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

	$("ul.tabs li").removeClass("active"); //Remove any "active" class
	$(this).addClass("active"); //Add "active" class to selected tab
	$(".tab_content").hide(); //Hide all tab content

	var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
	$(activeTab).fadeIn(); //Fade in the active ID content
	return false;
});

});
</script>




<table width="625" height="30" border="0" cellpadding="0" class="main">
<tr>
<td colspan="2"><img src="http://i849.photobucket.com/albums/ab59/sash_007/facebookpage-header.jpg" width="625" height="100"</td>
</tr>
<tr>
<td class="inner"><p> </p>
<p>Webdesigncut  is a promising, web design agency with a passion for website design,website hosting,graphic design and search engine optimisation.  .</p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<ul class="tabs">
   <li><a href="#tab1">Gallery</a></li>
   <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
   <div id="tab1" class="tab_content">
       <!--Content-->
<p>ny with the focus and expertise to translate your business objectives into a success</p>
   </div>
   <div id="tab2" class="tab_content">
      <!--Content--><p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development comp</p>
   </div>
</div>
<p> </p></td>
<td><p> </p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p> </p></td>
</tr>
<tr>
<td><p> </p>
<p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p>
<p> </p></td>
</tr>
</table>

</td>
</tr>
</table>
<table width="625" height="100" border="0" cellpadding="0" class="footer">
<tr><td><p> </p>
<p>This is a test</p>
<p> </p>
</td>
</tr>
</table>