TUTORIALS

1)

To make buttons to put them in the page
www.makebutton.com
Then after you saved the icon on your computer
to upload it
imageshack

2)

All colors Codes #XXXXXX
Color codes

Dialog
CLICK MY DIALOG PLEASE. <script> function fbjs(context) { new Dialog(Dialog.DIALOG_CONTEXTUAL).setContext(context).showMessage('DIALOG', 'WRITE WHAT YOU WANT.'); return false; } </script> CLICK MY <a href="#" onclick="return fbjs(this);"> DIALOG </a> PLEASE.

Dialog2
CLICK HERE TITLE YOUR MESSAGE <CENTER> <CENTER><!-- FBML LINK --> <a href="#" clicktoshowdialog="dialog">CLICK HERE</a> <!-- END FBML DIALOG LINK --> <!-- FBML DIALO --> <fb:dialog id="dialog"> <fb:dialog-title>TITLE</fb:dialog-title> <fb:dialog-content> <fb:visible-to-connection> YOUR MESSAGE<fb:dialog-button type="submit" value=" Okay " close_dialog=true /> </fb:dialog-content> </fb:dialog> <!-- END FBML DIALOG --></CENTER> </CENTER>

3)

Code
<style> .slider { width: 480px; } .slider a.sliderNext, .slider a.sliderPrev { border: none; text-decoration: none; float: left; display: block; height: 25px; width: 14px; } .slider a.sliderNext { margin-top: 24px; margin-left: 5px; background: url(http://weavora.com/blog/fx-images/next.png) no-repeat 0 0; } .slider a.sliderPrev { margin-top: 25px; margin-right: 5px; background: url(http://weavora.com/blog/fx-images/prev.png) no-repeat 0 0; } .slider a.sliderNext.inactive { background: url(http://weavora.com/blog/fx-images/next_inactive.png) no-repeat 0 0; } .slider a.sliderPrev.inactive { background: url(http://weavora.com/blog/fx-images/prev_inactive.png) no-repeat 0 0; } .slider .clear { float: none; clear: both; } .slider .sliderImage { border: 2px solid #ccc; float: left; margin: 0 3px 0 3px; line-height: 0; } .slider .sliderImage:hover, .slider .sliderImageCurrent { border-color: #519dd0; } .slider .sliderImage img{ border: none; } .sliderWindow { overflow: hidden; width: 440px; float: left; } .slider .sliderImagesContainer { width: 10000px; } .bigImage { width: 480px; text-align: center; } </style> <div id="app" onclick="appObserver.init();" onkeypress="appObserver.init();" onmousedown="appObserver.init();"> <div id="bigImage_0" class="bigImage"><img src="http://weavora.com/blog/fx-images/400/400-0.jpg" /></div> <div id="bigImage_1" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-1.jpg" /></div> <div id="bigImage_2" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-2.jpg" /></div> <div id="bigImage_3" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-3.jpg" /></div> <div id="bigImage_4" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-4.jpg" /></div> <div id="bigImage_5" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-5.jpg" /></div> <div id="bigImage_6" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-6.jpg" /></div> <div id="bigImage_7" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-7.jpg" /></div> <div id="bigImage_8" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-8.jpg" /></div> <div id="bigImage_9" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-9.jpg" /></div> <div class="slider" id="slider"> <a href="#" class="sliderPrev inactive"></a> <div class="sliderWindow"> <div class="sliderImagesContainer"> <a href="#" class="sliderImage sliderImageCurrent"><img src="http://weavora.com/blog/fx-images/100/100-0.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-1.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-2.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-3.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-4.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-5.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-6.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-7.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-8.jpg" /></a> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-9.jpg" /></a> </div> </div> <a href="#" class="sliderNext"></a> <div class="clear"></div> </div> </div> <script> var appObserver = { isInited: false, init: function() { if (!appObserver.isInited) { (new fx(document.getElementById('accordion'))).accordion(); (new fx(document.getElementById('slider'))).slider( { onclick: function(next, prev) { (new fx(document.getElementById('bigImage_' + prev))).fadeIn( function() { // document.getElementById('bigImage_' + next).setStyle('display','block'); (new fx(document.getElementById('bigImage_' + next))).fadeOut(); } ) } } ); appObserver.isInited = true; } } }; </script> <script> var utils = { hasClass: function(element, className) { return element.getClassName().match(new RegExp('(\\s|^)'+className+'(\\s|$)')); }, addClass: function(element, className) { if (!utils.hasClass(element,className)) element.setClassName(element.getClassName() + " " + className); }, removeClass: function(element, className) { if (utils.hasClass(element,className)) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); element.setClassName(element.getClassName().replace(reg,' ')); } }, findByClass: function(className, rootElement) { var root = rootElement || document.getRootElement(); var elements = []; var child = root.getChildNodes(); for(var i = 0; i < child.length; i++) { if (utils.hasClass(child[i], className)) { elements.push(child[i]); } else { elements = elements.concat(utils.findByClass(className, child[i])); } } return elements; } }; function fx(element) { // make this instance visible in private functions var self = this; this.element = element; // set default slide direction this.direction = fx.VERTICAL; /** * Slide down * * @param duration integer slide down duration * @param callback function callback for slide down ending * @return fx */ this.slideDown = function(duration, callback) { slide('down', duration, callback); return this; }; /** * Slide up * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.slideUp = function(duration, callback) { slide('up', duration, callback); return this; }; /** * Slide toggle * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.slideToggle = function(duration, callback) { if (this.element.getStyle('display') == 'none' || this.element.getClientHeight() == 0 || this.element.getClientWidth() == 0) return this.slideDown(duration, callback); else return this.slideUp(duration, callback); }; /** * Fade in * * @param duration integer slide down duration * @param callback function callback for slide down ending * @return fx */ this.fadeIn = function(duration, callback) { fade('in', duration, callback); return this; }; /** * Fade out * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.fadeOut = function(duration, callback) { fade('out', duration, callback); return this; }; /** * Fade toggle * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.fadeToggle = function(duration, callback) { if (this.element.getStyle('display') == 'none' || this.element.getClientHeight() == 0 || this.element.getClientWidth() == 0) return this.fadeOut(duration, callback); else return this.fadeIn(duration, callback); }; /** * Set slide direction * * @param direction fx.HORIZONTAL, fx.VERTICAL or fx.DIAGONAL * @return fx */ this.direction = function(direction) { if (direction == fx.HORIZONTAL || direction == fx.VERTICAL || direction == fx.DIAGONAL) this.direction = direction; return this; }; this.accordion = function(params) { // extend default options var options = { header: 'header', section: 'section', expanded: 'expanded' }; if (params) for(var key in params) options[key] = params[key]; // find all headers and section var headers = utils.findByClass(options.header, this.element); var sections = utils.findByClass(options.section, this.element); // now we should walk through header and bind click action to them var index = 0; for(var i = 0; i < headers.length; i++) { headers[i].addEventListener('click', function(event){ var targetSection = event.target.getTabIndex(); // hide open section for(var index = 0; index < sections.length; index++) { if (index != targetSection) { (new fx(sections[index])).slideUp(); utils.removeClass(headers[index], options.expanded); } } // open target section (new fx(sections[targetSection])).slideToggle(function(a, b){ if (!utils.hasClass(headers[targetSection], options.expanded)) utils.addClass(headers[targetSection], options.expanded); else utils.removeClass(headers[targetSection], options.expanded); }); }); headers[i].setTabIndex(i); sections[i].setTabIndex(i); } }; this.slider = function(params) { // extend default options var options = { prev: 'sliderPrev', next: 'sliderNext', image: 'sliderImage', imageContainer: 'sliderImagesContainer', imageCurrent: 'sliderImageCurrent', inactive: 'inactive', imageLeftMargin: 6, onclick: null }; if (params) for(var key in params) options[key] = params[key]; var imageContainer = utils.findByClass(options.imageContainer, this.element)[0]; // find all images var images = utils.findByClass(options.image, imageContainer); // set up default position var currentPosition = 0; // calculate positions' offsets var positionOffsets = []; for(var position = 0; position < images.length; position++) { if (position == 0) { positionOffsets[position] = 0; } else { positionOffsets[position] = positionOffsets[position - 1]; positionOffsets[position] -= images[position].getOffsetWidth(); positionOffsets[position] -= options.imageLeftMargin; } } // find next and prev buttons var next = utils.findByClass(options.next, this.element); var prev = utils.findByClass(options.prev, this.element); // bind next navigation if (next.length) { next[0].addEventListener('click', function(event){ if (currentPosition < images.length - 4) { currentPosition++; (new fx(imageContainer)).move(positionOffsets[currentPosition]); } if (currentPosition == 0) { utils.addClass(prev[0], options.inactive); } else { utils.removeClass(prev[0], options.inactive); } if (currentPosition >= images.length - 4) { utils.addClass(next[0], options.inactive); } else { utils.removeClass(next[0], options.inactive); } }); } // bind previous navigation if (prev.length) { prev[0].addEventListener('click', function(event){ if (currentPosition > 0) { currentPosition--; (new fx(imageContainer)).move(positionOffsets[currentPosition]); } if (currentPosition == 0) { utils.addClass(prev[0], options.inactive); } else { utils.removeClass(prev[0], options.inactive); } if (currentPosition >= images.length - 4) { utils.addClass(next[0], options.inactive); } else { utils.removeClass(next[0], options.inactive); } }); } // bind item onclick callback for(var i = 0; i < images.length; i++) { images[i].setTabIndex(i).addEventListener('click', function(event){ var currentImage = utils.findByClass(options.imageCurrent, self.element)[0]; utils.removeClass(currentImage, options.imageCurrent); var target = (utils.removeClass(event.target, options.image)) ? event.target : event.target.getParentNode(); utils.addClass(target, options.imageCurrent); if (options.onclick) options.onclick.apply(target, [target.getTabIndex(), currentImage.getTabIndex()]); }); } }; this.move = function(step, duration, callback) { if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); animationObject.duration(duration); animationObject.to('marginLeft', step); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.ease().blind().go(); }; /** * Slide animation * * @private * * @param type could by up or down * @param duration integer slide up duration * @param callback function callback for slide up ending * */ function slide(type, duration, callback) { // check duration and callback if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); // first of all we need to show or hide element if (type == 'down') animationObject.show(); else animationObject.hide(); // set slide direction if (self.direction == fx.DIAGONAL) animationObject .to('width', (type == 'down') ? 'auto': 0) .to('height', (type == 'down') ? 'auto': 0); else if (self.direction == fx.HORIZONTAL) animationObject .to('width', (type == 'down') ? 'auto': 0); else animationObject .to('height', (type == 'down') ? 'auto': 0); if (type == 'down') { if (self.direction == fx.DIAGONAL) animationObject .from('width', 0) .from('height', 0); else if (self.direction == fx.HORIZONTAL) animationObject .from('width', 0); else animationObject .from('height', 0); } animationObject.duration(duration); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.blind().go(); } /** * Fade animation * * @private * * @param type could by in or out * @param duration integer slide up duration * @param callback function callback for slide up ending * */ function fade(type, duration, callback) { // check duration and callback if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); // first of all we need to show or hide element // and set initial opacity if (type == 'out') { animationObject.show().from('opacity', 0); } else { animationObject.hide().from('opacity', 1); } // set fade animation animationObject .to('opacity', (type == 'out') ? 1 : 0); animationObject.duration(duration); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.blind().go(); } this._debug = function(msg) { (new Dialog()).showMessage('Debug', msg, 'Close'); } }; // duration constants fx.SLOW = 800; fx.NORMAL = 500; // default fx.FAST = 200; // direction constants fx.HORIZONTAL = 'horizontal'; fx.VERTICAL = 'vertical'; // default fx.DIAGONAL = 'diagonal'; </script> <br> <!-- This code from http://www.facebook.com/bizimarsiv.demo?sk=app_11007063052-->

4)Customized Share button

<center><style> .ff3.mac .uiButtonMedium { padding-bottom:1px; }https://www.facebook.com/staticfbml/edit.php?owner_id=132474910154831&app_id=6009294086 a.uiButtonMedium { } .uiButton, .uiButtonSuppressed:active, .uiButtonSuppressed:focus, .uiButtonSuppressed:hover { -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0); display:block; float:middle; width:130px; height:3px; padding:42px 0 0 0; margin:0; border:none; background:url(http://img836.imageshack.us/img836/5444/1300615951facebookbutto.png); background-repeat: no-repeat; overflow:hidden; } </style> <fb:share-button class="meta" type="icon_link"> <meta name="medium" content="blog"/> <meta name="title" content="Post to your Wall" /> <meta name="description" content="Some share copy goes here." /> <link rel="image_src" href="http://img836.imageshack.us/img836/5444/1300615951facebookbutto.png" /> <link rel="target_url" href="http://www.facebook.com/" /> </fb:share-button></center>

5)Icons you can find more atwww.iconfinder.com
Code
<a href="http://www.youtube.com/"> <img src="http://img340.imageshack.us/img340/5654/youtubefj.png" /></a> <a href="http://twitter.com/"> <img src="http://img858.imageshack.us/img858/6369/twitterh.png" width="55" height="55" target="_blank" /></a> <a href="http://www.linkedin.com/"> <img src="http://img863.imageshack.us/img863/3427/linkedin.png" width="55" height="55" target="_blank" /></a> <a href="URL"> <img src="http://img846.imageshack.us/img846/708/feed.png" width="55" height="55" target="_blank" /></a> <a href="http://www.google.com/"> <img src="http://img863.imageshack.us/img863/2624/googlei.png" width="55" height="55" target="_blank" /></a> <a href="http://www.facebook.com/"> <img src="http://img850.imageshack.us/img850/1394/facebookyt.png" width="55" height="55" target="_blank" /></a> <a href="URL"> <img src="http://img846.imageshack.us/img846/9740/blogger.png" width="55" height="55" target="_blank" /></a>