Today we will explore how to install Facebook Connect Commenters with Movable Type 4.25 and the Mid Century Template Set, and actually get it to work. You can add Facebook Connect to any Movable Type blog, allowing Facebook users to sign in, comment, and share their actions. Facebook Connect, will automatically display a Facebook commenters name and photo next to their comment while allowing them to easily sign in to comment. The first step is to get and install the latest version of the facebook connect commenters plug in. (note: if you haven't upgraded Movable type to 4.25 I highly suggest going ahead and upgrading MT as you normally would with the community version that is now availabe at http://www.movabletype.com/download/ and grab the blogger version.)

After the plug in has bee installed you need to navigate to your mt blogs preferences Registration page, check Facebook as a registration method and click setup. This will take you to your mt blogs plugin page where you need to select the facebook connect commenters plugin settings area and "edit facebook app". This will take you to Facebook where you can sign in and create your app to communicate with Facebook Connect.

Creating the app is very simple. First under the basic tab give your app a name and email click save and than click the connect menu tab on the left side of the page. Once in the connect area you will need to enter the website url of your blog in the Connect URL box. You can also include a logo if you like in this same area.

Once complete save your changes and take note of your Api key and Secret as they will be entered into the Movable Type Facebook Connect Commenters plugin area. The next step is to do just that by entering your Facebook Api key and secret number into the Facebook Connect Commenter settings area and click save. At this point your facebook app is all set up and ready to go.

Now we need to make some template changes. The MT Facebook Connect Commenters plugin comes with a template example that does work but it really depends on your current blogs setup. The templates I will be discussing are for the Mid-century template set but can be adapted for other styles as well. Just be sure to compare templates carefully and make frequent backups. (note: If you haven't checked out the mid century template set your missing out on some really great movable type features.)

The first template change is to simply add <$MTGreetFacebookCommenters$> to your html head template so that is included in your pages. This will call all of the necessary code to allow facebook connect users to sign in, pull userpic photos and names.

The next template change is a 2 part step and is very important for enabling the facebook commenters userpic to be included. First go to your main entry template and remove onload="mtEntryOnLoad();" from the body tag as it will conflict with the facebook connect onload tag that is being used. Save your changes and next navigate go to your Comments template module and add this code in script tags.

mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);

Without this step you will not be able to pull facebook userpic photos and will instead just get the facebook default user pic which look like a question mark.You can add the code just above your form or at the very bottom. As long as it is not included in the body tag itself but rather inside the body it will not conflict with facebook connects onload action. View my comments template

For our final step we will need to edit the mid century Individual Comments template to include the code for facebook connect commenter userpic photo, link and name. There are a few ways of doing this depending on your blogs setup but in this case we do not need to edit our Userpic module as all the necessary code will be included here. View my Individual Comments Template

Great job, all that's left to do is publish your blog to view your changes. To see the plug-in in action you can sign in with facebook connect and post a comment.

• Comments template
• Individual Comments template
• Userpic template

I have always thought that imagemenu sliding effect is really cool and that it would be nice if it worked with jQuery. Introducing a Mootools image menu ported to Jquery. If you have ever seen the image menu javascript for mootools by phatfusion and liked what you saw well here is a Sliding Image Menu alternative I've come up with using the power of jquery javascript.

Functionality Checklist for our Sliding Image Menu for Jquery.

Here is what we need our Jquery horizontal sliding image menu to do:

1. Jquery compatible script.
2. Mootools like sliding effect.
3. Valid XHTML degrades well.
4. Lightweight customizable script.

Let's take a look at the XHTML, CSS, and JavaScript that makes it all work.

Jquery Image Menu Version 1, View Demo, Download Source.

Here is the HTML for just the jquery Image Menu itself:

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>
    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="#">Urban</a></li>
  </ul>
</div>

Here is The CSS

.jimgMenu {
	position: relative;
	width: 670px;
	height: 200px;
	overflow: hidden;
	margin: 25px 0px 0px;
}

.jimgMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 200px;
	width: 1340px;
	
	}

.jimgMenu ul li {
	float: left;
}

.jimgMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:78px;
	height: 200px;
}

.jimgMenu ul li.landscapes a {
	background: url(images/landscapes.jpg) repeat scroll 0%;
}

.jimgMenu ul li.people a {
	background: url(images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li.nature a {
	background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
	background: url(images/abstract.jpg) repeat scroll 0%;
}

.jimgMenu ul li.urban a {
	background: url(images/urban.jpg) repeat scroll 0%;
	min-width:310px;
	
}

The JavaScript

In the header section of your HTML file, you'll need to include jQuery and all the plug in files listed. The bare minimum setup look like this:

Finally include the jquery in your page or in an attached file.

This will activate our image menu, just remember we have css controlling most of the image menus style. You can customize the easing type and duration with the jquery easing plugin that we are using to achieve different slide effects.

Jquery Image Menu Version 2, View Demo, Download Source.

For this second version I have used kwicks to help with the ImageMenu animation. The advantage to using kwicks with our sliding image menu is the additional functionality that it brings in the form of sticky menu items which will stay open and custom events such as on click actions instead of hover.

The HTML remains the same for this version of jquery Image Menu except for the use of id instead of class.

<div class="jimgMenu">
  <ul>
    <li id="landscapes"><a href="#">Landscapes</a></li>
    <li id="people"><a href="#">People</a></li>
    <li id="nature"><a href="#">Nature</a></li>
    <li id="abstract"><a href="#">Abstract</a></li>
    <li id="urban"><a href="#">Urban</a></li>
  </ul>
</div>

The CSS is adapted slightly for kwicks

.jimgMenu {
	position:relative;
	margin: 0px 0px 0px 50px;
	padding: 0px;
	width:475px;
	height:200px;
	overflow: hidden;
}
.jimgMenu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: block;
	height: 200px;
	position: relative;
	}	
.jimgMenu ul li {
	width: 95px;
	float: left;
	display: block;
	overflow: hidden;
}
.jimgMenu ul li a {
	text-indent: -1000px;
	background:#fff repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow: hidden;
	height: 200px;
}
.jimgMenu ul li#landscapes a {
	background: url(images/landscapes.jpg) repeat scroll 0%; 
}
.jimgMenu ul li#people a {
	background: url(images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li#nature a {
	background: url(images/nature.jpg) repeat scroll 0%; 
}
.jimgMenu ul li#abstract a {
	background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
	background: url(images/urban.jpg) repeat scroll 0%;
	border-right-style: none;
}

The JavaScript

In the header section of your HTML, you will need to include jQuery and all the files below. The bare minimum setup will look like this:

This will activate our jQuery Sliding Image Menu plug-in. The last step is to include the script in our page by placing this script in your html head or document body.

Enjoy an Image Menu sliding effect for Jquery.

This script will allow you to simply drop image folders in a gallery directory to create new galleries. Folder Gallery boasts the ability to, define the amount of images per page, define thumbnail sizes, embed video files by simply dropping them in the folder, and customize the look by using standard css. You can also check out Quick Gallery for simplified use.

FREE Flash Gallery
Flash Image Gallery
A Free flash image gallery that allows you to create a slideshow on your website from a folder of images. Easy installation, automatic slide show generation, customizable design and other cool features like support for a Flickr photostream.

Ajax slide-show
Although this album is not generated online, the images and picture info is read from an xml file, while the photo thumbnails are auto generated from your image folder using Photoshop actions that are included in the source. All thats left for you to do once it's done is upload it to your server.

This photo gallery is an ajax based image gallery where you can drag the photo using your mouse, or simply click anywhere in the stack to quickly jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation! View the fullscreen example.

Auto Flash Gallery. Although this is a paid gallery it is still note worthy.

This is one of the easiest flash image galleries available. Simply upload your full size images to a folder and they will appear in the gallery.

Photo Image Gallery Folder
A simple PHP script for automatically creating a picture gallery from a folder of images. This photo album will automatically list all the images in your directory, and on the fly creates thumbnails and displays them into a simple table. Just put your images in a folder and you are good to go.

Flash MP3 Player is a Free application that allows you to play music on your website. Includes easy installation and automatic playlist generation from a folder of music.

Image slideshow from a single directory using jQuery. Script for automatically creating a picture image gallery from a folder. Just upload Photo Gallery Script to a directory with pictures. View Demo:

Simple and FREE, where you can create an Image Gallery from a folder of pictures.
PHP to create an image gallery from a folder. Download

Step one includes creating your slide show flash gallery as usual. There are many ways of doing this and any flash image gallery can be used with Movable Type. After creating your flash image gallery, upload your flash gallery folder and all its files to your Movable Type output directory via ftp. Preferably not into your main MT static directory.

Step two involves creating a Movable Type blog entry as you normally would and embedding your flash gallery or swf file. It is easiest to use absolute url paths for the flash image gallery files that you want to add to your movable type entry. We are also going to add the transparent parameter so that the flash gallery will blend seamlessly into your Movable type blog.

<embed 
  src="http:www.example.com/blog/gallery/player.swf" 
  width="420"
  height="300"
  allowscriptaccess="sameDomain"
  allowfullscreen="true"
  wmode="transparent"
  base="." 
/>

Is there a way to have a flash movie play below another layer like an html text heading or div tag?

Answer: Yes, this is actually fairly simple but is a several part process depending on how may different items you would like to position above the flash element.

1. First you must add the wmode parameter transparent to the flash object that is going to be embedded.

Like so...  <param name="wmode" value="transparent" />

(note:) If you are using the swfobject.js method to embed your flash files (recommended) you can add the transparent parameter by simply using the example below to append to your current setup:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "movie", "700", "300", "#ffffff");
   so.addParam("wmode", "transparent");
   so.write("flashcontent");
</script>

2. Now we need to wrap our flash movie in its own div tag and and apply some css so that we can set the position to be below the header text and description div.
(See example below for xhtml and css code.)

<div id="header">

<div id="flash">flash file goes here.</div>

</div> 

And the accompanying css for the above is:
(note the z-index and absolute position for #flash div)

#flash {
    width: 700px;
    height: 300px;
    position: absolute;
    z-index: 0;
}

#header {
    height: 300px;
    margin-bottom: 30px;
    text-align: left;
}

3. Ok, now lets go ahead and set up the html layers that will be displayed displayed above our flash content. In this case it will be an h1 header and a description that is in its own div that is above the flash media.

(Two items to be positioned over the flash movie)

The h1 css is: (note: feel free to style it however you want or use a different tag, the important thing is the z-index and absolute position.

h1 {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #666666;
    font-weight: bold;
    position: absolute;
    z-index: 1;
}

 
Now for the description css which is going to be in its own div tag containing text and will be positioned above the flash element as well: (note the z-index and the absolute position again)

.description {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    margin-left: 15px;
    margin-top: 35px;
    padding: 5px;
    font-weight: bold;
    line-height: 14px;
    position: absolute;
    z-index: 1;
}

4. Thats it, the finished code in the body of a web page will look like this:
(note: Code is placed in the header div which has no z-index or absolute position necessary)

<div id="header">

<div id="flash">flash file goes here.</div>

<h1>Heading Text</h1>
<div class="description">Your description text</div>

</div>

And the final accompanying CSS is:

h1 {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #666666;
    font-weight: bold;
    position: absolute;
    z-index: 1;
}

.description {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    margin-left: 15px;
    margin-top: 35px;
    padding: 5px;
    font-weight: bold;
    line-height: 14px;
    position: absolute;
    z-index: 1;
}

#flash {
    width: 700px;
    height: 300px;
    position: absolute;
    z-index: 0;
}

#header {
    height: 300px;
    margin-bottom: 30px;
    text-align: left;
}


HTML Layers and Flash Position Summary:

How to layer a Flash movie below another html div tag or layer.

To position a flash movie under another html element basically you just need to give the flash move a parameter of wmode transparent and position it absolutely with a z-index of 0. Do this by putting the flash object in its own div and using css. (see examples above)

For the items that you would like positioned above the flash movie set their z-index to 1 and position them absolutely as well. After that it's just a matter of putting it all in the div or container that you would like applying the css and adjusting the margin and padding to your specific needs.  

What is PHP based web site form mail? PHP Mail is a communication tool used by Yahoo Hosting that allows you to send email from a form on your website through a PHP script. A site visitor will fill out your email form, click send and then you recieve the message in your email. PHP Mail is available as part of all Yahoo Web Hosting plans.

PHP (Hypertext Preprocessor) is a widely used, general purpose scripting code  language that is especially great for web development design due to the fact that it can be easily embedded into an XHTML document to create dynamic web pages and web mail forms.

Yahoo PHP Web Form Mail 

Web site php form email for Yahoo hosted websites. The Yahoo PHP Web Mail Form will use the Post method for the action of the form. To find out the unique required post field url that you need to input in order to make your Yahoo website form mail work properly, simply follow these simple steps below.

Setup Yahoo PHP Form Email On Your Website:

1. Login to your Yahoo Hosting or Small Business account.

2. Select your "Web Hosting Control Panel." Now select the "Create and Update" tab then scroll down and find "Add-Ons."

3.Now click on "Email Forms." Here you will find Yahoo PHP website email form examples, as well as the necessary code for your own forms Post field action.

4.You can use the form examples found here, or if you have your own website email form already, simply copy and paste the provided form post action code into your Yahoo hosted website form. The Yahoo hosted PHP form mail will be sent to the alternate email address you have listed in your Yahoo account information area.

Yahoo PHP Email Form Actions.

Form Subject:
<input type="hidden" name="subject" value="Your Custom Subject">

Required Fields:
<input type="hidden" name="required_fields" value="Name,URL,Email">

Redirect URL:
<input type="hidden" name="next_url" value="http://yourwebsite.com/">

To see the Yahoo PHP website email form in action, visit Website Design Maui.