The Manage Pages feature is now gone. We now have a new replacement called Use Facebook as Page. Facebook users now has the ability to interact within Facebook as their own Fan Page. This new upgrade brings new and exciting opportunities to increase your Fan Page’s reach and a higher level of engagement.

With the new Use Facebook as Page, administrators now has the ability to do the following:

"So what happens exactly when I activate Use Facebook as Page?", If you manage multiple fan pages you will be presented with a list of them similar to what you saw when Facebook had Manage Pages. You then click on switch and your profile will change from your default personal Facebook profile to your Fan Page profile. Don’t worry you will have the ability to switch back to your original profile any time you want.

With the new found freedom to like and comment on other pages as your page, it increases a fan page’s visibility to similar or other niches that you’ve never thought of before. Just imagine how many more fans you’re going to get because of this. It gives you the ability to experiment on other target markets and certain demographics. This ability to engage with other Pages, in my opinion will add to your brand’s value as an authoritative figure. So long as you leave valuable input as comments versus spamming everyone to come check out your page.

Based on my testing, as long as your profile is switched to one of your Fan Pages you will not be able to engage with any Like buttons outside of Facebook.

That’s just a quick overview of what’s in store. Check out below for the new look and feel of our beloved Facebook Fan Page.

By the end of March all Facebook Fan Pages will change to the new design. So what do you guys think? Share your thoughts and comments below!

Related Posts

• Your Facebook Account Has Been Hacked
• Add Facebook ‘Like’ Button on Your Website

Discover how you can deliver a much richer experience for your audience by increasing the level of engagement on your website using a revolutionary WordPress plug-in. We’ll show you how to install this plug-in and get it setup with your WordPress blog. Then get your readers to start conversations on a contextual level revolving around words, sentences and images found on your website.

The Highligher plug-in is the latest offering from the masterminds behind Unique Blog Designs. Below is a quick video overview of what the hype is all about.

Most blog readers are used to leaving comments at the bottom of each post. This traditional way of commenting can get frustrating especially on popular posts where you will need to scroll all the way down just to leave a comment. It can also be cumbersome when you’re trying to follow specific conversations and there’s no easy way to visually identify the topic and the involved parties.

With the Highlighter, readers can now highlight any word, sentence or image and immediately leave a comment right there and then (see Figure 1.0). Additional sharing options are also available particularly via Email, Facebook and Twitter. The beauty about this is that other readers will see which words, sentences and/or images have been highlighted and can just easily mouse over them to view the comments.

Figure 1.0 – Highlighter sharing via Comment

Publishers need not worry as the plug-in offers support for Akismet spam filtering to battle those annoying spammers and also supports comment moderation.

One of the most powerful features of Highlighter is its ability to capture your reader’s email address and get it automatically added to your email list. As of this writing only Aweber, MailChimp and GetResponse are supported. For Campaign Monitor users have no fear, I did get in touch with Highlighter’s Co-Founder Matthew Blancarte a couple of days ago and here’s what he had to say,

"We actually have someone in our community that is looking into building this feature by next week! Please visit this thread to stay up to date. "

Highlighter not only makes your readers happy by enriching their engagement experience, it also increases the publishers opportunity to monetize their sites. The best part of it all is that this plug-in is free!

How To Install and Setup Highlighter in WordPress

This tutorial is only targeted for self-hosted WordPress blogs.

STEP 1: Download Highlighter

STEP 2: Log into your WordPress account (www.yourdomain.com/wp-admin) and on the left column under Plugins, click on “Add New”.

STEP 3: Under the Install Plugins click on “Upload”.

STEP 4: Browse to your downloaded zip file called Highlighter.zip.

STEP 5: Click Install then Activate.

In five easy steps, you should have Highlighter downloaded and activated. Now let’s get it setup so your readers can start Highlighting!

In your WordPress Dashboard, you should now have a Highlighter menu option on the left menu. Click on it to access Highlighter’s setup options.

General Tab

Under the General tab, you have the option of selecting an email marketing provider. Depending on what you select you may need to get your respective email list name, email list ID and/or API Key.

Appearance Tab

Under the appearance tab you can change the highlight colour and as of this writing there are only two available colour schemes.

In the next section, I’ve enabled the Count Chiclet (see Figure 2.0) which will appear above your posts. I’ve also enabled the Highlight Box (see Figure 3.0) which will appear below your post. It is important to specify a certain width to accommodate your page layout. In the following example, I’ve set the width to 570px.

Advanced Tab

In the advanced tab, make sure to tick the first two boxes to enable Akismet spam filtering and highlight/comment moderation.

If you’ve configured everything correctly, you should now be able to highlight any word, sentences and/or images in each of your blog post page and have the highlighter pop-up menu come up.

You should also have the following components installed: Highlighter Widget, Highlighter Count Chiclet and Highlighter Highlight Box.

Figure 2.0 – Count Chiclet showing one highlight

Figure 3.0 – Highlight Box

Quick Tip For The Technically Inclined

It is important that

<?php wp_head(); ?>

and

<?php wp_footer(); ?>

are called inside your header.php and footer.php files respectively. Otherwise Highlighter will not work.

That’s all there is to it! Happy Highlighting!

Photo by: Just Jefa

Related Posts

• Google AdSense Ninja Tactics
• Widgetize your WordPress Sidebar
• Install Google Gears for WordPress
• Learning WordPress

Discover how you can easily create fresh looking buttons with CSS3′s box shadow, text shadow, border radius and with the exciting RGBA properties. We also show you how to get that subtle shiny button effect using Adobe Photoshop.

TUTORIAL FILES

PREVIEW

Below is what we’re after under supported browsers.

On the other hand this is what we’re least impressed with under unsupported browsers.

The CSS3 Code

/* CSS3 /////////////////////////////////////////////////////// */
/* Inspired by the geniuses at ZURBs Playground /////////////// */
/* button ----------------------------------------------------- */
.fresh_button {
	background: #222 url(img/fresh-button.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	border-radius: .5em;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0,0.25);
	position: relative;
	cursor: pointer;
	}
	.fresh_button:hover {
		background-color: #111;
		color: #fff;
		text-decoration: none;
	}

/* sizes ------------------------------------------------------- */
.large { font-size: 1.4em; padding: 8px 14px 9px; }
.medium { font-size: 1.3em; }
.small { font-size: 1.1em; }

/* colours ----------------------------------------------------- */
.orange { background-color: #F36E21; }

<a class="large fresh_button" href="#">Fresh Button &#187;</a>
<a class="large orange fresh_button" href="#">
        Fresh Button &#187;</a>
<a class="medium orange fresh_button" href="#">
        Fresh Button &#187;</a>
<a class="small orange fresh_button" href="#">
        Fresh Button &#187;</a>

We use an em instead of px for our border radius for scalability.

-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;

The same reason we need to use RGBA to set our shadow colours instead of using a static hex code like #222222 which doesn’t scale well.

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

If you omit the RGBA then you will get an undesired shadow effect in darker backgrounds similar to the screenshot below.

We could have used progid:DXImageTransform.Microsoft.gradient, -webkit-gradient and -moz-linear-gradient to achieve our button’s gradient effect but using a single PNG file as a background is easier and a lot more fun to implement.

background: #222 url(img/fresh-button.png) repeat-x;

How To Create The Button Gradient

STEP 1

Create a new web file in Photoshop and give it 200px width, 30px height and a transparent background. Rename the first layer to bg and create a second layer called shine.

STEP 2

Fill the bg layer with a solid colour like #222.

STEP 3

Press G to access your Gradient Tool. Change your foreground to #FFF and select Foreground to Transparent as your gradient preset. Create a gradient starting at the top of the button while holding down SHIFT. You can adjust the opacity to get the desired effect.

STEP 4

Press C to access your Crop Tool. Change the crop width to 1px and crop height to 30px. Now make your crop selection. Disable the visibility of the bg layer and now you’re ready to save the file as a PNG.

You can set your height to any pixel value greater than 30px when creating your own gradient background back in STEP 1. You can adjust the gradient background’s vertical position via CSS to accommodate the gradient’s varying intensity.

background: #222 url(img/fresh-button.png) repeat-x 0 -10px;

That’s it you’re finished.

Many thanks goes to ahisgett for supplying the main photo for this post.

Related Posts

• Create a Custom GoogleApps Login Portal
• Create a Christmas Tree Vector Collage
• Recreate The 9rules Logo

One lucky winner took home his very own copy of Adobe Creative Suite CS5 of his choice during the Adobe CS5 Roadshow 2010 that was held at Adelaide Hilton in South Australia. Hurry and register for the last two shows remaining in Australia for your chance to win a fantastic suite of creative tools.

AGENDA

Adobe roadshows in Australia and New Zealand are especially designed to help you realize the best of CS5. From innovative tools to enhanced workflows, cross-media solutions to diverse content delivery, CS5 paves the way for efficiency, creativity, code-free interactive content and more. What’s in store?

9.30 – 10.00am WELCOME & TASTING PLATE

Opening the show with fanfare and flourish, Adobe experts will give you a glimpse of what the day will hold, with a rush of amazing "tasters" to get your creative and developer taste-buds watering…

10.00 – 10.45am THE NEED FOR SPEED – WITH ADOBE 64 BIT VIDEO

Packed with innovations like native 64-bit support and the new Mercury playback engine that dramatically increase productivity, Adobe’s video tools up the ante with industry-leading performance breakthroughs and amazing tools that accelerate post-production.

New features let you express your creativity like never before, and new products help streamline planning and production workflows. Collaborate efficiently by easily integrating CS5 Production Premium into existing production workflows.

See the top five features in After Effects and Premiere that re-define what is possible in video tools.

10.45 – 11.15 BREAK

11.15 – 1.00pm THE FUTURE – IMMERSIVE EXPERIENCES ON NEW DEVICES

See the latest comprehensive Flash platform toolset – three unique Flash tools, each designed for a specific purpose: create immersive experiences with Flash Catalyst and RIAs with Flash Builder. Develop for existing standards, new frameworks and integrate advanced imaging technologies with new functionality in Web Premium CS5. Streamline critical processes with the new CS Live Web Online Services and save time in design and development. The team will present the Top 5 features of Dreamweaver, Flash Builder and Flash Professional that will dramatically improve modern development workflow.

1.00 – 2.00pm LUNCH BREAK

2.00-4.00pm DESIGNING FOR MULTIPLE SURFACES!

See the latest ground breaking tools for designing for multiple "surfaces" with CS5 – including print. Today, there are a huge variety of devices, and more being announced every day; your audience chooses when, where and how they consume the content you create.

Learn how you can create the work you do today more efficiently, and deliver to this ever expanding array of media devices, including ‘traditional’ print. Learn how CS5 can help reduce the time and cost of creating content – including interactive content, – by using the skills you already have to create digital content for devices. Understand more about Adobe’s brand new product Flash Catalyst – what it does and what it means to the design community (apart from creating great business opportunities)!

You’ll also be able to see the amazing top five features in InDesign, Illustrator, Flash Catalyst and Photoshop that will change forever how you work with these tools!

4.00 – 4.30pm TOP FEATURES SHOOT OUT

30 minutes of fun frantic activity, as you are bombarded with tips, hidden favourites, personal techniques and surprise "Easter Eggs".

PHOTOS & VIDEO CLIPS – ADELAIDE HILTON

View the entire YouTube playlist

Overall it was a great event! It was wonderful to meet new people and to be able to network with future project collaborators was priceless. I wouldn’t mind trying to register for the last two shows until I get my hands on a nice shiny box of Adobe Creative Suite CS5.

REGISTER

8TH JUNE – BRISBANE HILTON

REGISTER

10TH JUNE – CANBERRA-NATIONAL CONVENTION CENTRE

REGISTER

Visit Adobe’s website for more details

Random Posts

• Create the Twitter Icon in Illustrator CS4
• Use Facebook as Your Page
• Go GaGa on These Twitter Pages
• Widgetize your WordPress Sidebar
• Create a Christmas Tree Vector Collage
• Google AdSense Ninja Tactics
• How to Create a Twitter Icon

Today marks the 30th birthday for our beloved classic 8-bit arcade game PAC-MAN. Google one of the greatest innovators of our time has put together a nice surprise for PAC-MAN fans to honour this celebration. Just head over to Google’s home page and insert coin to start playing! Insert coin twice and discover another birthday surprise.

Prepare yourself for some 8-bit entertainment.

HOW TO PLAY

• Wait for the game to load upon visiting Google’s homepage.
• Click on Insert Coin to start the game.
• User arrow keys on keyboard to navigate.

EASTER EGG

Click on Insert Coin twice and MS PAC-MAN will join in on the fun for some 2-player game action. You can control MS PAC-MAN via the WASD keys on your keyboard.

WARNING

The game is extremely addicting and will make you go WAKKA-WAKKA out of your mind!

This has been a blast so far today and there is no sign of me stopping. Just try playing PAC-MAN and MS PAC-MAN at the same time all by yourself! It’s so fun.

Until next time, Happy Birthday PAC-MAN!

A big shout-out goes to adactio for supplying the top photo for this post.

Related Posts

• SEO Copywriting is The New SEO Strategy
• Google AdSense Ninja Tactics
• Create a Custom GoogleApps Login Portal
• Install Google Gears for WordPress

Frustration sunk in deep as Mozilla Firefox 3.6, Google Chrome and Internet Explorer 8 all failed to render the Windows font version of Helvetica Neue properly. Upon further investigation and some screenshots later you will too discover the ugly truth behind Helvetica Neue.

Recommended Reading

Many websites like Mashable and UserScripts.org have their font settings set to font-face: 'Helvetica Neue', Arial, sans serif;. Many Windows users have reported that Helvetica Nueu appears to be very fuzzy when browsing on these websites. My test system is running Microsoft Windows Vista and based on the screenshots below three of the major browsers on the market today do fail horribly in their attempt to render the typeface properly.

Mozilla Firefox 3.6

Even the acclaimed Gecko engine fails to deliver. The font looks very fuzzy and unreadable.

Google Chrome

Google’s version of WebKit also fails to render the font properly.

Internet Explorer 8

ClearType renders it a bit better than the previous two browsers but it’s still looks way too small.

Safari 4

Safari performed the best out of the four. Safari’s WebKit saves the day!

There is an ongoing trend and it’s not slowing down on the heavy use of Helvetica Neue as the primary font when setting up a website’s styling.

The current workaround if you’re tech-savvy enough is to use Firebug to tweak the font-face: 'Helvetical Neue', Arial, sans-serif; to font-face: Helvetica, Arial, sans-serif; right on the browser’s interface. Alternatively if you’re using a font manager such as Suitcase Fusion then you can temporarily deactivate the offending typeface. The other workaround is to download an add-on called Greasemonkey and install a script called Kill Helvetica.

A quick rough dive into how Microsoft and Apple differs in their implementation of a font rendering algorithm called sub-pixel rendering may shed some light into this issue.

Sub-pixel rendering is just another fancy name for font smoothing or anti-aliasing. Let’s take a look at the screenshots below to see how Apple’s sub-pixel rendering differs from Microsoft’s ClearType.

Microsoft’s Rendering via Internet Explorer 8

You will observe that the rendered font looks sharper where each pixel is forced to fit into the pixel grid hereby to increase readability but losing its original look.

Apple’s Rendering via Safari 4

Here the rendered font looks more blurry on the edges making it look appear thicker but smoother and easier on the eyes.

Throwing it into the mix is CSS3′s @font-face. Will this fix our woes? Let us know what you think.

Random Posts

• Leave a Code Snippet In Your Blog Comments
• Adobe CS5 Roadshow Australia
• Engage Your Audience with Highlighter
• Learning WordPress
• SEO Copywriting is The New SEO Strategy
• Create a Christmas Tree Vector Collage
• Use Facebook as Your Page

Facebook recently announced a new security feature that will allow their registered users to approve devices that they use to log into their account. Users has the option to get notified either by email, SMS or through their account if a malicious login has taken place. Discover how you can enable this feature and add an extra preventive measure to deter your would-be hackers.

Recommended Reading

In addition to the notification feature, Facebook will try to prevent any logins from unapproved devices by asking the person a verification question such as your birth date or answer a security question that you’ve previously provided.

FREE SEO Copywriting Ebook

Go ahead and download this free 29-page report written by Brian Clark of Copyblogger. This is the most comprehensive report that’s ever been written on this topic so make sure to grab your copy and discover the newest SEO strategy today.

Related Posts

• Add Facebook ‘Like’ Button on Your Website
• Use Facebook as Your Page