You are on page 1of 10

To check fanpage user : Like

<style type="text/css">

#wrapper {

width:520px;

margin:0 auto; border:0; padding:0;

position:relative;

#non-fans {

width:520px;

position:absolute; top:0; left:0;

</style>

<div id="wrapper">

<fb:visible-to-connection>

U like the fanpage

<img src=http://sphotos.ak.fbcdn.net/hphotos-ak-
snc4/hs831.snc4/69188_1530385472332_1615599416_1247439_6051860_n.jpg />

<fb:else><div id="non-fans"><img src=http://sphotos.ak.fbcdn.net/hphotos-ak-


snc4/hs094.snc4/36053_1528930875968_1615599416_1244715_6342186_n.jpg' /></div></fb:else>

</fb:visible-to-connection>

</div>

=====================================================================================
==========
//Comment Box in fbml

<fb:comments xid="119991964695513" canpost="true" candelete="false"


returnurl="http://www.facebook.com/pages/MyFanPage/119991964695513">

<fb:title>Talk about Your Page</fb:title>

</fb:comments>

=====================================================================================
=========

// To add flash image on static fbml

<fb:swf

swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"

swfsrc='http://www.socialkonnekt.com/newyearwishing/images/social_happynewyear_for_fb.swf?
autoPlay=true'

imgsrc='http://www.socialkonnekt.com/images/videocon_logo_06_03_2010_19_29_03.jpg' width='480'
height='360'

flashvars="rssFeed=http%3A%2F%2Ffeed567.photobucket.com%2Falbums%2Fss117

%2Fhyperarts%2FGreenland%25202007%2Ffeed.rss"

/>

//image slide show in fbml

<style>

#slideshow_wrapper {

width:530px;
clear: both;

margin-bottom: 20px;

#slideshow {

overflow: hidden;

width: 150px;

float: left;

position:relative;

margin-right: 5px;

#slideshow_inner {

position: relative;

width: 1250px;

#slideshow_inner a {

opacity:0.7;

margin: 0 7px;

#slideshow_inner a:hover {

opacity: 1;

}
=====================================================================================
==========================

/* right and left arrows */

.navarrows {

padding-top: 25px;

float: left;

display: block;

width: 32px;

padding-top: 35px;

cursor: pointer;

</style>

<script>

// set some slider vars

var numslides = 7;

var slidesvisible = 1;

var currentslide = 0;

var slidewidth = 147;

function goright() {

if (currentslide <= (numslides-slidesvisible-1)) {

Animation(document.getElementById('slideshow_inner')).by('right',
slidewidth+'px').by('left', '-'+slidewidth+'px').go();

if (currentslide == (numslides-slidesvisible-1)) {

Animation(document.getElementById('right_button')).to('opacity', '0.3').go();
Animation(document.getElementById('left_button')).to('opacity', '1').go();

if (currentslide < (numslides-slidesvisible-1))


{ Animation(document.getElementById('left_button')).to('opacity', '1').go(); }

currentslide++;

function goleft() {

if (currentslide > 0) {

Animation(document.getElementById('slideshow_inner')).by('left',
slidewidth+'px').by('right', '-'+slidewidth+'px').go();

if (currentslide == 1) {

Animation(document.getElementById('left_button')).to('opacity', '0.3').go();

Animation(document.getElementById('right_button')).to('opacity', '1').go();

if (currentslide > 1) { Animation(document.getElementById('right_button')).to('opacity',


'1').go(); }

currentslide--;

</script>

<div id="slideshow_wrapper">

<img id="left_button" class="navarrows" src="http://www.snipeapps.com/images/arrow-sketch-


left.png" onclick="goleft(); return false;" style="opacity: 0.3;" />

<div id="slideshow">
<div id="slideshow_inner">

<a id="slide1" href="http://www.snipe.net" title="Snipe.Net"><img


src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a>

<a id="slide2" href="http://www.spiffydns.net" title="SpiffyDNS"><img


src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg" /></a>

<a id="slide3" href="http://fbmhell.com" title="FBMHell"><img


src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg" /></a>

<a id="slide4" href="http://www.crankyhaiku.com" title="Cranky Haiku"><img


src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a>

<a id="slide5" href="http://www.geekhaiku.com" title="Geek Haiku"><img


src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg" /></a>

<a id="slide6" href="http://socialmediadouchebag.net" title="Social Media


Douchebag"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg" /></a>

<a id="slide7" href="http://tehawesome.net" title="Teh Awesome"><img


src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a>

</div>

</div>

<img id="right_button" class="navarrows" src="http://www.snipeapps.com/images/arrow-sketch-


right.png" onclick="goright(); return false;" />

</div>

<br style="clear: both;" />

<div>

Link: http://fbmhell.com/2010/08/facebook-fbjs-fbml-image-carousel/

Form validation

<div id="body">
<form action="http://mahdiyah.co.cc/mailform.php" id="ContactForm"
name="ContactForm" class="form" method="post">
<div class="container">
<span id="errmsg" class="invalid"
style="display:none;">&nbsp;</span> <br />
<div class="field">
<label>Name:</label>
<input type="text" tabindex="1" value="" name="name" id="name"
onfocus="removdiv();"/> <br />
</div>
<div class="field">
<label>Email:</label>
<input type="text" tabindex="2" value="" name="email"
id="email" onfocus="removdiv();" /> <br />
</div>
<div class="field">
<label>Message:</label>
<textarea tabindex="3" cols="10" rows="10" name="message"
id="message" onfocus="removdiv();" /> <br /> <br />
</div>
<input type="button" onclick="return
checkForm('ContactForm');" id="sb" value="Send Message" class="submitbtn" />
<input type="hidden" value="0" name="send" id="send"
style="display: none;"/>
<input type="hidden" value="contactus" name="origin"
id="origin" style="display: none;"/>
 
</div>
</form>
 
<input type="button" value="Show" class="thickbox" title="Thanks!"
alt="#TB_inline?height=50&amp;width=350&amp;inlineId=messageDiv"
style="display: none;" id="messageShow"/>
</div>

Ajax Code

<script>
<!--
var name = document.getElementById('name');
var email = document.getElementById('email');
var msg = document.getElementById('message');
var err = document.getElementById("errmsg");
var sb = document.getElementById("sb");
 
function checkForm(form) {
 
if (name.getValue() == "" || email.getValue() == "" || msg.getValue() ==
""){
err.setStyle('display', 'block');
err.setTextValue("Field cannot be empty!");
return false;
}
else if (!checkValidity(email.getValue())) {
err.setStyle('display', 'block');
err.setTextValue("Please enter a valid email address!");
return false;
}
else {
err.setStyle('display', 'none');
err.setTextValue("");
return submitAJAXForm(sb); // function that submits the form
}
}
 
 
function submitAJAXForm(sub)
{
sub.setDisabled(true);
sub.setValue(".. Sending ..");
 
 
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
 
ajax.ondone = function(data)
{
sub.setDisabled(false);
sub.setValue("Send Message");
name.setValue("");
 
email.setValue("");
 
msg.setValue("");
 
var msgdialog = new Dialog();
msgdialog.showMessage('Confirmation', 'Your message has been
submitted successfully.');
return false;
 
}
 
ajax.onerror = function() {
var msgdialog = new Dialog();
msgdialog.showMessage('Error', 'An error has occurred while trying
to submit.');
return false;
}
 
// collect field values
var queryParams = {
'name' : document.getElementById('name').getValue(),
'email' : document.getElementById('email').getValue(),
'message' : document.getElementById('message').getValue(),
'send' : document.getElementById('send').getValue(),
'origin' : document.getElementById('origin').getValue()
};
ajax.post('http://mahdiyah.co.cc/mailform.php', queryParams);
return false;
}
 
function checkValidity(e) {
 
var email;
email = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]
{2,3})$/;
return e.match(email);
}
 
function removdiv() {
err.setStyle('display', 'none');
err.setTextValue("");
}
 
//--></script>

http://erratwork.tk/2010/09/staticfbml-contact-form-with-validation-for-
facebook-fanpage/

You might also like