Programmer's Secret Ladder

10 Tips To Optimize Your WordPress Theme

2012-01-13T02:06:00.000-08:00

The beauty of WordPress is in how easy it is to adapt for different tasks. One can extend it with just a couple of lines of code. In this post, we’ll review 10 shortcode snippets that will tweak and optimize your WordPress theme. You can add all of these code snippets to the functions.php file in your WordPress theme.

Limit The Excerpt’s Word Count

One thing that can go wrong in WordPress magazine themes is when users include too many words before the more tag. Sure, they could handcraft the excerpt in the dedicated field, but on a website that has hundreds of posts and on which the text above the more tag has always been used as the excerpt, going back to create excerpts for all of those posts by hand would be cumbersome. In this case, we can limit the number of words shown in the excerpt by using this code:

add_filter('excerpt_length', 'ilc_excerpt_length');

function ilc_excerpt_length( $length ){

    return 10;

}

Here, we’re using a WordPress filter hook, which is a function that parses and (usually) modifies data before it gets stored in the database or displayed on a page. In this case, we’re setting the number of words shown in the excerpt to 10.

Add A Favicon Using A WordPress Hook

Hooks allow us to insert custom code without touching the template. This gives us a lot of flexibility, because now, whenever we need to change something, we only have to change the function that’s plugged into a certain hook. For example, you can add a favicon to your website without touching the header.php file, just by plugging a function into the wp_head hook:

add_action( 'wp_head', 'ilc_favicon');

function ilc_favicon(){

    echo "<link rel='shortcut icon' href='" . get_stylesheet_directory_uri() . "/favicon.ico' />" . "\n";

}

The favicon.ico file should be located at the root of your theme. We’re now using an action hook, which is a function that is triggered at specific points during an execution by WordPress’ core. In this case, the hook triggers any function that’s attached to it when a page is launched in the browser. But other hooks can be triggered when saving a post, registering a user and so on. Some themes even have their own action hooks, which, like WordPress’ core action hooks, can be used to launch functions at specific points of an execution.

Detect Safari On iOS

Nowadays, websites serve mobile versions using different techniques. WordPress offers a safe way to check for the mobile Safari browser so that you know when a visitor is using an iPhone or iPad.
WordPress sets the $is_phone variable internally, and you can use it to embed an alternative style sheet, show alternative content or display a different video format. In the following example, the $is_iphone variable is run, and different style sheets are applied depending on the value returned:

add_action('wp_print_styles', 'ilc_enqueue_styles');

function ilc_enqueue_styles(){

    global $is_iphone;

    if( $is_iphone ){

        wp_enqueue_style('iphone-css', get_stylesheet_directory_uri() . '/iphone.css' );

    }

    else{

        wp_enqueue_style('common-css', get_stylesheet_directory_uri() . '/common.css' );

    }

}

In this case, we’re using the standard WordPress function wp_enqueue_style⁶ to add styles to the head element of the Web page. The action that we’re attaching our function to is wp_print_styles; so, we’re basically telling WordPress to output the relevant style sheet when it prints all of the other required style sheets.

Remove Elements From The Header

WordPress outputs several things in the head section. In particular, the generator meta tag, the RSD link and the wlwmanifest link won’t be of much use to many users:

<meta name="generator" content="WordPress 3.2.1">

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd">

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml">

Some bloggers say you should get rid of the generator meta tag so that no one can tell which version of WordPress you’re using. But remember, you should always be using the latest version anyway.
If you don’t need XML-RPC functionality, you can remove the RSD link (the second line in the snippet above). The same goes for if you don’t use Windows Live Writer: you can safely remove the third element.
In this case, you can add this code:

add_filter('the_generator', create_function('', 'return "";'));

remove_action('wp_head', 'rsd_link');

remove_action('wp_head', 'wlwmanifest_link');

These lines will remove the corresponding elements in the snippet above.

Redirect WordPress Feeds To FeedBurner

It’s great that WordPress offers feeds out of the box. But if you want statistics about your subscribers, you’ll have to use FeedBurner or a similar service. To redirect your feed to one of these, use the following snippet. Thus, if you try to go to http://www.smashingmagazine.com/feed⁷, you’ll be redirected to FeedBurner’s feeds for Smashing Magazine⁸.

add_action('template_redirect', 'ilc_rss_redirect');

function ilc_rss_redirect() {

    if ( is_feed() && !preg_match('/feedburner|feedvalidator/i', $_SERVER['HTTP_USER_AGENT'])){

        header('Location: http://feeds.feedburner.com/smashingmagazine');

        header('HTTP/1.1 302 Temporary Redirect');

    }

}

Replace http://feeds.feedburner.com/smashingmagazine with the URL for your own feed from FeedBurner.

Show Featured Images In Feed

To encourage subscribers to visit your website, rather than letting them just consume content through your RSS feed, you might want to display only the excerpt and featured image of posts. But WordPress doesn’t display the featured image in the RSS feed by default. Use the following code to do so. You can even add HTML to it.

add_filter('the_content_feed', 'rss_post_thumbnail');

function rss_post_thumbnail($content) {

    global $post;

    if( has_post_thumbnail($post->ID) )

        $content = '<p>' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</p>' . $content;

    return $content;

}

Show Content Only To RSS Subscribers

To increase subscribers to your RSS feed, you could offer a gift available only to them. The code below creates a new shortcode⁹ with which to wrap content in order to hide it from regular visitors but not from RSS subscribers.

add_shortcode( 'feedonly', 'ilc_feedonly' );

function ilc_feedonly( $atts, $content = null ) {

    if( is_feed() ) return '<p>' . $content . '</p>';

    else return;

}

Show Content Only To Logged-In Users

In the same vein, you could show content only to registered users of your website. The code below creates a new shortcode¹⁰ with which to wrap content in order to hide it from casual visitors but not logged-in users.

add_shortcode( 'loggedin', 'ilc_loggedin' );

function ilc_loggedin( $atts, $content = null ) {

    if( is_user_logged_in() ) return '<p>' . $content . '</p>';

    else return;

}

Display Links For Sharing Posts On Social Networks

If, for some reason, you don’t want to use the standard Facebook, Twitter and other social-networking buttons for sharing posts, you can add your own links with the code below, perhaps using it in conjunction with one of Smashing Magazine’s icon sets, such as Flavours¹¹.
Here, we’ll be filtering the content using the the_content function. But, unlike what we did when we adjusted the excerpt’s length or removed the generator meta tag, we don’t want to overwrite it, but rather to append our links to it. So, this filter returns the post’s original content, concatenating our social-networking links right after it.

add_filter( 'the_content', 'ilc_share' );

function ilc_share( $content ) {

    global $post;

    $postlink  = get_permalink($post->ID);

    $posttitle = get_the_title($post->ID);

    $html = '<ul class="share-entry">';

    // Twitter

    $html .= '<li><a class="share-twitter" title="Share on Twitter" rel="external" href="http://twitter.com/share?text='.$posttitle.'&url='.$postlink.'">Share on Twitter</a></li>';

    // Facebook

    $html .= '<li><a class="share-facebook" title="Share on Facebook" rel="external" href="http://www.facebook.com/share.php?u=' . $postlink . '">Share on Facebook</a></li>';

    // LinkedIn

    $html .= '<li><a class="share-linkedin" title="Share on LinkedIn" rel="external" href="http://www.linkedin.com/shareArticle?mini=true&url=' . $postlink . '&title=' . $posttitle . '">Share on LinkedIn</a></li>';

    // Digg

    $html .= '<li><a class="share-digg" title="Share on Digg" rel="external" href="http://digg.com/submit?url=' . $postlink . '">Share on Digg</a></li>';

    // StumbleUpon

    $html .= '<li><a class="share-stumbleupon" title="Share on StumbleUpon" rel="external" href="http://www.stumbleupon.com/submit?url=' . $postlink . '&title=' . $posttitle . '">Share on StumbleUpon</a></li>';

    // Google+

    $html .= '<li><a class="share-googleplus" title="Share on Google+" rel="external" href="https://plusone.google.com/_/+1/confirm?url=' . $postlink . '">Share on Google+</a></li>';

    $html .= '</ul>';

    return $content . $html;

}

This code will add the links both in the full view for posts and on the archive pages (such as the category and tag pages). If you want them to appear only in the full view for posts, then add the following right before global $post;:

if( !is_singular() ) return $content;

This way, the links will be appended only when the user visits the full post or the page for an image.

Add Logo To The Log-In Page

To add your logo to the log-in page for administrators, use the login_head action hook, which executes all functions that are attached to it in the log-in page’s head element. We’re doing two things here: changing the logo, and changing the link that it points to.

add_action( 'login_head', 'ilc_custom_login');

function ilc_custom_login() {

    echo '<style type="text/css">

    h1 a { background-image:url('. get_stylesheet_directory_uri() . '/images/login-logo.png' . ') !important; margin-bottom: 10px; }

    padding: 20px;}

    </style>

    <script type="text/javascript">window.onload = function(){document.getElementById("login").getElementsByTagName("a")[0].href = "'. home_url() . '";document.getElementById("login").getElementsByTagName("a")[0].title = "Go to site";}</script>';

}

The CSS code will replace the WordPress logo with your own. You can adjust the path to the image in the fourth line of the code above to suit your theme.
In addition, the JavaScript changes the logo’s URL, so that you jump not to wordpress.org but to your own home page.

Closing Thoughts

We’ve seen how to customize WordPress’ social-network links and icons, how to show content only to logged-in users, how to customize the RSS feed and more. But the most important thing to take away is that you can build on this in endless ways. For example, you could add social-network links only in your feed, or add your logo to the bottom of the feed, or customize the log-in page using CSS, to name just a few possibilities.
Action hooks and filters are effective tools for tweaking the output of a theme, whether written to the database or run in the visitor’s browser. You can read more about actions¹² and filters¹³ in the WordPress Codex.

Design and Build Email Newsletters

2012-01-12T23:14:00.000-08:00

This article gives you the information you need to plan, design and build an HTML newsletter that renders well and is actually useful to recipients. It’s a quick and dirty guide to effective email newsletters.

If you’d like to get started right now, here are the cheat notes to get you on the right track. Read on for more detail, examples and resources.

Respect your reader. Don’t waste their time or attention.
Ask nicely first.
Focus on relevance.
Design with a goal in mind, so that you’ll know if it worked.
Make unsubscribing easy.
Code like it’s 1999 (literally) and use inline CSS.
Always include a plain text version.
Don’t assume that images will be viewed.
Follow the law.
Test everything before sending, because you can’t take it back.

1. Respect Your Reader. Don’t Waste Their Time or Attention.

The email inbox is a noisy busy place for a newsletter to land. Hundreds of other emails are already on the pile, with folders, calendars and notes on all sides. The typical user is probably not waiting with bated breath for your email to arrive.

So when your email does arrive, make sure it doesn’t waste their time. Get to the point quickly, instead of burying the value under a mountain of greetings and headers and hilarious photos. Figure out why someone would want your email, and then tell them what that is right away.

One excellent example of getting to the point is the recent Haystack announcement. No need to guess what Haystack is for when you read the top of this email:

⁵

2. Ask Nicely First

When you are excited about something, you want to tell everyone. Clients often assume that everyone they have ever met, and many they have not, would love nothing more than to receive their latest news. Of course, this is not the case, and laws are in place to back them up.

If you are using an external email service, it will have its own policies on what permission you need in order to email people. Know which policies apply to you and your clients before you send. Explicit permission is best: ask people directly if they would like to receive emails about your topic. If you can show an example of what they’ll get and let them know how often they’ll get it, all the better.

People might forget actually asking to receive your email, particularly if they don’t send emails very often or signed up as a result of entering a competition. A short message at the top of your email will help people remember and make them more likely to read on. Here’s an example of a well-executed permission reminder:

In this case, the recipient gets an explicit reminder of the time and the place they gave their permission. Following up soon after the sign-up also ensures that the recipient doesn’t forget.

In 2006, Return Path conducted a survey that showed that “knowing and trusting the sender” was the biggest factor in whether recipients opened an email, so avoiding complaints of spam isn’t good enough.

3. Focus on Relevance

Even if you have met your legal obligations and have the explicit permission of your recipients, they don’t necessarily want to read your emails. Have you ever agreed to receive “special discounts” on an item, only to be bombarded by endless advertisements for different items from the same company? Sending valuable, relevant information to your subscribers is vital. You might not want to send information to everyone on your list just because you can. Consider carefully whether the information is useful to them and what they expect from you.

ISPs and email providers now consider relevance in their definition of spam⁶, giving you even more incentive to focus on relevance.

4. Design With a Goal in Mind, So That You’ll Know If It Worked

Approach newsletter design as you would a website. Know why you’re sending the email and what result you want to achieve. We’ll cover this in more detail in the planning section below. The email below makes it very obvious what action its authors would like their subscribers to take:

⁷

Sit down with your client or boss and ask them plainly, “What is the one thing you want people to do when they get this email?” You might have to force them to pick only one to begin with! Designing to meet 10 different goals is hard, but you can design to support just 1 or 2. As we’ll discuss later, you can measure whether you’ve reached your goal in plenty of ways.

5. Make Unsubscribing Easy

We’re all tempted to hide the dull disclaimers and terms and conditions in Tiny Gray Font Land at the bottom of the page, but putting the “Unsubscribe” link there is a bad idea. There’s no point in emailing people who are not interested in your content any more. If your content is no longer relevant to them, let them unsubscribe easily. Making it hard will likely only lead to complaints of spam and leave people with a bad impression of your company.

Much better to make it clear and prominent; that way, if they decide in future that they would like to receive the information you’re offering, they will be confident in signing up.

It doesn’t have to be boring either. One of my favorites is, “You can unsubscribe instantly, but if you do we may scream, cry and then call you at 2:00 am begging you to come back. It’s your choice.” Not appropriate for every client, but you can have fun with more casual emails.

6. Code Like It’s 1999 (Literally) and Use Inline CSS

While most of us have put down our tools of trade from the browser wars, the fight goes on in the jungles of the email client, like those soldiers who don’t find out about the peace treaty until decades later⁸.

Instead of a handful of browsers, we find more than a dozen major email clients, with HTML and CSS rendering ranging from great⁹ to appalling¹⁰. So, to get decent results across a lot of clients, we’re back to using structural tables. Joy! Read on for tips and tricks to make coding the HTML and CSS in your design a not entirely frustrating experience.

Some email clients strip CSS out of the head but leave style blocks in the body (as invalid as this is). Gmail goes further and strips out all CSS from the head and body but leaves inline styling.

¹¹

So, once you’ve completed your design, you will need to go through and add inline styles to your elements. Some email services help you with this; or you could use Premailer¹². You can also use some nifty tools for CSS inline styling, such as The Automatic CSS Inliner Tool¹³ or Inline Styler¹⁴ — the latter converts CSS rules into inline style attributes.

7. Always Include a Plain Text Version

Some people just don’t like HTML in their emails. They might be using older systems, or their system is locked down and they just can’t view HTML. Provide a plain text alternative to every email, so that the reader’s own email server or program can choose which version to display.

Again, your email service probably provides that capability. Plain text can be hard to read, so spend some time making it scannable and useful. Here is a recent example from Mark Hurst at Good Experience:

8. Don’t Assume That Images Will Be Viewed

If you have used Outlook or Gmail, you’ve seen that “Images in this email are not displayed” message many times. In many of the major email clients, your images will not be shown by default. Readers have to click a link or button to download and display them. Here is a recent email we saw. On the left is the intended design (well, the top half of it), and on the right is how it appears in Gmail by default. Not exactly clear!

You may be able to work around this with some types of embedded images, but they have their own issues, too. No matter how perfect your images are, they may have no impact, or even a negative impact, on the success of your email.

If your client insists on a pixel-perfect design, an all-image email may seem like a good option. But if images are not shown to the user, and they see no text, all they’ll get is a big fat annoying blank message. Always ensure that your email has HTML text as well as plain text. Many people might not realize they can choose to show images, and some just won’t bother. So you can’t assume that people will actually see your images at all. For a full rundown on what the default settings of each email client are, check out current conditions in image blocking¹⁵.

How do you work around this? Here are a few ideas:

Avoid images for important content such as headlines, links and calls to action.
Add a prominent text-based link to a Web version of your newsletter.
Get recipients to add you to their address book or whitelist.
Use the alt attribute for all images to give Gmail users a better experience.
Specify height and width for images to ensure that the blank placeholders don’t throw your design off.
Test your design with images turned off before sending.

9. Follow the Law

Review any relevant commercial email regulations for your country. The best known of course are the US CAN-SPAM laws, but there are many others. For a great starting point, visit Email Marketing Reports¹⁶.

You might need to include a physical building address in your email or include something like “[advertisement]” in your subject line. Many email marketing tools help you build templates with these required elements, to ensure your client does not send out emails without them.

Even though you may not be at risk for the largest CAN-SPAM fine ever¹⁷, you could easily get into trouble with your email service if recipients complain and you have not adhered to the law. Legitimate providers have little tolerance for people who send emails that don’t meet legal requirements and could close your account or blacklist your server.

10. Test Everything Before Sending, Because You Can’t Take It Back

While reviewing current email client standards is a great start, nothing beats actually testing a newsletter in as many clients as possible. Several services help with design and spam testing, and the service you use may already have this built in. Make sure every link is working and that any personalization appears as expected. We always spot problems two seconds after hitting “Send,” so send some test emails to people who can give you feedback, and save yourself the despair of sender’s regret.

Tips, Tricks And Resources To Build Your Email

Though harder to find than general advice on Web design, plenty of help is available online for building a successful newsletter. Over at the excellent 24 Ways¹⁸, Dave Greiner has a great list of technical tips and tricks that is worth reading in full (the comments, too). Here are a few of the best tips:

Use tables for structure, instead of CSS.
Nested tables are more reliable than padding and margins.
Avoid CSS shorthand. (Use full definitions.)
Don’t use PNG images because Lotus Notes 6 and 7 do not show them.
Explicitly set a margin for every paragraph, because the defaults vary a lot.

Read the “Rock Solid HTML Emails¹⁹” article for all of the tips and follow-up comments. Your next step should be to bookmark the following links and save a bunch of time (and maybe your hairline, too).

Joomla Sections and Categories

2011-11-01T01:04:00.000-07:00

Stack of paper

The number one mistake I see with newcomers to joomla is a failure to understand the Section, Category, Article structure of content.

How many times do you see people either reject joomla or spend hours developing complicated and convoluted solutions to satisfy their desire to have nested sub-categories?
And yet the truth is you don't need them. The problem is that they are trying to match their frontend menu structure with their backend filing system.

Once you fully understand the backend filing system you will quickly see how things work and that it is a perfectly sensible and logical system.
Over the years I have adopted the analogy of a "filing cabinet", I believe our American cousins call this a "file cabinet", to simply and quickly explain how the filing system works.

All joomla articles are stored in a filing cabinet.

Each drawer in the filing cabinet is a section. You can have as many drawers as you want, there are no ceiling height restrictions in joomla.
Obviously you can't place a drawer inside a drawer so you can't have sub-sections.

Inside the drawer you have folders. Each folder is a category. You can have as many folders as you want, there are no maximum drawer depths in joomla.
Obviously you can't place a folder inside a folder so you can't have sub-categories.
Inside the folder you have pieces of paper. Each piece of paper is an article (content item). You can have as many pieces of paper as you want, all folders in joomla expand to fit the content.

On top of the filing cabinet is a nice tidy tray. This is where you put the occasional "un-categorised" content, static content in the joomla 1.0 world.

I hope you find that this makes as much logical sense to you as it has done to the hundreds of people I have trained with this method.
So the next time you are building a web site and are sketching out your Section/Category filing structure in your notepad, (you do plan the site on paper first don't you?), keep the filing cabinet in mind.

WordPress Admin tools that you would love

2011-10-13T23:49:00.000-07:00

Running your WordPress blog can feel like a full-time job sometimes. We’ve compiled an A-Z list of more than 50 plugins to help you streamline everything you need to do out back. As with any plugins list, don’t install them all at once!

This post is part of a series on WordPress tips – see also AJAX-Powered WordPress Plugins and Plugins for WordPress Comments.

—————404 Notifier – Gives you a log of all your 404 errors so you can see why your readers are ending up on broken pages.Admin Dropdown Menus – Make your crowded admin panel menus neat and orderly by turning them into dropdown menus.

Admin Panel Comment Reply – Adds a “reply to comment” option in the comments section of the admin area.

Ajax Spell Checker – Uses a combination of dictionaries to check your posts.

Auto-hyperlink URLs – Gives you several options for having URLs automatically turn in to hyperlinks.

AWSOM Pixgallery – Designed to allow artists and webcomic creators to create a portfolio of their artwork.

Batch Categories – Adds a page to the category management, showing all the posts that belong to a category making it easier to add to another category, or when using an import tool from another blog.

Custom Admin Menu – Gives you the power to rename, hide or move just about anything you want in the admin area.

Custom Write Panel – Allows you to customize the “Write” panel of WordPress. Hide things you don’t need such as “Post Password” and add things you feel you may need.

Dashbar – Let admins have admin access while working in the frontend of the blog without having multiple windows open.

Dashboard Editor – Ever wanted to change the Dashboard to be more useful? This is the plugin you need.

DashNote – Adds a post-it note feature to the dashboard to jot down notes to yourself.

Digital Fingerprint – Adds a digital fingerprint to your posts so you can search the web to see if your content has been scraped.

Domain Mirror – Will allow one WordPress install to be accessed from multiple domains and will even change the name and URLs based on the address people access it with.

Download Counter – Counts and tracks the downloads of all your files.

Email Users – This plugin allows you to mail registered users on your blog based on their role.

Enforce WWW Preference – Provides 301 redirects to queries with /index.php and enforces your use or non-use of www to make sure your search engine indexing is uniform.

Excerpt Editor – Gives you more control over the excerpts such as length and auto creation.

FeedBurner FeedSmith – Make sure all your RSS feed sbscribers get counted along with the ones signed up via FeedBurner.

Fix Database – Will check your WordPress database for errors and attempt to fix them.

Genki Announcement – Allows you to add an announcement before your first post without editing your themes, can even run on a timer.

Genki Pre-Publish Reminder – Forget to set your categories before you publish? Write yourself a reminder!

Google Analyticator – Inserts Google Analytics on every WordPress page

Google Sitemaps Generator – Will create a Google compliant sitemap of your blog.

GT Post Approval – Adds “Approve” and “Reject” buttons to the administrators view on all posts, very handy for blogs with multiple authors.

Instant Update – Will handle the tedious chore of upgrading your WP install with just one-click.

Just Unzip – Upload a zip folder from the Write page; this plugin unzips the contents and associates them with the current post.

Khanh’s Instant Notepad (KIN) – Allows you to jot notes to yourself on a notepad.

Leprakhauns Word Count – Adds a Java powered word counter to your editing page, very useful for writers working to a word count on professional blogs.

Mass Post Manager – Allows you to move or delete all the posts in a category at once.

Mutliply – Allows you to control multiple blogs from one administrator.

NextGEN Gallery – Adds an image gallery to your control panel and can even add a flash gallery.

OneClick Install – Adds an extremely powerful uploader and installer for plugins and themes to WordPress, eliminates the need to unzip or FTP!

Page Link Manager – Allows you to easily rearrange pages, hide them, and move them at will.

Permacop – Allows you to redirect any URL to another.

Post2Page – Write a post that should really be on permanent display? Turn it in to a page with this plugin and have it handle the URL redirects to boot.

PlugInstaller – Point this plugin to a new plugin you want on the web, it takes care of obtaining it, uploading it and unpacking it.

podPress – Numerous features for bloggers wishing to add podcasts to their WordPress install. Previews, RSS feeds, adding cast to posts, and many, many more.

Search and Replace – Search all your posts at once for specified text, quickly replace it.

Share This – Adds multiple social bookmarking links and an e-mail-this function in one handy button.

Simple Pop-up Images – Add a thumbnail image to your post; when the user clicks on it, they get a larger pop-up of the picture.

Simple Tagging – Simplifies the tagging process to drop down menus, can import from your current tagging plugins.

Site Unavailable – Puts up a message your site is down, customize the message, all the while, the admins can still log in.

Throttle – Monitors your bandwidth and limits non-essential items during heavy load times to help performance.

Wikipedia-NoFollow – Written in response to Wikipedia’s implementing a “nofollow” rule to their outgoing links, a plugin to add nofollow to links you give to Wikipedia pages.

WordPress Mobile Edition – Strips your blog down for easy reading on phones and PDAs.

WordTube – Why use YouTube when you can host and stream your videos as you please? Includes a flash player.

WP Grins – Adds clickable smilies to both the administration area and comments section at once.

WPAds – Add rotating banner and text ads to any position you define in your blog.

WP-Custom Login – Allows you to modify the user login page logo to an image of your choice to allow you to brand your site more completely.

WP- DBManager – Gives you the power to optimize the database, back it up, restore, delete the backup database , drop emptied tables and run selected queries.

WP-phpMyAdmin – Gives you quick access to your PHP databases directly from the WP admin area without haveing to login to phpMyAdmin. Very handy.

WP Plugins Tracker – Will verify all of your plugins are the latest version by checking them against the wp-plugins-db.org database.

WP Super Edit – Gives you more control over the Visual editor including emoticons, layers, style attributes and more.

WP-Table – Allows you to add a table directly in the Visual mode or import from a spreadsheet.

Got more suggestions? Add them in the comments.

How to Customize WordPress Admin Area (Dashboard) for Beginners

2011-10-13T23:44:00.000-07:00

Have you ever felt that your WordPress dashboard has additional clutter that you do not want. Sometimes added by additional themes, plugins, or maybe you don’t like one of the default widgets. Well in this article, we will share how just a beginner can customize their WordPress admin area to look the way they want it without editing a single line of code. We will be using the Screen Options Tab that most users often ignore.

The downside of this is that it saves the settings on per-user basis. If you have a multi-author blog, then you might want to read our next post in the series this week.

If you open your WordPress dashboard, look at the top right: there is a tab called “Screen Options”.

As you can see that there are quite a few options there. You can check off each option that you do not want in your dashboard. You can even add more columns if you want. By default it is 2 columns, but you may make it 3 or 4 if you want. Some options are added by plugins such as W3-Edge option that you see in the screenshot above. To reorganize the boxes, you can drag and drop them to your liking.

If you do not like the way your write panel is organized, you can drag and drop boxes there as well. But furthermore, you can add and remove things just like the dashboard. Simply click on Screen Options Tab and start unchecking the box that you do not use.

The biggest question that is often asked is how to increase the number of comments shown on the backend. Because by default it only shows 20, but some users may like to see 50 comments when moderating because it makes the job easier. Well that can be achieved with Screen Options as well. Simply go to the Comments page and click Screen Options.

You have the Screen Options tab on just about every page of the WordPress admin panel. If you are a total beginner, and do not want to edit codes. Well this is your best method of customizing your WordPress Dashboard.

CMS made simple – Simple PHP based content management system

2011-05-30T21:38:00.000-07:00

CMS Made Simple (CMSMS) is a free/open source content management system written in PHP and support for MySQL and PostgreSQL database backend.

It provide simple, easy to use web-based user interface for theme, template, and style sheet development, installing and updating add-on modules, configuring page content blocks, and user groups and permissions.The template system of CMS made simple is built with smarty template engine which allow you to easily update your site’s layout, and modules extend functionality.</p>

CMS Made Simple come with the following features : SEO Friendly URLs, Integrated and online help, Modular and extensible, Easy user and group management, Group-based permission system, produced XHTML and CSS compliant pages, Full template support, for unlimited looks without changing a line of content, Easy wizard based install and upgrade procedures, Minimal server requirements, Admin panel with multiple language support, Content hierarchy with unlimited depth and size, Integrated file manager with upload capabilities, Integrated audit log, Friendly support in forums and IRC, Rich module API for unlimited expandability, Database abstraction using ADODB Lite.

Download cmsmadesimple

Get URL Parameters Using Javascript

2011-05-30T08:31:00.000-07:00

Most of the server-side programming languages that I know of like PHP, ASP, or JSP give you easy access to parameters in the query string of a URL. Javascript does not give you easy access. With javascript you must write your own function to parse the window.location.href value to get the query string parameters you want. Here is a small function I wrote that will parse the window.location.href value and return the value for the parameter you specify. It does this using javascript's built in regular expressions. Here is the function:

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

The way that the function is used is fairly simple. Let's say you have the following URL:
http://www.foo.com/index.html?bob=123&frank=321&tom=213#top
You want to get the value from the frank parameter so you call the javascript function as follows:

var frank_param = gup( 'frank' );

Now if you look at the frank_param variable it contains the number 321. The query string was parsed by the regular expression and the value of the frank parameter was retrieved. The function is smart in a couple of ways. For example, if you have an anchor in your URL like our example URL above does (#top) the gup() function knows to stop before the # character. Also, if a requested parameter doesn't exist in the query string then an empty string is returned instead of a null.
This function has worked very well for my query string parsing needs and should work well for you.

Basic SEO Tips that a webdesigner should know

2011-05-30T08:12:00.001-07:00

If you don't want too much competition from other SEO's, choose your keywords
precisely.

For example, Instead of keyword Loan choose keywords like Bank Loan, Equity Loan, Student Loan, Home Loan etc.

Order of keyword also matter for search engines. Search engine treats Loan Equity, and Equity Loan as different keywords.
Best seo practice is to get at least one of your primary keywords in domain or
sub domain name of your website.

You can use hyphens (-) to separate multiple keywords.

For example: seo-service, seo-guidelines, free-seo each cover two keyords.
Get your second or third keywords in your directory name and filename.

For example http://www.hiddentricks.com/seo/free-tips.html is best for
keyword 'free seo tips' , 'seo hidden tricks' or "free seo tricks"
Keep your webpage free from any syntax error, declare document type at the
beginning and validate your HTML and CSS because search engine don't like pages
with too many errors.
Give a short Title in of your page in 3-9 words (60-80 characters) maximum in
length containing your primary keyword.

Remember it will be displayed in search results so choose wisely.
Try to include your most important keyword phrases in heading tags on your page
if you can but keep in mind it should not be exactly same as title of your page.

You can use (H1 H2 H3) tag for specifying anything important.

To reduce size of heading use CSS.
Specify Meta keywords in heading of document. Limit it to 15 to 20 words.
Although not all the search engines give importance but there is no harm doing
it.

Search engine like Yahoo still give it importance.
Write Your Meta Description tag attractive containing keywords because it will
appear on the search engine result pages.
Use text for navigation menu instead of using images or Java scripts.
Try to include your most important keyword in hyperlinked text and text and text
that immediately precedes or follows the hyperlink.

Do not use same keyword always use synonyms at few places.

Jusk like instead of seo, I have use search engine optimization at many places on this page.
If you are using images then use 'alt' attribute to describe your image with
proper keyword.
One of the best webmaster guideline is to submit sitemap of your website to make
sure all pages of your website are indexed by search engine crawlers.
Keep size of your webpages less than 50KB so it is downloaded fast and visitors
don't have to wait for long.

For good SEO site page size ideal should be 15KB.
Try to avoid your content in Flash, frame, images, java script because crawler
find it very difficult and it is against seo tips and guidelines.
Don't use dynamic url because it don't contain keywords so its not search engine
friendly.

If you are using any script which shows dynamic pages then make sure at least it
should include one keyword.
Don't try to spam and never use methods like cloaking, keyword spamming or
doorway pages.

Many seo advices to have multiple domain name and link each other but according
to our SEO tips and guidelines search engine can penalize you for this.

Instead of that try to add more quality content to your existing website.
Submit your website only once to google, Yahoo, AltaVista and other search
engines and open directory.

Don't use any script or website for automatic submission.
If your website contents changes very often then provide visitor with Newsletter
and RSS feed.
Write articles on website related to yours having higher page ranking and leave
your websites link.
Get link from other sites related to yours, search engine consider it as vote in
your favour.

Table Design Vs Tableless Design

2011-05-30T08:07:00.000-07:00

Advocates of CSS tableless layout

The advocates of CSS layouts say that a CSS layout is easier to maintain, more accessible and SEO-friendly, proper semantics, lighter in code and hence better performance. Here are more details of the benefits of tableless CSS layouts. Cameron Olthuis summarizes the benefits. O'Reilly does a good job explaining the benefits and the drawbacks of CSS layout and even does a code comparison (at the bottom of the last link).

Advocates of Table-based Layouts

Back then, the advocates of table-based layouts would say that CSS layouts have a steep learning curve and are susceptible to many browser bugs such as the 3 pixel jog, float drops, etc. Complex CSS hacks and workaround have to be employed in order to get the the layout to function solidly and have equalized columns in the variety of browsers. Whereas, table layouts are easy to understand and and fast to implement and works right-off-the bat without extra hacks.

Our Suggestion

Our suggestion is to try your best to learn and use CSS-based layouts whenever possible. Reserve the use of table for tabular data and for layouts of HTML emails (both of which are valid reasons for using tables). We do conceded that sometimes tableless design can be more difficult and take more time. So if you are a frustrated beginner (like many others) who is just learning the trade, we can understand if you make exception to the rule and fall-back on the use of tables. And that is okay. We have been there ourselves. You can always attempt the CSS-layout when you have gain more experience.

But if you do use table layouts, use the CSS "table-layout:fixed" property for your table. As mentioned in IE blog this will cause IE browser to do progressive rendering on table contents so that IE browser does not have to parse all the way to the ending table tag before drawing things on the screen.

What's in the Future

Kevin Yank (editor of Sitepoint) write in his article "Table-Based Layout Is the Next Big Thing" that "The lengths to which designers must go to produce, say, a simple three-column layout using CSS techniques are so extreme that many web designers simply give up on CSS and resort to HTML tables for their layout."

However, the "next-big table-base layout thing" that Kevin is talking about is not the "table" tag that designers have started off with. Kevin is referring to the "CSS tables". You still use "div" tags instead of "table" tags as in CSS-based layouts. However, you don't have to use floats and clear. Instead, you use CSS properties such as ...

display: table;

display: table-cell;

Well, why are people using this method if it is an easier-to-understand form of CSS-based layouts exists. The problem is that the predominate browser as of this writing, IE7, does not support display: table.

However, the upcoming IE8 (having passed the ACID2 test) does support this property -- making that property supported by all major browser. Kevin claims that by then (and after IE7 becomes obsolete), designers will start using this new method for layout.

Others claim that future-coming CSS3 Advanced Layout Module will solve many of the CSS-based layout issues and will present yet another way to do layouts.

References

Two Types of Layouts

Sitepoint: Same design in table and css

Display a download dialog for pdf in PHP

2011-05-30T05:28:00.000-07:00

In order to display a download dialog for pdf file rather than opening it in the browser, we can put the following snippet of code in a php file and name the file download.php.

The path to the pdf file is specified in $filename variable. You can also pass filename as a parameter in the URL but you will need to check for Cross Site Scripting (XSS) and various script injection attempts if you decide to get the filename from the URL paramater.

$filename = '/path/to/your/file/download.pdf';
  header("Pragma: public");
  header("Expires: 0");
  header("Pragma: no-cache");
  header("Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0");
  header("Content-Type: application/force-download");
  header("Content-Type: application/octet-stream");
  header("Content-Type: application/download");
  header('Content-disposition: attachment; filename=' . basename($filename));
  header("Content-Type: application/pdf");
  header("Content-Transfer-Encoding: binary");
  header('Content-Length: ' . filesize($filename));
  @readfile($filename);
  exit(0);

Create shapes with CSS

2011-05-30T03:59:00.003-07:00

Square

Rectangle

Circle

Oval

Triangle Up

Triangle Down

Triangle Left

Triangle Right

Triangle Top Left

Triangle Top Right

Triangle Bottom Left

Triangle Bottom Right

Parallelogram

Trapezoid

Star (6-points)

Star (5-points)

Pentagon

Hexagon

Octagon

Heart

Infinity

HTML Special Characters

2011-05-27T21:26:00.000-07:00

Here are the html codes for special characters that nobody remembers how to create.

Symbol	HTML code	Keystroke (use keypad)
•	&#149	Alt + 0149
é	&#233	Alt + 0233
ñ	&#241	Alt + 0241
©	&#169	Alt + 0169
™	&#153	Alt + 0153
®	&#174	Alt + 0174
¢	&#162	Alt + 0162
£	&#163	Alt + 0163
¥	&#165	Alt + 0165
–	&#150	Alt + 0150
—	&#151	Alt + 0151
…	&#133	Alt + 0133

CSS Cursors

2011-05-27T20:41:00.000-07:00

The CSS2 standard gives us 17 options for cursors, plus the option to use an external cursor from a URI. For two of the cursor options, there could have been slightly better phrasing, because it is a touch confusing for some people to remember. Two of the options are auto and default. Now, auto is actually the default value if you don’t explicitly set a cursor to be applied. To the W3C, I imagine this wasn’t a concern because they use the wording ‘initial’ value, instead of ‘default’ value. Unfortunately, in practice, most people tend to say ‘default’ value, instead of ‘initial.’ So, just keep in mind that the ‘default’ value for a cursor is actually ‘auto’ and not ‘default’.

This should help it make a bit more sense:

auto – Initial value. Lets the browser choose.
default – Displays the basic cursor (usually an arrow).
crosshair – A ‘+’ shaped cursor.
pointer – A pointer (usally displayed for links).
move – Indicates a moveable element (often a 4-way arrow)
text – Text can be selected. (often an I-beam)
wait – Asks the user to wait (often an hourglass).
help – Indicates help is available (often a question mark).
progress – Similar to wait but shows that a process is working.
e-resize – Indicates a resizeable element. Double-arrows display direction to size.
ne-resize – Same as e-resize.
nw-resize – Same as e-resize.
n-resize – Same as e-resize.
se-resize – Same as e-resize.
sw-resize – Same as e-resize.
s-resize – Same as e-resize.
w-resize – Same as e-resize.

I mentioned that there is also the option to use the cursor for an call to a remote cursor. So, let’s say that you have a cursor you would like the browser to use, and you have it stored at a specific location. You could do the following:


<p style="cursor: URL(preferredcursor.cur)">Text</p>

Now, the problem is that not all browsers may be able to load or use that cursor. Let me give an example of one that browsers might have a hard time viewing, and the way you can still set an alternative.


In CSS or Inline:
acroynm { cursor: URL(1.svg), URL(2.cur), help }

The first one (1.svg) is the preferred cursor and if the browser can handle loading and displaying and SVG file, it will do that one. If not, it moves to the second, and tries to load the 2.cur file as the cursor. If it cannot, it will instead display the built-in help cursor.
That is the nice aspect of CSS cursors – they degrade gracefully. If a browser cannot support them, they don’t show, and it does not cause display problems. So, feel free to use the CSS cursors.

Testing the Basic 17

To test whether or not your browser can support them, each of the below list should show the appropriate cursor on hover:

The list is:

auto – default – crosshair – pointer – move – text – wait – help – progress – e-resize – ne-resize – nw-resize – n-resize – se-resize – sw-resize – s-resize and w-resize.

So, have fun with the CSS cursors. Not all will show for everyone, but due to the smooth degradation for browsers without support – it is a perfect use of CSS.

Stretchable Elastic Website

2011-05-27T20:38:00.000-07:00

Using CSS to create a website can take quite a few attempts to start getting the hang of it. But hang in there, it eventually starts making sense. This article is aimed at the new CSS designer looking to easily create an elastic website that will always fill the screen regardless of the viewers screen resolution.

Over time, and with much experimentation, I’ve found that a web designer can create a website that will stretch to any resolution being used and still keep everything exactly where it should be.
A few basics to remember:

a) The need for a wrapper is no longer needed to stretch the entire page to 100%. However, a perfect example of a wrapper would be if you wanted a div to always stay against the right edge of a page, regardless of the page resolution used by the viewer. Example:
The html would look like this:

<div id=”divnamewrap”>
<div id=”divname>div content here</div>
</div>

The .css would look like this:

#divnamewrap {
height: 120px;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
}
#divname {
height: 120px;
width: 175px;
position: relative;
z-index: 0;
float: right;
}

In this case the div, (#divname) inside of the wrapper div, (#divnamewrap), is used to carry the inside div to 100%, while floating the inside div, or wrapped div to the right. This will always keep the #divname placed at the top right corner of the page.

b) All divs can be absolute positioned and placed at an X and Y coordinate on the page. Typically I will build from X0 and Y0 and use percentage for the width of the div. After some calculating, you can create the proper spacing and look on the page regardless of the screen resolution being used by the viewer. I play with percentages and keep changing my screen resolution between 800 and 1440, (or your largest resolution allowed by your monitor) until everything fits without any overlap.

However, when there is a need of two text areas side by side on a page, then the width can be fixed in pixels, and the X position can be placed by percentage. Once again, some experimentation needs to be done by switching resolutions to make sure there is no overlap at 800 x 600.

Example:
The html would look like this:

<div id=”>content seen in example here</div>
<div id=”infoarea2″>content seen in example here</div>

The .css would look like this:

#infoarea {
width: 240px;
position: absolute;
left: 34%;
top: 35px;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #660000;
text-align: left;
list-style-position: outside;
list-style-image: url(images/bullet-opt.jpg);
padding: 5px;
}
#infoarea2 {
width: 200px;
position: absolute;
left: 71%;
top: 35px;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #660000;
text-align: left;
padding: 5px;
}

A perfect example of that is seen on the Bio page in a website I created a few months back. The CSS is taken directly from the .css file and can be viewed at Charizma Photography.
I personally still design for the 800 x 600 users, because I feel there are still enough people using this resolution to make it a necessity. That of course would depend on the market you are trying to reach with your website. If you are going to be targeting users near or over the age of 50, I would highly recommend designing for 800 x 600. However, I do see more and more websites now designing for a minimum resolution of 1024.

c) Keep in mind your Z index. This is probably the most critical point. You can place a div directly on top of another div if you need to maintain an alignment of two images or possibly a navigation area over some artwork. The bigger the number, the further from the page surface the div will appear. A perfect example of this is on my personal site with the revolving world placed over the background artwork. My site URL can be found in the About the Author section at the end of this article.

With these points in mind, and some experimenting, you should be able to achieve a completely stretchable elastic website. Which I believe is the current trend in website creation. It’s amazing how quickly the fixed width website has become a thing of old. I still see fixed width sites that hold to the upper left corner and get smaller looking as the browser resolution increases, but even these are slowly fading out.

Fbml codes for facebook page

2011-05-08T05:09:00.000-07:00

Facebook markup language or FBML for short is used in a variety of places within the social network. Anyone who has written any Facebook applications will already be pretty familiar with its tags, and will probably have used it to write data to walls, or share postings with others programmatically. If however you haven’t yet dipped your toe in the water of the Facebook API, or indeed haven’t actually needed to – there are some snippets of FBML which prove to be mighty useful when creating custom Facebook Fan Pages, and can easily and quickly out of the box be used with the FBML widget, which adds an extra much needed layer of customisation to an existing Facebook fan page. The static FBML widget can be added multiple times, and in multiple places (sidebar and tabs) to facilitate this. Once you’ve added it to your page, simply go to “edit page”, then under Applications click “edit” under Static FBML. This will give you the options you need to paste in your code.

Adding your newsletter

If your blog or website offers subscription via email, an additional place to find subscribers is within the Facebook network. Fans that stumble upon your page, or are invited by others may want to add themselves to your subscriber list directly from you page, without visiting your site. Using the code that your newsletter provider gave you, you can easily create a newsletter tab with a subscribe box. Whilst this isn’t strictly FBML (its just HTML) – its an easy way to increase your reach and exposure on the cheap. FBML needed. Something similar to below. This is what I’m using folks.

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WebDesignInIrelandBlog', 'popupwindow', 'scrollbars=yes,height=520');return true">
 <p>Enter your email address:</p>
 <p><input type="text" style="width:140px" name="email"/></p>
 <input type="hidden" value="WebDesignInIrelandBlog" name="uri"/>
 <input type="hidden" name="loc" value="en_US"/>
 <input type="submit" value="Subscribe" /> </form>

Include Sharing With Friends

One of the main benefits of being on the Facebook platform is the ability for viral sharing to take place amongst participants in the network. To encourage your business page to be shared with others you can implement a Facebook “multi-select” box, all within the static FBML box. This will loop through the current users friend list, allowing them to select who they want to share the fan-page with when they click send. You might want to put this under a “Spread the word” type tab to increase your reach.

Update. Some people have reported problems with this code. From what I can remember, it worked previously – so unless FB have changed things. Anyway – I’m using the below successfully now. Don’t for god’s sake copy and paste, examine the code, and type it exactly. WordPress makes a mess of single quotes which won’t work inside Facebook. I will get around at some stage to ammending this, but for now take care and try and understand what you are using. If all else fails, consult the Facebook documentation, or leave a comment here, which I’m more likely to respond to. I’ll not be replying to personal emails asking for help.

<fb:request-form method="POST" type="Webdistortion" invite="true" action="http://www.facebook.com/multi_friend_selector.php" content="Become a fan of Webdistortion!<fb:req-choice url='http://www.facebook.com/webdistortion' ' label='GO' /> ">
<div style="padding-bottom: 10px;">
<fb:multi-friend-selector condensed="true" style="width:80%;" /&gt
</div>
<fb:request-form-submit />
</fb:request-form>

FBML needed

<fb:request-form method="post"
 type="Your Fan Page Name Here."
 invite="true"
 content="Check out Your Fan Page Name Here on Facebook!<fb:req-choice url='YOUR FAN PAGE URL here' ' label='GO' /> "&gt
 <fb:multi-friend-selector actiontext="Tell your friends about us rows="3" showborder="true" /> </fb:request-form>

Include Multimedia

Multimedia objects such as flash, video and images can also be easily added to Fan Pages. If for example you wanted some flash video, or embedding of a flash game, the FB:swf, and FB:flv are perfect candidates. More details on the format of the API request available here for FLV and here for SWF. FBML needed (Flash object).

<fb:swf swfbgcolor="ffffff"  swfsrc='http://www.yoursite.com/flash.swf' width='380' height='250' />

(FLV video)

<fb:flv src='http://www.yoursite.com/video-gallery/video.flv' />

(Image)

<fb:photo pid="12345" />
 <img src="http://www.yoursite.com/image.jpg" />

Monitor your pages with Google Analytics

A great social media campaign should focus on measurement over reach. One of the easiest ways to take a look at the data provided via a Facebook page is via Google Analytics. Thankfully, inclusion on an existing static FBML page is particularly easy. Here’s the code you need. Obviously, just replace the uacct with your own account ID to start collecting data about your page. FBML needed

<fb:google-analytics uacct="UA-9999999-99" />

Randomise your messages

You can easily add random messages to your Facebook page. You may for example, want to experiment with multiple calls to action – or offer multiple promotions to your audience. The Facebook Random tag lets you achieve that, without any programming. Here’s how: FBML needed

<fb:random>
 <fb:random-option weight="2">A: This will be shown 2 times as often as B.</fb:random-option>
 <fb:random-option weight="1">B: This will be show half as often as A</fb:random-option>
 </fb:random>

Add profile image

Your profile image is the thumbnail found at the top left of your page. To include it again anywhere on your Facebook Static FBML page, try using this example. A number of size parameters can be set with the tag, so if this size isn’t your thing, you can easily adjust it. Replace the UID parameter with your own userId.

<fb:profile-pic uid="12345" size="normal" width="400" />

Add wall sharing capabilities

Sharing of individual bits of data or URL’s on Facebook is pretty integral to success. One easy way to do this on a Static FBML app is via the share-button. This allows you to share both data and links into a users wall / stream. FBML needed

<fb:share-button class="url" href="http://www.yoursite.com" >

Or to include more specific meta data. FBML needed

<fb:share_button>
 <meta name="medium" content="news"/>
 <meta name="title" content="Announcing the xxx Application"/>
 <meta name="description" content=""/>
 <link rel="target_url" href="http://apps.facebook.com/xxx"/>
 </fb:share_button>

10 FBML codes for your facebook fan page

2011-05-08T05:04:00.000-07:00

1. Embedding YouTube Videos

When you click the embed button below the video in YouTube, It will give you the embed code to put that video easily on your website or might be using some free plugin to easily embed youtube videos on wordpress blogs.

But in case of embedding YouTube video on Facebook page, the default embed HTML code doesn’t works. The video on Facebook can be only embedded using the lash. Copy-Paste the code below into the FBML box of your page to embed the video. Remember to replace VIDEO_ID with the YouTube Video ID before you save.

<fb:swf swfsrc=”http://www.youtube.com/v/VIDEO_ID” imgsrc=”http://img.youtube.com/vi/VIDEO_ID/default.jpg” width=”480″ height=”360″ />

2. Separate contents for Fans and non-fans

Showing Separate contents for the Facebook Page fans and non fans can also help you gain more fans for your page. You can use the FMBL below and show separate content for the fans and non-fans.

<fb:fbml version=”1.1″>

<fb:visible-to-connection>This part is visible for fans only!

<fb:else>This part is visible for non-fans</fb:else>

</fb:visible-to-connection>

</fb:fbml>

3. Invite to Friends box

Adding an Invite to Friend box below the main Content of your welcome Tab will also help you increase the fans of your page as it makes your fans easier to invite their friends on Facebook. Use the following code in FBML box to insert the Invite box in your page.

<fb:request-form method=”get” type=”[your organization]” invite=”true” content=”Check out [your organization]<fb:req-choice url=’http://www.facebook.com/YOURPAGE’ label=’GO’ /> “>
<fb:multi-friend-selector actiontext=”Tell your friends about [your organization]” rows=”3″ cols=”3″ showborder=”true” />
</fb:request-form>

4. Adding a Comment Box

Adding a comment Box on your Facebook page or adding it below any featured product on your page makes your readers easy to comment on the specified product easily. You can use the following code in the Fbml box to insert it in your page.

You can also take our old reference post for adding Comment box on Facebook page with tutorial.

<fb:comments xid=”YOUR_PRODUCT_UNIQUE_ID” canpost=”true” showform=”true” candelete=”false” numposts=”3″ returnurl=”http://YOUR_PRODUCT_HOME_URL”>
</fb:comments>

5. Adding podcasts and MP3 Audios

Like YouTube videos you can also embed podcasts or any Mp3 Audio on your Fan page using the Fbml. You have to provide the direct link to the mp3 audio file or Podcast in the Fbml. Facebook will wrap them in their own player and make your fans listen to it easily.

<fb:mp3 src=”http://example.com/podcast.mp3″ title=”Our new Song” artist=”This Week in Facebook” />

6. Adding pop-up Dialog Box

The Pop-up dialog box is used to give the short description of the link with on a Popup dialog box whenever a user clicks a specified link in your fan page.

For instance,You have used pop-up box for the ‘About’ Link on your page then it will show the popup box as above when your fan click on the link and the ‘learn more’ link can be even redirected to your About page.

<fb:dialog id=”dialog” cancel_button=1>
<fb:dialog-title>About Us</fb:dialog-title>
<fb:dialog-content>Bloganol is a Blog About Tech, Social Media, Opensource and more.
Would you like to learn more?</fb:dialog-content>
<fb:dialog-button type=”button” value=”Yes” href=”http://www.bloganol.com/about” />
</fb:dialog>
<a href=”#” clicktoshowdialog=”dialog”>Click here</a> to learn more.

7. Adding Polls to the Page

Previously in our blog we have already published a post about Ultimate Tricks and applications to make your facebook page a masterpiece. On that post adding a poll on a Facebook Page was also included but it was using the direct Facebook application.

In this page we are talking about inserting Polldaddy polls on your fan page in a Tab using the Fbml. Copy-Paste the following Fbml to insert polldaddy polls on your Facebook fan page. Remember to replace POLL_ID with your Poll id from Polldaddy before you save.

<fb:swf swfsrc=’http://i.polldaddy.com/poll.swf?p=POLL_ID’  width=’250′ height=’500′ imgsrc=”poll-thumbnail.jpg” />

8. Inserting Flash Content

Inserting Flash Content on your Facebook page is also like inserting YouTube video in your Page. Use the Fbml to insert Flash content n your page. Use the Flash file URL in the swfsrc and use the image URL onimgsrc as the source of the image that is being displayed, before your flash.

<fb:swf swfbgcolor=”000000″ swfsrc=’http://domain.com/file.swf’ imgsrc=’http://domain.com/picture.jpg’ width=’760′ height=’920′ />

9. Adding a Chat Room

Adding a chat room on your Fan page enables you to chat with your Fans when they are on your page. Firsth thing yopu need is to create a Flash based chat widget for your Facebook page using MeeboMe and then embed that Chat widget on your Facebook Fbml box usng the code below.

Remember to replace CHAT_ID with your widget chat Id provided by Meeome before you save the code.

<fb:swf swfsrc=’http://widget.meebo.com/mm.swf?CHAT_ID’  width=’515′ height=’425′ imgsrc=”chat-thumbnail.jpg” />

10. Adding a share button

A share button on your Facebook page lets your fan to share the provided link on their Facebook profile easily. You can use the following code on Fbml Box of your Page to insert the ‘Share’ button on your fan page.

<fb:share-button class=”meta”>

<link rel=”target_url” href=”http://yoururl.com”/>

</fb:share-button>

Getting more than one Static fbml tab after 30 march

2011-05-08T04:59:00.000-07:00