I gave a talk the other night at the Boston WordPress meetup about how I use shortcodes to enable my clients to create better looking content. A problem I was having was people were paying me to set them up on WordPress so they can take control of their content and then they were paying me even more to edit the content for them to “make it look pretty”. I guess if you need the business this isn’t a problem but I like to avoid small jobs, like manipulating content, so I can focus on my bigger projects and plugin support.

Pros and Cons of WordPress Shortcodes

Themes vs Plugins

The most popular implementation is currently in premium WordPress themes as a means of creating better looking content that matches the look and feel of the rest of the site. The problem then becomes you are tied to that theme if a majority of your site is relying on theme shortcodes to lay out your content. This won’t be a problem if you plan on rewriting your content but definitely something worth keeping in mind. It’s best to take functionality out of your theme you would like to be theme independent and put it in a functionality plugin.

My problem with using formatting shortcodes in a plugin as opposed to a theme is your content is less likely to match the look and feel of the rest of the site. That’s not to say their aren’t some great solutions out there and ultimately using a plugin will keep your content theme independent.

Usability

One of the obvious problems with shortcodes is if you’re taking the time to learn them, you can probably just learn HTML and CSS. I find this is true in most cases but not all. A shortcode is still easier to to use if you find the Visual/HTML editor confusing. You also don’t have to muck around with CSS.

One thing I think helps tremendously is the presence of a user interface to assist in the creation of the shortcodes. Most of the time this is in the form of a button on the visual editor that provides a popup with more options. There is no standard implementation of this so you won’t always have the luxury. More important is you now know it’s possible and can keep an eye out for how themes approach this problem. Most premium themes in ThemeForest do a good job of this.

Speed

If you don’t have to use shortcodes, just don’t use them. We’re talking milliseconds here in most cases so it really doesn’t matter too much. One problem with shortcodes is you cannot detect if a shortcode is being used in your content from your header so you can conditionally load javascript. You can however conditionally load javascript in the footer but it can be kind of a hack.

Resources

Code Snippets

• 10 incredibly cool WordPress shortcodes - Cats Who Code
• Mastering WordPress Shortcodes – Smashing Magazine

Advanced Development

• How to load JavaScript like a WordPress Master – scribu
• Make Shortcodes User-Friendly – Gary Cao

Plugins & Themes

• Styles with Shortcodes for WordPress
• ElegantThemes
• JShortCodes
• HubSpot for WordPress
• ThemeForest

Slides from Boston WordPress Meetup

[slideshare id=8441481&doc=wordpressandshortcodes-110627214435-phpapp02]

I used the [slideshare] shortcode to display the slides!

Come to Boston WordCamp

I’ll be speaking more about shortcodes again at Boston WordCamp so be sure to go and sign up. I’ll be showing different examples of how businesses can use shortcodes to create better looking content. There are a bunch of other great speakers with some very interesting topics lined up. It’s sure to be a great time and an awesome place to get brushed up on all the latest WordPress tips and tricks.

Useful WordPress Page Templates

1. Full Width Page Template

   This is probably the most widely used page template. It’s popular for landing pages on business sites and sometimes just an easy way to make extra space for a large graphic.

   • (Example)
   • (Code)

2. Site Map Page Template

   A sitemap could be generated by a plugin but themes can often display them much more elegantly.

   • (Example)
   • (Code)

3. Gallery Page Template

   A gallery page template could pull all images attached to a post and display them in an organized manner with some flashy effect. Also keep the new post formats and gallery shortcode in mind when creating galleries on the fly.

   • (Example)

4. List Subpages/ChildPages Template

   This page template display links of its subpages. Comes in handy more than you would think. This makes it easy to generate press release and news archives without using posts.

   • (Code)

5. Team/Author Page Template

   A team/author page template could display a list of employees at your company or authors of your blog by pulling from registered WordPress users or a custom post type.

   • (Example)
   • (Code)

6. Social Stream Page Template

   Why not have a page template that lays out all of your social streams in an organized manner.

   • (Example)

7. Logged In Page Template

   A logged in page template is an easy way to restrict access to only logged in subscribers of your site.

   • (Example)
   • (Code)

8. Widgetized Content Page Template

   This template would turn your main content area into a sidebar so you could load widgets where your content usually is.

   • (Code)

9. Portfolio Page Template

   This could display images similar to the gallery page template or it could have its own custom post type to pull from.

   • (Example)

10. Redirect Page Template

    This is a simple page template I’ve seen in a few popular premium themes. It’s basically an easy way to do a 301 redirect on your website without using plugins.

    • (Code)

11. Contact Page Template

    Some themes go as far as integrating custom form builders. You should at least look for good contact page templates. It’s also just an easy way to insert contact forms into pages.

    • (Example)
    • (Code)

12. Blog Page Template

    A blog page templates displays your blog posts. Some themes will give you a few different display options.

    • (Example)
    • (Code)

13. Custom RSS Page Template

    This page template makes it easy to display an RSS feed on any page.

    • (Code)

14. Redirect to Child

    Sometime you might have several subpages grouped together but no need for the parent page that holds them. This page template automatically redirects to the first child page.

    • (Code)

This is just the tip of the iceberg. You could have custom page templates for videos, testimonials, services pages and more.

Let me know of any other page template ideas I should add to the list and maybe any themes you think are using WordPress page templates in cool ways.

Gravity Forms

Gravity forms makes it incredibly easy to create web forms for your site. Some things I liked about it were the conditional form fields and the ability to monitor and export data. If you can’t shell out the money for Gravity Forms, Contact Forms 7 is still a suitable alternative.

Google Analytics for WordPress

As far as Google Analytics plugins go, this one is the best. Not only does it assist in adding the Google Analytics tracking code but it can also track outbound links and insert itself in the header or footer.

WordPress SEO

WordPress SEO is the most complete search engine optimization plugin you will find. Not only does it assist with titles and meta information but it can create XML sitemaps, breadcrumbs and much more.

Open Graph Protocol Tools

This plugin adds meta information to your WordPress header to enable your web page to become a rich object in a social graph. The Open Graph Protocal is used on Facebook to enable any web page to have the same functionality as a Facebook Page. If you’re having problems with Facebook or Digg using the wrong image when you try and submit your posts this plugin might help.

Socialize

I have a few plugins in the WordPress plugin repository but this is the only one I think people really need to know about. It allows you to selectively display the most popular social bookmarking buttons on your website. It also provides a call to action area at the bottom that you can edit for specific posts to request further action from your readers.

W3 Total Cache

W3 Total Cache is the fastest caching plugin for WordPress and is used by a lot of popular websites.

WPtouch

WPtouch is the most popular plugin for making your website mobile ready. The plugin detects mobile browsers and styles your site accordingly.

Secure WordPress

Secure WordPress allows you to selectively turn off WordPress functionality that poses a threat to your site.

Yet Another Related Posts Plugin

A great way to keep people on your blog is to recommend similar blog posts when they have finished reading the current one. The plugin has a bunch of settings making it easy to customize for your blog.

WP-DB-Backup

This one is straight and to the point. Back up your wordpress site so if something goes wrong you don’t kill yourself.

Subscribe to Comments

This plugin goes on my list of essentials. It’s the easiest way to get repeat visits from your commenters. It basically allows commenters to subscribe to all future comments on a post.

WordPress Blog Stats

I use this in conjunction with Google Analytics for two reasons.

1. I like having stats integrated into my dashboard.
2. I like being able to use that data with other plugins.

It’s not like the data is collected any faster than Google Analytics as both have a decent delay however it’s nice to see what another service has to say about my websites traffic.

Akismet

This one’s simple, it marks spam as spam for you so you don’t have to.

Traffic and Visibility

Alexa.com
Alexa provides information about websites including Top Sites, Internet Traffic Stats and Metrics, Related Links, Online Reviews Contact Information and Search Analytics for SEM and SEO optimization.

Compete.com
Compete helps you benefit from click-sharing by providing free services that create a more trusted, transparent, and valuable Internet.

quantcast.com
A new breed of measurement service helping buyers and sellers quantify the characteristics of digital audiences against which they can activate addressable advertising solutions.

quarkbase.com
See people, traffic data, similar sites, social comments, description, social popularity and much more about websites.

Xinureturns.com
Check PageRank, Backlinks, Indexed Pages, Rankings and more.

SEO

Open Site Explorer via SEOMoz
Linkscape provides link data never available before on over 41+ billion URLs across 366+ million domains.

Term Extractor via SEOMoz
This tool analyzes the content of a given page and extracts the terms that appear to be targeted at search engines. It applies certain weights to HTML elements and other on-page factors to determine what it thinks is a targeted term.

Website Grader via HubSpot
Free SEO tool that provides an Internet Marketing Report for your website.

SEO Analysis Tool via SEOWorkers.com
This SEO Analysis Tool is to help you analyze and measure the ranking potential of your web pages.

MarkosWeb.com
A web service that collects and analyzes any data about domains and keywords they are optimized for.

Keyword Monitoring and Discovery

KeywordSpy.com
SEO & PPC Keyword Research software tool, that unveil your competitors’ most profitable Ad copies & keywords.

SpyFu.com
Spy on your online competitors. Download competitors keywords and adwords.

SEMRush.com
SEMRush.com is a another great competitive research tool.

Social

Blog Grader via HubSpot
Blog Grader provide a free tool to grade your Blog and provide recommendations on how to improve its effectiveness.

HowSociable.com
HowSociable provides a simple way for you to begin measuring your brand’s visibility on the social web.

SocialWebsiteAnalyzer.com
Monitoring the social presence of your website on the top 20 social media websites.

Speed and Other Site Information

BuiltWith
Web technology information profiler tool. Find out what a site is using.

Web Page Analyzer via Websiteoptimization.com
Calculate page size, composition, and download time.

Readability.info
Readability.info offers readability scores, style, grammar, school paper analysis, readability scores (Kincaid, ARI, Coleman-Liau, Flesch, Fog, Lix and SMOG) for Web pages.

-

If your favorite tool isn’t listed please share it in the comments.

The purpose of this post is to educate my clients and readers on some of the best practices concerning HTML in their WordPress posts and pages. Sure you can just write blocks of text and hope the content is compelling enough to stick but knowing a little HTML can go a long way in making your posts easier to read.

Learn Basic HTML

Paragraphs and Line Breaks:

The WordPress editor automatically removes <br> and <p> tags that don’t have any attributes and  replaces them when your WordPress theme displays your content. This causes a lot of confusion when people who already know some HTML start trying to use the WordPress HTML editor and their paragraph tags keep disappearing. WordPress interprets a single line break as <br> and a double line break as <p>.

Headers:

Headers are a great way to tell your readers (and search engines) what the next block of text is about. Us humans have become accustomed to scanning posts rather than reading every little word. For this reason headers are a great way to help a reader find exactly what they’re looking for within your post.

<h1>Most Important Header</h1>
<h2>Second Most Important Header</h2>
<h3>Third Most Important Header</h3>
...
<h6>Least Important Header</h6>

I usually try to pick up where my theme left off. So if my post title is using <h2> tags I will use <h3> tags to punctuate my main points in my post.

Images:

I personally think images are the most important part of a post next to its content. You are best off using the Upload/Insert functionality in your post editor. If your theme supports featured images you should most definitely be using them.

One of my WordPress image pet peeves is when people don’t use the built in CSS classes to align their images to the content.  These are classes that the WordPress post editor uses by default and most quality themes will support.

A basic left aligned image in WordPress would look like:

<img src="example.jpg" class="alignleft" />

And there you have it. I’ll talk about the importance of additional tags like Alt and Title in a bit. For now let’s move on.

Lists:

Lists are a very important part of making your post scannable. I try and use them whenever I want to highlight key points because I know the reader is more likely to read them. There are two types of lists; ordered and unordered.

Ordered lists are exactly what they sound like:

1. First
2. Second
3. Third

And alternatively, an unordered list looks as follows:

• Something
• Something Else
• And More

Your sidebar and navigation menus are most likely already making use of lists because of their ability to efficiently organize information. The basic syntax of a list is pretty straightforward.

First you need to declare what type of list you are using

• <ol> – Ordered List
• <ul> – Unordered List

And then you need to wrap your list items with the <li> tag.

A completed unordered list could look like this:

<ul>
<li>Something</li>
<li>Something Else</li>
<li>And More</li>
</ul>

Formatting:

You’ve got your main points highlighted with headers, lists and images to draw your readers eye. Now you can run though your post and do any additional needed styling to accentuate any remaining key ideas.

<strong> – Makes your content bold. Use instead of <b> to help search engines give extra weight.
<em> – Makes your content italic. Use instead of <i> to help search engines give extra weight.
<a href=""> – The anchor tag can be used to link to other websites or within your site. The href attribute specifies the destination of a link.
<blockquote> – Most themes will indent and emphasize blockquote text so this is a great way to emphasize chunks of text and quotes.
<pre> – By default, this tag maintains a text format. Good for bits of text where you want to preserve line breaks and spaces.
<code> – This tag distinguishes text that is computer code from normal language
<del> –  This tag is useful for chunks of text you want to delete after a post has been published. Most browsers will render it as the original text with a line through it.
<ins> –  This tag is useful for chunks of text you may want to add to your post after it has been published. Most browsers will render it as the original text with a line under it.

Accessibility

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities via Wikipedia. WordPress recommends that you use Alt and Title tags on images as well as Title tags on links.

Example:

<a href="example.html" title="Example"><img src="example.jpg" alt="Example" title="Example" /></a>

Using The HTML Editor (Video)

Conclusion

This is only a small sampling of the HTML tags you can use based on the ones I thought were most important. All of these HTML tags are either built into the WordPress editor or supported by popular WordPress themes. Of course focus more on the quality of your posts than using as many HTML tags as possible. Look at some of your favorite blogs to get an idea of how you might want to structure your posts. With a better understanding of whats possible you can create a more personal style.

Further Reading

Here are some sites and posts worth checking out to learn more about HTML and blogging on WordPress.

• http://codex.wordpress.org/Writing_Posts
• http://www.w3schools.com/html/default.asp
• http://www.problogger.net/archives/2006/02/20/basic-in-post-html/
• http://www.tamba2.org.uk/wordpress/quicktags/

- Image by cdsessums

The tens of thousands of you who already use our paid service represent over 75% of our traffic

So I imagine most of the popular networks you belong to on Ning will remain in place.

However, for the other 25% that might navigate elsewhere you have several options. I’ve yet to see a good breakdown of some of the better free Ning alternatives out there so I thought I would give it a shot. I found most of these sites in the comments and blog posts of other despaired Ning network creators. I’ve also tried to track down these other networks reactions to Ning’s announcement. Hopefully this will help you with your own transition.

Hosted Solutions

Spruz

Spruz seems to be the network of choice for most ex-ningers. I’ve read several reports of great up time and quality service. Spruz seems to have everything Ning has and a few extras that make it somewhat unique. I’ve seen users specifically boast about its file sharing capabilities.
[Post from Spruz welcoming Ning users]

Webs

Webs gets 30 times the traffic of Spruz and any other network on this list falling short only to Ning at two-thirds its traffic. Webs promises to always be free and shares several of the main features that made Ning popular including forums, member profiles and blogs.

[Post from Webs welcoming Ning users]

WackWall

I guess being in beta it wouldn’t be fair to compare their traffic to some of the other sites on the list. However, WackWall looks very promising. They are backed by a software company and don’t rely on investments which is why, they say, they will always remain free.

[Post from WackWall welcoming Ning users]

Grou.ps

Grou.ps is another great choice based on open source software. It seems to have everything Ning has and a very reasonable pricing plan to help scale your network. They also prefer to be called a social operating system. Looks very powerful.

[Post from Grou.ps welcoming Ning users]

Grouply

Grouply looks a lot like Ning on the front end and already has FAQs on importing members from other services. Matter of fact I’ve mistaken grouply groups for Ning groups a few times. One does have to wonder why their traffic has been dropping only to be revived by Ning’s latest news.

[Post from grouply welcoming Ning users]

BigTent

BigTent may be one of the babies of the bunch but it provides all of the same services in an “integrated” approach. Users claim the support is tremendous making it worth their switch. BigTent looks like a very simple solution, maybe a little too simple for some.

[Post from BigTent welcoming Ning users]

Zerista

Still trying to wrap my brain around this one but it looks VERY cool. Imagine FourSquare meets Ning and has little mobile babies. With tons of cool features to integrate the social experience, maybe its about time you take your network to the next level and go mobile?

[Post from Zerista welcoming Ning users]

Groupsite

Groupsite (formerly known as CollectiveX) looks like an awesome network solution with some excellent features. It does seem like they find ways to lure you into buying their premium services, like limiting subgroups to 5 but overall another good solution on the free side.

SocialGo

SocialGo, like the rest has a very impressive feature list and is just as popular as Spruz traffic-wise. The site seems to have a pretty satisfied user-base as I’ve seen several people recommend the site across different blogs and networks. Definitely worth putting on the list.

Open Source Solutions

Maybe the phasing out of Ning’s free service is what it takes to get you to take ownership of your community and move to a self hosted solution. The following are all free and trusted solutions in the industry. I personally would go with BuddyPress but to each his own.

BuddyPress – [Message from Buddypress]

Elgg - [Message from Elgg]

Pligg

Dolphin

LovdByLess

Insoshi

Astrospaces

Conclusion

I wan’t to hear your thoughts. If you know of any other free hosted social network creation services, please share them in the comments. Also feel free to give feedback on any of the networks listed if you are currently a user or have used one in the past.

- Photo by Samuel Stroube

Keep in mind that these are the basics and this is not a guide on how to develop themes for public release.

What You Will Need

• An XHTML web template
• A WordPress install
• A text editor (Like Dreamweaver or Notepad++)
• An FTP client (Like Filezilla)

Getting Started

First, let’s set up our theme files.

Prepare your files

For this tutorial we are going to use the minimum number of theme files needed to create a functional WordPress theme. Your existing template files should include the following:

• An HTML Template File
• A CSS Stylesheet
• An images folder

You should rename your HTML Template File to ‘index.php’ and your CSS Stylesheet to ‘style.css’. This is important and is how WordPress knows which files are which.

This is an example of what your theme folder should look like

Add WordPress Theme Info (video)

This is where your WordPress Theme gets your theme name, description, author link, etc. All you need to do is create a commented out area at the top of your stylesheet as follows:

/*
Theme Name: Rose
Theme URI: the-theme’s-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme–optional
Version: a-number–optional
.
General comments/License Statement if any.
.
*/
CSS Goes here…

Adding Template Tags To Your Theme

Template Tags are bits of code that WordPress uses to populate your website with content. Different tags display different bits of information from the WordPress database. These are the main tags needed to make your WordPress theme work.

Page Title – (video)

Change whatever is within your <title></title> tags to:

<?PHP wp_title(”); ?>

Stylesheet – (video)

We are going to need to swap out the call to our stylesheet with:

<link rel=”stylesheet” href=”<?PHP bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

Plugin Hooks – (video)

Next you will need to add Action Hook Template Tags so WordPress plugins can access your theme. All you need to do is add:

<?PHP wp_head(); ?>

to your header (Usually write above the closing </head> tag).

Then you should add:

<?PHP wp_footer(); ?>

to your footer (Usually write above your </body> tag).

Media and Script Paths – (video)

By default, your paths will most likely reference your site root. You will need to point all of your multimedia, scripts and stylesheets to your new theme folder within the WordPress file structure using:

<?PHP bloginfo(‘template_directory’); ?>

The easiest way to do this is to do a search and replace for ‘src=’ and add the appropriate template tags. This is not fool proof as not all template structures are created equal but it will work a majority of the time.

Search and Replace to change paths to WordPress theme paths

Adding The WordPress Loop

The WordPress loop is what handles all of your websites content. Its main components are:

• A header
• A permalink
• Some Content

First you will need to identify where your content starts/repeats (if it repeats). The easiest way to do this is to look for your content’s header and begin The Loop there. The Loop will usually end immediately after your content unless you are displaying extra information below your entries. You will also need to identify where your content begins and ends. Scroll to the end of this section to view some example code.

The Loop Code – (video)

Beginning:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

End:

<?php endwhile; endif; ?>

Template Tags Within The Loop – (video)

The Title:

<?php the_title(); ?>

The Permalink

<?php the_permalink() ?>

The Content

<?php the_content(‘<p>Read more</p>’); ?>

Example Code

So this becomes this.

Navigation – (video)

Most themes will have the navigation within an unordered list. This makes things easy for you. All you need to do is replace the list elements (everything between the <ul></ul> tags) with the following:

<?PHP wp_list_pages(‘title_li=&depth=1&sort_column=menu_order&exclude=’); ?>

This is the most basic of menus and wont display child pages. You can exclude pages by simply adding the page ids separated by comas after “exclude=”. Learn more about wp_list_pages().

Upload and Activate Your Theme

Now all you have to do is upload your theme folder which should now consist of:

• An index.php file with custom code
• A CSS file with header information about the theme
• An images folder with all of your images

If all goes accordingly you should have a functional WordPress theme that allows you to add new pages and posts as well as use most popular WordPress plugins. It is important to note that you will not be able to add widgets to your sidebar and people will not be able to comment on posts. There may also be some other limitations due to the themes simplicity.

Feel free to contact me if you would like to learn how to bring your theme to the next level with a sidebar, comments and other interactive elements.

More Resources

• Theme Development
• Stepping Into Templates
• WordPress Theme generator

It doesn’t matter how big your business is or how much money you bring in. If you exist, I want proof of it on Google. I can bring up a business listing and even get reviews within minutes right from my cell phone anytime, anywhere.

We live in an on demand world where everything is a click, flick or a button press away.

But I Can’t Afford a Thousand Dollar Website!

Well me neither.

Luckily I make them for a living. For those not as fortunate feel free to learn more about how I can get you up and running with a customizable website for very short cash. The truth of the matter is, you really don’t need a thousand dollar website. There are tons of free content management systems and thousands of open source plugins on top of that creating endless possibilities for a completely unique, dynamic, out of the box website for your business. It’s not always about the glitz and the glam but about easily providing the information your audience needs.

Your Online Identity Freebies

User moderated reviews and online discussions have become the corner stone of a business’s online identity. These sites dominate the search engines and our mobile phones when searching for information about businesses and therefor should not be overlooked. You should check these sites to see if your business is already listed and add/modify as needed.

• Yelp
• Google Maps
• ZoomInfo

These sites require more attention on your part if you decide to participate. They take time to develop interested audiences but can be well worth it in the long run.

• Twitter
• LinkedIn

Don’t Be A Sucker

That basically just means don’t spend thousands of dollars on a crazy flashy website for your corner store boutique. Web developers are a dime a dozen – you can find them at your local college campus, all over Twitter and dominating craigslist. Be careful any way you go about it though. If you think you are getting ripped off, you probably are. Get a couple quotes for the same project and learn the lingo. Don’t go overboard with Internet marketing techniques like social media marketing and SEO. Get yourself a functional up to date website that provides your audience with what they want.

- Photo by Curious Expeditions

First off, we have an excellent article by Devlounge which poses some great questions:

• Things To Consider When Using WordPress as a CMS

Next we have a series of articles from Noupe convering some excellent WordPress as a CMS plugins, techniques and unique uses:

• 101 Techniques for a Powerful CMS using WordPress
• 40 Exceptional “CMS Enabling” WordPress Plugins
• 25 Unique uses of WordPress as CMS

Now WordPress isn’t the perfect CMS solution right out of the box, so NoScope.com discusses it’s shortcomings and some possible improvements:

• 10 Changes To WordPress That Would Make It A Killer CMS

It would also be nice if you took the time to keep your WordPress CMS somewhat user friendly so we’ll turn to Stylizedweb for that:

• 10 Steps to a Client Friendly WordPress CMS

And finally, a few lists of plugins that can help you successfully turn your WordPress blog into a fully functional content management system:

• 31 WordPress CMS Plugins via Jon Bishop (me)
• The Autopsy Of WordPress As CMS With 25 Great WP Plugins & Designs via Onextrapixel
• Use WordPress As a CMS: Plugins, The Bare Minimum via Themeshaper
• Top 10 WordPress CMS Plugins via Blueprint Design Studio

Get Strategies, Tips and Free Plugins to make your WordPress site perform above all the rest. There are plenty of tutorials to get you started using WordPress, but what are the next steps? Lean how to optimize your time and your website within the WordPress environment by subscribing to a bi-weekly newsletter made for business owners with little time to manage and learn about WordPress. It’s a one top resource with actionable topics that will help your site become more successful.

Did I mention it’s Free?

Subscribe Now

I visit some sites more often than others because of the frequency and quality of the posts they provide. Specifically Smashing Magazine and Fuel Your Creativity have continuously stuck out.

Please share some of your favorite blogs that provide resourceful posts about web design in the comments.

Awhile back, I tweeted about how I wasn’t a huge fan of the AddThis button and I felt the need for more actionable social sharing buttons. That led to a few conversations with an AddThis representative about how I could still use their JavaScript to help track my custom buttons usage.

So now, with this code, you can use any custom social bookmarklet you like, and still track the button usage.

So first and foremost you will need an AddThis account.

Then you need to add the AddThis javascript to your HTML. I like to put it in the footer so all of my content can load first.

Next, you will need to add the following javascript, substituting the “YOUR-ACCOUNT-ID” with your AddThis username. I usually put this right above the first link that will be using the AddThis code.

Finally you will need to add the ‘onclick’ javascript to the anchor tag like I do in the example below. The key here is to put the name of the service you wish the button to link to where I have inserted ‘stumbleupon’ below. A full list of services can be found on the AddThis custom services page.

So that is how I am able to track my sharing button usage on my site through AddThis without using the AddThis button.

You need to remember that the content is the main reason someone might be reading your blog at any one point in time. If your blog takes 5 minutes to load there is a good chance they are going to bail.

I’ve set up a development blog for the purpose of testing my blogs speed when adding and updating plugins. The goal is to keep the load time down to seconds. This way I know my blog can handle the load when getting a rush of new readers from a social bookmarking site or high profile twitterer.

My basic rule of thumb is if the plugin isn’t beneficial to the reader I don’t use it. I have since removed all back links to blog directories and any traffic boosting programs. I even got rid of sociable because it added a half a second load time to the page.

There’s nothing I need to put in my sidebar I can’t create a new page for and its not worth the hassle.

So please use plugins that direct me to your best content and focus on helping me, the reader.

- Photo by Editor B

Here are some examples:

• Inspiring Escapes
• Dexter
• Haunted house
• Walts wisdom
• Carmen has a crush on you
• News3Online
• Disney World – New
• I Love You – New

There are 4 main effects that can be achieved in a variable video:

• Variable text – example: holding up a card with the persons name
• Variable image – example: holding up a picture of the person
• Variable audio – example: saying the persons name with actors face covered
• Variable video scenes – example: saying the persons name without actors face covered

If you wanted to create a variable video campaign, there are multiple ways to go about it. All of the above effects can be recreated using Adobe Flash. If you only plan on doing variable text and/or imaging in the video you may not need 3rd party software. If you do wish to integrate your variable video campaign with other software, XMPie recently announced video integration capabilities with their system.

Another important aspect of variable video is the story. To properly recreate any of the videos shown in this post you would need actors, sets, equipment, scripts, etc. But, one great thing about variable video is it’s surprise factor. You could get away with crappy quality video as long as the personalization tied in seamlessly.

The most important part of any variable video campaign is it’s final conversion screen. This is where you encourage personalizing the video for someone else. Someone the user believes will find the video entertaining. People love seeing their name in lights and now everyone can be part of the internet video phenomenon.

Contact Me to learn more about variable video.

I’m not only excited about this campaign because of the client, but what we did in the campaign itself. It’s basically your standard PURL, kinda like the one we did for Magicomm, however we’ve simplified and viralized the whole microsite. I’ve been talking alot about interactive video in the past couple weeks and the potential it has as a marketing medium. Now I finally get to put my theory to the test as the last page of the PURL features its very own interactive/personalized video.

The PURL will go live in Drupa mid next week and we’ll have it live for the public a couple days after that. Be sure to check back to see how the campaign is doing as well as learn a little more about how effective it actually was.

The key here is personalization and interactivity. The internet took a turn a few years back with the rise of social and interactive networks. From that point on, the user was given control, and thats the way it going to be from now on. I showed in my previous post how successful personalized video is and now, I want to show you how easy it is to pull off.

Here are two videos i made when first experimenting with how flash could be used to manipulate video:

The best part is that i made each of those videos in under 15 minutes.

All you need to do it upload your video in flash:

1) File -> Import -> Import Video

(Note: I had to rerecord my video as a wmv because i could not get avi to work properly)

2) Then choose:

“Embed video in SWF and play in timeline” is what allows you to manipulate movieclips on top of your video. Now what you could do with this is map certain items to sync with the video and possibly even change those items at run time. You could insert personalized images, text, etc.

So now the goal of this entry. When it came time to output the data into your common blog format I found that their were some small things that helped my blog get indexed by popular blog directories as well as other assorted social media aggregations.

So ultimately I’m assuming you understand the general format and benefits of a blog. You’ve got your title, author, timestamp, and a post of some sort. Other optional features include keywords, permalinks, comments, and an RSS feed.
Now I want to go into a little more detail about the code side of this and show you where some simple HTML syntax separates the blog from the..um… not-blog.

Rel-tag

First I’ll talk a little about my favorite blogging feature, the ‘rel-tag‘. Rel-tag is basically a keyword that physically sits on your screen as apposed to META keywords which hide in your page’s header. Now when you’re displaying ‘rel-tag’ that relate to a specific post you use the relationship attribute of the anchor tag to define the hypertext as a ‘tag’.

As you can see it it pretty simple to establish a tag. Basically rel-tag is a MicroFormat and what you are doing is declaring that this link is an author-designated keyword for this post. Also note that in the URL of the link I’ve separated the two words with a + sign instead of a space (You could also use %20). You want to try and be sure that your tags relate and are appropriate for your post. Alot of social media aggregators use this information along with specific information in your RSS feed to categorize your post and you can often see your tags displayed on sites such as technorati.com and mybloglog.com.

Permalinks

The second thing I would like to talk about are permalinks which are also often called bookmarks. Permalinks are basically links back to a specific entry that will never change. This makes them ideal for bookmarking which is why it comes as no surprise that the following helps you establish a permalink/bookmark.

As you can see we once again use the relationship tag to define the Permalink. This is not always necessary however Ive found that certain social media sites use the bookmark relationship to determine if this link is a permalink or not.

RSS

Now last but not least there is the RSS feed. I could go on forever about the different formats and everything you can stuff into a solid feed, but i wont. The only thing i want to mention here is how to make your feed available to social media sites (seems to be the theme here). Basically what you do is use a combination of rel=”alternate” and type=”application/rss+xml” to define a META link to an RSS file.

Thats pretty much it. I hope that between the 3 things I’ve showed you and some of the resources ive presented you should have a social media friendly blog thats ready for the masses.

View: http://bishport.com/fog.html

Source: zip

View: http://bishport.com/flame3.html

Source: zip

Well it seems as if there are multiple cross-media technologies emerging from the web to help engage, interact and even entertain the user, therefor increasing conversions. People have seen XMPie and other related products do cool things with people’s names and putting them in the picture. But what if the user could change their name at runtime. Furthermore what if the users name wasn’t in a picture, but in a short movie. This is the future of PURLs as a response portal and will be a hit in the social media world. Already I was pointed to a website for a TV Show on FX and I was amazed at what they had done. Here is a PURL someone made for me. I like everything about it, from the page looking like a blog to my name being inserted into the movie.

Now here’s something my own company put together. Basically I wanted the user to be able to interact with the flash movie in real time from outside of the movie itself via the web-form. Using javascript, I was able to insert the users name into the newspaper at runtime and its had an amazing response. People need a break from their every day activities and these fun side trackers give them this opportunity, so both the user and the company win.

So I’ll say it now and say it loud. Get Interactive, Engage your Audience and become successful.