How to add a facebook page with fbml code

[Face]

I need speed help from you friends.I have a FBML code.I wanna make a page by that code.
thais post related to the post https://robot.lk/viewtopic.php?f=41&t=2018

[Face]

I am waiting to test my template.please reply soon.

[Nipuna]

I don't know much Friend But I did as this

I just copied the HTML code of the web site I made then I pasted it to FBML page.
Ahh
I forgot did you add FBML to your Fan Page? Without that Code isn't working.

Thanks

[Face]

I did brother.I past my code in that box & update it.But no preview in it.may contain errors.

[Neo]

[media]http://www.youtube.com/watch?v=0ppqOjZ2094[/media]

The FBML application is at http://www.facebook.com/apps/applicatio ... 4949752878



FBML Test Console provided by Facebook is also a good place to test your FBML code.

1. Log into to Facebook
2. Got to Facebook Developer Tools
3. Click on the FBML Test Console Tab
4. You will notice that the tool will automatically retrieve your user ID and API Key
5. Input code in the left box
6. Click on “Preview”

[Face]

Got a preview in that.But lost pic.I can get those pics again.But the problem is No pre view in FBML tab.

FBML.png (70.57 KiB) Viewed 10642 times

[Neo]

Are you okay to continue with it or do you want further help?

[Face]

I wan't little help bro.I will try to get the preview on my test page.
I wanna edit the width of this template. it is 720pix i think.I wanna make it in ti 520pix.can you please help me on this.

[Neo]

See the start div tag that specify the page width. I'm pasting the same reply I have given to the other topic.

Since fbml doesn't support all html tags (Firefox supports almost all html), we will have to make the page in accordance to fbml to see a preview.

I found a great fbml tutorial. Notice the fbml code they have written for a similar page as yours.

How to Create Facebook FBML Template, Part1
How to Create Facebook FBML Page, Part 2

This is the best tutorial I have seen on the net. Based on that, I removed the top and bottom part of your code. See whether this works. Also, you can't store images in facebook. So you need upload them to pic sharing site and link them to the page.

Code: Select all

       <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(free_facebook_template/free_facebook_template/html/images/bg.jpg) no-repeat left top">
          <div style="padding:10px 0 9px 20px">
             <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                   <td height="22" width="63"><img src="free_facebook_template/free_facebook_template/html/images/like.png" alt="" /></td>
                   <td width="201" style="font-size:12px"><div style="font-family:Tahoma; font-size:12px; color:#FFFFFF">Don't forget to become a fan!</div></td>
                   <td width="151">&nbsp;</td>
                   <td width="31"><a href="#"><img src="free_facebook_template/free_facebook_template/html/images/icon2.png" alt="" border="0" /></a></td>
                   <td width="54"><a href="#"><img src="free_facebook_template/free_facebook_template/html/images/icon3.png" alt="" border="0" /></a></td>
                </tr>
             </table>
          </div>   
          <div style="font-size:0px"></div>
          <div class="desert" style="padding:5px 30px 5px; font-size:42px; font-weight: bold; color: #F93; font-family: Arial, Helvetica, sans-serif;"><strong> Desert  Jewel Marketing</strong></div>   
          <div style="padding:0 5px 10px 20px">
    <div style="width:275px; float:left">
                <div style="font-size:0px"><img src="free_facebook_template/free_facebook_template/html/images/left_top.png" alt="" /></div>
                <div style="background:url(free_facebook_template/free_facebook_template/html/images/left_bg.png) repeat-y left top">
                   <div style="padding:5px 0px 29px 11px"><div style="padding:0 7px 0 5px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#b4c0c3">
                        <h1><strong>Promoting YOUR Business</strong></h1>
                        <p><strong>WEBSITE MARKETING</strong><br />
                          Most business owners are aware you need a website, but what  they don&rsquo;t know is that website quickly becomes just a billboard on an empty  dirt road, if you don&rsquo;t continually market it and keep on the first page of  search engines. At DJM we pride  ourselves on simple, but effective promotion of your website so you get noticed  and retain current customers and attract new ones</p>
    </div>
                      <div style="padding:0px 7px 0 5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#b4c0c3">
                         <div style="padding-bottom:0px; font-family: 'Arial Black', Gadget, sans-serif; font-size: xx-small;">
                           <h1>Affordable Solutions&nbsp;&nbsp;&nbsp;&nbsp;</h1>
                            </div>
                         <p><img src="iStock_000003551840XSmall.jpg" alt="" width="96" height="73" align="left" style="padding-right:20px" /></p>
                        <p>At Desert Jewel Marketing we offer you affordable business  solutions to make your marketing dollars stretch and get you noticed by not  only new customers, but we help you retain your current ones.</p>
                        <ul>
                        <li>Custom Websites starting at $495</li>
                                  <li>Marketing your site and business starting at $250 </li>
                                  <li>Videos with distribution starting at $245</li>
                                  <li>Social Media Management starting at $250 month</li>
                                  <li>Email Marketing starting at&nbsp;  $350</li>
                              </ul>
                                <p>Today, communication is key.&nbsp;  We help you stay in contact with clients and customers so you and your  business comes to mind when they are shopping for what you have to offer.</p><div style="clear:both; font-size:0px; height:1px"><img src="free_facebook_template/free_facebook_template/html/images/spacer.gif" alt="" /></div>
                         
                      </div>
                   </div>
                </div>
                <div style="font-size:0px"></div>
            </div>
             <div style="width:200px; float: right">
                <div style="padding:24px 3px 3px 3px; font-size:22px; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif;"> <strong>Enter  to win a FREE video for your business!</strong></div>
    <div style="padding:0px 10px 0 3px">
                  <div style="padding:5px 0 5px 0" align="right">
                    <p><!-- AWeber Web Form Generator 3.0 -->
    <style type="text/css">
    #af-form-1073346283 .af-body .af-textWrap{width:98%;display:block;float:none;}
    #af-form-1073346283 .af-body .privacyPolicy{color:#FFFFFF;font-size:11px;font-family:Verdana, sans-serif;}
    #af-form-1073346283 .af-body a{color:#EDA200;text-decoration:underline;font-style:normal;font-weight:normal;}
    #af-form-1073346283 .af-body input.text, #af-form-1073346283 .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:12px;font-family:Verdana, sans-serif;}
    #af-form-1073346283 .af-body input.text:focus, #af-form-1073346283 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
    #af-form-1073346283 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:11px;font-family:Verdana, sans-serif;}
    #af-form-1073346283 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:repeat-x;background-position:inherit;background-image:url("http://forms.aweber.com/images/forms/download/peel/body.png");color:#FFFFFF;font-size:11px;font-family:Verdana, sans-serif;}
    #af-form-1073346283 .af-header{padding-bottom:9px;padding-top:32px;padding-right:10px;padding-left:99px;background-color:transparent;background-repeat:no-repeat;background-position:inherit;background-image:url("http://forms.aweber.com/images/forms/download/peel/header.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#7A570D;font-size:16px;font-family:Verdana, sans-serif;}
    #af-form-1073346283 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
    #af-form-1073346283 .af-quirksMode{padding-right:10px;padding-left:10px;}
    #af-form-1073346283 .af-standards .af-element{padding-right:10px;padding-left:10px;}
    #af-form-1073346283 .bodyText p{margin:1em 0;}
    #af-form-1073346283 .buttonContainer input.submit{background-image:url("http://forms.aweber.com/images/auto/gradient/button/07c.png");background-position:top left;background-repeat:repeat-x;background-color:#0057ac;border:1px solid #0057ac;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
    #af-form-1073346283 .buttonContainer input.submit{width:auto;}
    #af-form-1073346283 .buttonContainer{text-align:left;}
    #af-form-1073346283 body,#af-form-1073346283 dl,#af-form-1073346283 dt,#af-form-1073346283 dd,#af-form-1073346283 h1,#af-form-1073346283 h2,#af-form-1073346283 h3,#af-form-1073346283 h4,#af-form-1073346283 h5,#af-form-1073346283 h6,#af-form-1073346283 pre,#af-form-1073346283 code,#af-form-1073346283 fieldset,#af-form-1073346283 legend,#af-form-1073346283 blockquote,#af-form-1073346283 th,#af-form-1073346283 td{float:none;color:inherit;position:static;margin:0;padding:0;}
    #af-form-1073346283 button,#af-form-1073346283 input,#af-form-1073346283 submit,#af-form-1073346283 textarea,#af-form-1073346283 select,#af-form-1073346283 label,#af-form-1073346283 optgroup,#af-form-1073346283 option{float:none;position:static;margin:0;}
    #af-form-1073346283 div{margin:0;}
    #af-form-1073346283 fieldset{border:0;}
    #af-form-1073346283 form,#af-form-1073346283 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1073346283 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
    #af-form-1073346283 input,#af-form-1073346283 button,#af-form-1073346283 textarea,#af-form-1073346283 select{font-size:100%;}
    #af-form-1073346283 p{color:inherit;}
    #af-form-1073346283 select,#af-form-1073346283 label,#af-form-1073346283 optgroup,#af-form-1073346283 option{padding:0;}
    #af-form-1073346283 table{border-collapse:collapse;border-spacing:0;}
    #af-form-1073346283 ul,#af-form-1073346283 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
    #af-form-1073346283,#af-form-1073346283 .quirksMode{width:147px;}
    #af-form-1073346283.af-quirksMode{overflow-x:hidden;}
    #af-form-1073346283{background-color:transparent;border-color:transparent;border-width:1px;border-style:solid;}
    #af-form-1073346283{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-header{margin-bottom:0;margin-top:0;padding:10px;}
    .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://www.aweber.com/scripts/addlead.pl"  >
    <div style="display: none;">
    <input type="hidden" name="meta_web_form_id" value="1073346283" />
    <input type="hidden" name="meta_split_id" value="" />
    <input type="hidden" name="listname" value="fbdjm" />
    <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_62411454a6a5d67013c4c40647ac9da6" />

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

    <input type="hidden" name="meta_tooltip" value="" />
    </div>
    <div id="af-form-1073346283" class="af-form"><div id="af-header-1073346283" class="af-header"><div class="bodyText"><p>&nbsp;</p></div></div>
    <div id="af-body-1073346283" class="af-body af-standards">
    <div class="af-element">
    <label class="previewLabel" for="awf_field-11764734">Name: </label>
    <div class="af-textWrap">
    <input id="awf_field-11764734" type="text" name="name" class="text" value=""  tabindex="500" />
    </div>
    <div class="af-clear"></div></div>
    <div class="af-element">
    <label class="previewLabel" for="awf_field-11764735">Email: </label>
    <div class="af-textWrap"><input class="text" id="awf_field-11764735" type="text" name="email" value="" tabindex="501"  />
    </div><div class="af-clear"></div>
    </div>
    <div class="af-element buttonContainer">
    <input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
    <div class="af-clear"></div>
    </div>
    <div class="af-element privacyPolicy" style="text-align: center"><p><a title="Privacy Policy" href="http://www.aweber.com/permission.htm" target="_blank">We respect your email privacy</a></p>
    <div class="af-clear"></div>
    </div>
    </div>
    </div>
    <div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jAzszMwsbEwczA==" 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-1073346283")) {
                    document.getElementById("af-form-1073346283").className = 'af-form af-quirksMode';
                }
                if (document.getElementById("af-body-1073346283")) {
                    document.getElementById("af-body-1073346283").className = "af-body inline af-quirksMode";
                }
                if (document.getElementById("af-header-1073346283")) {
                    document.getElementById("af-header-1073346283").className = "af-header af-quirksMode";
                }
                if (document.getElementById("af-footer-1073346283")) {
                    document.getElementById("af-footer-1073346283").className = "af-footer af-quirksMode";
                }
            }
        })();
        -->
    </script>&nbsp;</p>
           <p><a href="#" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; text-decoration:none">Follow Me On Twitter</a>&nbsp;&nbsp;&nbsp;<img src="free_facebook_template/free_facebook_template/html/images/arrow_read.png" alt="" /></p></div>               
               </div>
                <div style="padding:0px 3px 5px 3px; font-size:25px; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif;"><strong>Contact Info</strong></div>
               <div style="font-size:0px; height:1px; background:#20405d"><img src="free_facebook_template/free_facebook_template/html/images/spacer.gif" alt="" /></div>
                <div style="padding:18px 10px 0 3px; font-family: Arial, Helvetica, sans-serif; color: #FC0; font-size: 12px;">
                   <div style="text-transform:uppercase; color:#FFFFFF"></div>
                   <a href="http://desertjewelmarketing.com">DesertJewelMarketing.com</a>
                 <div style="padding:1px 0 0px 0">
                   <p><a href="mailto:[email protected]">[email protected]</a></p>
                   <p><br>
                   208.512.0094 </p>
                    </div>
                   <div style="padding-top:0px">
    <table cellpadding="0" cellspacing="0" border="0">
                         <tr>
                            <td width="10">&nbsp;</td>
                            <td width="30"><a href="#"><img src="free_facebook_template/free_facebook_template/html/images/icon2.png" alt="" border="0" /></a></td>
                            <td width="32"><a href="#"><img src="free_facebook_template/free_facebook_template/html/images/icon3.png" alt="" border="0" /></a></td>
                         </tr>
                  </table>
                  </div>
                </div>
             </div>
             <div style="clear:both; font-size:0px; height:1px"><img src="free_facebook_template/free_facebook_template/html/images/spacer.gif" alt="" /></div>
         </div>
          <div style="font-size:0px; height:1px; background:url(free_facebook_template/free_facebook_template/html/images/footer_top.png) repeat-x left center"><img src="free_facebook_template/free_facebook_template/html/images/spacer.gif" alt="" /></div>
          <div class="copy" style="background:url(free_facebook_template/free_facebook_template/html/images/footer_bg.png) repeat left top; padding:9px 36px 8px 36px; font-family:'Times New Roman', Times, serif; font-size:14px; color:#627073"><span class="copy" style="background:url(free_facebook_template/free_facebook_template/html/images/footer_bg.png) repeat left top; padding:9px 36px 8px 36px; font-family:'Times New Roman', Times, serif; font-size:14px; color:#627073">Desert  Jewel Marketing &copy; All Rights reserved</span></div>            
       </div>   

If this is not working, then please follow the tutorial and modify the code.

Hope that help.

[Face]

thanks for the help NEO.I learn a lot from that link you gave me.I changed the size of that my code 760pix--->520pix.My boss is satisfy with that.Now only one thing that I have to do is to change the font color of the link.I feel that I am not good In FBML or HTML.Because I did all the things by using dreamviwer cs5.
Dreamviewer cam't change my link color.May be it doesn't support my code.I could change the e mail color.But I have to change the link color in to grey.

Code: Select all

<a href="http://desertjewelmarketing.com">DesertJewelMarketing.com</a>

Can you please help me to do it.