Convert HTML to FBML

Post by **Nipuna** » Sat Oct 02, 2010 9:46 pm

Please Help me for this this is argent.

I want to Convert HTML code to FBML please help me for this.

No one helped me for my past FBML related post.

Please Help me even this one.

i really need your help

Saman · Post by **Saman** » Sun Oct 03, 2010 10:01 am

I have also seen your previous post about FBML. The main point here is no one is going to either write or run-debug your code. I remember Neo stated this couple of times to some people when he was asked to code for them

Just submit your question/error and someone will try to help you.

First of all, what's your knowledge in FBML now? Have you followed all their tutorials and written some codes by yourself?

If this is not the case, you will have to learn FBML from Facebook wiki site. If there are points that is not clear, you can post here with a reference.

FBML language reference:
http://developers.facebook.com/docs/reference/fbml/

Some Examples:
http://fbrell.com/examples

Test Console:
http://developers.facebook.com/tools/console/

If you have advance question, you can submit on their forum:
http://forum.developers.facebook.net/

Some valuable instructions about converting HTML to FBML:
http://www.facebook.com/topic.php?uid=4 ... opic=28273

Here you have so much of information. Learn it and do it yourself. This is the curve that worked for me

Post by **Nipuna** » Sun Oct 03, 2010 10:58 am

Here is the code i forgot to add it.

In FBML i know i have to remove some HTML tags. Like <body> and more but in here i didn't change them because i wanted to put the exact HTML code.
The Problem is nothing loading only a blank page. I tried by removing some tags but didn't work

Code: Select all

 <!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" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>FaceBook</title>
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}
-->
</style>
</head>
<body style="padding:0px; margin:0px">



	<div style="width:520px; padding:0px; margin:0px auto; font-family:'Times New Roman', Times, serif; font-size:14px; color:#b4c0c3; text-align:left; background: url(http://www.small-business-partnership.com/images/4_v2.jpg) no-repeat left top">
			
		
	  <div style="padding:0 30px 0 30px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:28px; color:#CE0002">
	    <div align="center"><strong>10 Tricks to Attract More Buyers</strong></div>
	    <div style="clear:both; font-size:0px; height:1px"><img src="http://www.small-business-partnership.com/images/spacer.gif" alt="" /></div>
      </div>	
  <div style="padding:0 10px 29px 10px">
	<div style="width:500px; float:left">
				<div style="font-size:0px"><img src="http://www.small-business-partnership.com/images/left_top.png" alt="" /></div>
				<div style="">
				  <div style="padding:0px 11px 29px 11px">
				    <div align="center"><p>
    <object "444" height="250"><param name="movie" value="http://www.youtube.com/v/0LqhDBvSCu0?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="0"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/0LqhDBvSCu0?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="0" width="402" height="250"></embed></object>
							<div style="padding:0px 0 9px 0"><img src="http://www.small-business-partnership.com/images/arrows.png"></div>							
				    </div>
						<div style="padding:0 7px 0 30px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#000000">Friends, enter your email address below and get instant access to your FREE Guide and Videos.
						  <div style="clear:both; font-size:0px; height:1px"><img src="http://www.small-business-partnership.com/images/spacer.gif" alt="" /></div>
				    </div>
                    <div style="padding:30px 30px 0 30px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#000000"><span class="style1">
                    
<!-- ProFollow Web Form Generator 3.0 -->
<style type="text/css">
#af-form-1253187526 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-1253187526 .af-body a{color:#094C80;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-1253187526 .af-body input.text, #af-form-1253187526 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:18px;font-family:Verdana, sans-serif;}
#af-form-1253187526 .af-body input.text:focus, #af-form-1253187526 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-1253187526 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-1253187526 .af-body{background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-1253187526 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-1253187526 .af-quirksMode{padding-right:0px;padding-left:0px;}
#af-form-1253187526 .af-standards .af-element{padding-right:0px;padding-left:0px;}
#af-form-1253187526 .bodyText p{margin:1em 0;}
#af-form-1253187526 .buttonContainer input.submit{background-image:url("http://www.tampa-smallbusinessmarketing.com/images/opt_orange.png");background-color:#FF6600;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:16px;font-family:Verdana, sans-serif;}
#af-form-1253187526 .buttonContainer input.submit{width:auto;}
#af-form-1253187526 .buttonContainer{text-align:center;}
#af-form-1253187526 body,#af-form-1253187526 dl,#af-form-1253187526 dt,#af-form-1253187526 dd,#af-form-1253187526 h1,#af-form-1253187526 h2,#af-form-1253187526 h3,#af-form-1253187526 h4,#af-form-1253187526 h5,#af-form-1253187526 h6,#af-form-1253187526 pre,#af-form-1253187526 code,#af-form-1253187526 fieldset,#af-form-1253187526 legend,#af-form-1253187526 blockquote,#af-form-1253187526 th,#af-form-1253187526 td{float:none;color:inherit;position:static;margin:0;padding:0;}
#af-form-1253187526 button,#af-form-1253187526 input,#af-form-1253187526 submit,#af-form-1253187526 textarea,#af-form-1253187526 select,#af-form-1253187526 label,#af-form-1253187526 optgroup,#af-form-1253187526 option{float:none;position:static;margin:0;}
#af-form-1253187526 div{margin:0;}
#af-form-1253187526 fieldset{border:0;}
#af-form-1253187526 form,#af-form-1253187526 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1253187526 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-1253187526 input,#af-form-1253187526 button,#af-form-1253187526 textarea,#af-form-1253187526 select{font-size:100%;}
#af-form-1253187526 p{color:inherit;}
#af-form-1253187526 select,#af-form-1253187526 label,#af-form-1253187526 optgroup,#af-form-1253187526 option{padding:0;}
#af-form-1253187526 table{border-collapse:collapse;border-spacing:0;}
#af-form-1253187526 ul,#af-form-1253187526 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-1253187526,#af-form-1253187526 .quirksMode{width:292px;}
#af-form-1253187526.af-quirksMode{overflow-x:hidden;}
#af-form-1253187526{background-color:transparent;border-color:#CFCFCF;border-width:1px;border-style:none;}
#af-form-1253187526{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>
<form method="post" class="af-form-wrapper" action="http://clients.profollow.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1253187526" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="smallbizprospec" />
<input type="hidden" name="redirect" value="http://www.tampa-smallbusinessmarketing.com/thankyou.html" id="redirect_4636a4c44327cb9930ea1e19c1ea5463" />

<input type="hidden" name="meta_adtracking" value="FB_Fanpage" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />

<input type="hidden" name="meta_tooltip" value="email||Enter your email address" />
</div>
<div id="af-form-1253187526" class="af-form"><div id="af-body-1253187526" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-11482755"></label>
<div class="af-textWrap"><input class="text" id="awf_field-11482755" type="text" name="email" value="Enter your email address" tabindex="500"  onfocus=" if (this.value == 'Enter your email address') { this.value = ''; }" onblur="if (this.value == '') { this.value='Enter your email address';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" id="af-submit-image-1253187526" type="image" class="image" style="background: none;" alt="Submit Form" src="http://www.tampa-smallbusinessmarketing.com/images/opt_orange.png" tabindex="501" />
<div class="af-clear"></div>
</div>
<div class="af-element">
<div class="bodyText"><p style="text-align: center;"><span style="font-size: 11px;">I respect your email privacy and will not rent, trade, or release your information to any third party for any reason.</span></p></div><div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.profollow.com/form/displays.htm?id=jEyszIwc7KxMbA==" alt="" /></div>
</form>
<script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-1253187526")) {
                document.getElementById("af-form-1253187526").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-1253187526")) {
                document.getElementById("af-body-1253187526").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-1253187526")) {
                document.getElementById("af-header-1253187526").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-1253187526")) {
                document.getElementById("af-footer-1253187526").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>

<!-- /ProFollow Web Form Generator 3.0 -->



</span>
						  <div style="clear:both; font-size:0px; height:1px"><img src="http://www.small-business-partnership.com/images/spacer.gif" alt="" /></div>
				    </div>
				  </div>
				</div>
				<div style="font-size:0px"><img src="http://www.small-business-partnership.com/images/left_bottom.png" alt="" /></div>
	</div>
			<div style="clear:both; font-size:0px; height:1px"><img src="http://www.small-business-partnership.com/images/spacer.gif" alt="" /></div>
	  </div>
<div style="font-size:0px; height:1px /></div>
		<div style="padding:9px 36px 8px 36px; font-family:'Times New Roman', Times, serif; font-size:14px; color:#627073">
		  <div style="padding:9px 36px 5px 36px" align="center"><a style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#B8C7BB; text-decoration:none">Small-Business-Partnership.com</a>      </div>
    <div style="clear:both; font-size:0px; height:1px"><img src="http://www.small-business-partnership.com/images/spacer.gif" alt="" /></div>
	  </div>				
</div>	

	
	



</body>
</html>

Saman · Post by **Saman** » Sun Oct 03, 2010 3:27 pm

You didn't follow the FBML specification. Refer to the links I provided especially the one about html to fbml conversion and see the list of things you need to do. According to my knowledge there is no automated converter for this. So you need to learn by reading the specification.

Post by **Nipuna** » Sun Oct 03, 2010 3:41 pm

I've managed it to work on FaceBook. But I have a little problem it is i need to make a web form like below. I tried searching on the net, i found some sites with help but the form button is not the way i want.

Please Tell me how to make a web form like this. I need to add an image to the button as in the picture. Please Help

: Web form.jpg (14.99 KiB) Viewed 12182 times

Saman · Post by **Saman** » Sun Oct 03, 2010 5:46 pm

See How to add an image to a html button (works in fbml too).

Make sure you submit your questions according to terms of use of ROBOT.LK. Please read (10), (11) and (12) carefully. Since you are a team member of ROBOT.LK you need be a lesson to others

Post by **Nipuna** » Sun Oct 03, 2010 6:00 pm

Thanks your One is great.

But there isn't a Textbox to type the email. can u give me a code with it?
And it must be disappear after i type letters

Saman · Post by **Saman** » Sun Oct 03, 2010 6:18 pm

Code: Select all

<form name="myform" action="https://robot.lk/index.php" method="POST">
<input type="text" size="25" value="Enter your name here!"><br>

-- BUTTON CODE FROM ABOVE --

</form>

Anyway, it seems like you don't even know the fundamentals. I recommend you to read more tutorials and learn the fundamentals first. Don't expect other people to write code for you

Post by **Nipuna** » Sun Oct 03, 2010 6:29 pm

I know Basic but don't know much about buttons and text boxes and about others.

I know adding videos, sounds etc..

Post by **Nipuna** » Sun Oct 03, 2010 6:42 pm

Thanks Friend it's working.

Thanks again

Convert HTML to FBML

Convert HTML to FBML

Re: Convert HTML to FBML

Re: Convert HTML to FBML

Re: Convert HTML to FBML

Re: Convert HTML to FBML

Re: Convert HTML to FBML

Re: Convert HTML to FBML

Re: Convert HTML to FBML

Re: Convert HTML to FBML

Re: Convert HTML to FBML