HYPERlinks: February 3, 2012

This week we have a wide range of cool links to share – from competitive coding to responsive notebooks to really nerdy plugins and CSS features.

And just for fun, because we love the internet:

“Every second one hour of video is uploaded to YouTube. Let’s visualize that.”

http://www.onehourpersecond.com/

Go Code Racer, Go!

http://coderace.me/

Pretend you are at one of Facebook’s Code-A-Thons and race to finish code challenges before your contenders while using special weapons to foil their process. Win awards, the right to gloat, and of course you may even learn a thing or two.

Who’s Hungry?

http://stylishwebdesigner.com/30-delicious-and-inspirational-restaurant-websites/

We are finally seeing a design shift in the restaurant industry for the better. View the link below to view 30 delicious and inspirational restaurant website designs. Most of the sites are showing large images of food to entice the potential customer.

Eliminate HTML Email Nightmares

http://www.emailonacid.com/

So, you’ve come up with a beautiful HTML email design that you’re happy with. Woo hoo! Before you start mailing it out, you’re going to need to test it. With Email on Acid, you can preview your email in 48 variations of the most popular email clients and mobile devices. Their code validation and analysis tools will help you identify rendering issues – fast! Please note, we do not recommend taking acid while using this application.

Using an .htaccess on your Apache server

http://net.tutsplus.com/articles/news/htaccess-files-for-the-rest-of-us

If you host your website on an Apache-based webserver, you may have seen a file called .htaccess in various directories on your server. This file can be modified to do all kinds of cool things – redirecting old page to new ones, restricting access to files, and custom error pages. This article from TutsPlus will get you started.

Allowing your images to be responsive

http://24ways.org/2011/adaptive-images-for-responsive-designs

You may have heard all the buzz lately about “responsive” web design — allowing your website to adapt so that it looks great on any screen size. One of the most challenging aspects of creating a responsive design is scaling images to different sizes. This article from 24ways has some great techniques that should help make your images look awesome.

Fun with QR Codes

http://speckyboy.com/2012/01/26/creative-uses-for-qr-codes

A hot trend over the last few months has been QR (Quick Response) codes, which allow you to scan the code with your smart phone to be taken to a website. This fun article takes a look at some more creative uses of QR codes out in the wild.

Gridpak – The Responsive Grid Generator

http://gridpak.com/

Gridpak is an online responsive grid generator that is “the starting point for your responsive projects.” The resulting download contains PNGs of each grid you created, CSS files that are IE8+-compatible but also contain more experimental CSS properties such as media queries, and a JavaScript file that allows you to toggle your grid on and off in a browser.

Responsive Design Sketchbook

http://appsketchbook.com/products/responsive-design-sketchbook

As invaluable as Gridpak may be in starting a responsive project, some of us like sketching things out first. This 50-page sketchbook priced at $12.95 helps make this easy. Each page in this sketchbook provides multiple grids for thumbnail sketches of various viewports and a grid showing break point indicators.

HTML5 Please

http://html5please.us/

Itching to dive into HTML5 and CSS3 but you’re not sure which features are ready for primetime? This site tells you what they are and how to use them.

Tutorial: Adding Fields to the WordPress Media Gallery

http://www.billerickson.net/wordpress-add-custom-fields-media-gallery/

Learn how to add custom fields to the media uploader in WordPress that allow you to attach additional meta data to images and other media. The examples in this tutorial show you how to add linked captions and how to specify which images you want to use in your gallery. Super useful ways to extend the gallery functionality!

PLUGIN: Additional Image Sizes

http://wordpress.org/extend/plugins/additional-image-sizes-zui/

Create additional image sizes (in addition to the predefined WordPress defaults: thumbnail, medium and large) for your WordPress site/blog. It will also re-size the predefined WordPress sizes if the size(s) in Settings > Media have been edited. This is great if you (or a not-too-tech-savvy client) want to be able to add an image of a specific size to a page or post using the media uploader, it will add your new custom size option to the uploader window.

Tutorial on How to Create CSS Box Shadows (box-shadow)

http://www.css3.info/preview/box-shadow/

This may be old news for some people, but here’s a tutorial with examples on all of the different ways to implement the box-shadow style, one of CSS3′s awesome features!

Share your cool web links in the comments!

Technorati Tags: box-shadow, coding, CSS, htaccess, HTML, HTML5, javascript, plugins, QR codes, responsive, responsive design, web design, WordPress, WordPress Plugins

There two components of your WordPress website or blog that require backing up:

1.) The site files — primarily images, and
2.) The database which contains all of the text content on your website.

Backup Buddy WordPress Plugin

I tried a number of different backup solutions that did one or the other of these tasks, but I had to use multiple systems to make sure the site and all of my content was getting completely backed up and stored somewhere safe.  Finally I found Backup Buddy, a premium plugin by iThemes. Backup buddy is an incredibly robust solution for backing up your WordPress site in it’s entirety.

Some of Backup Buddy’s key features

1.)  Backup

Backup Entire site
Backup Buddy backups up your entire WordPress  site including: WordPress install, widgets, themes, plugisn, sql database, htaccess.

Remote Backups
You can send the backup to your server, email it, send the backup somewhere via FTP or to a remote host such as Amazon S3, Rackspace Cloud or Dropbox.

Schedule Backups
Create multiple backup schedules and choose which elements you want to backup.

For example: you are a frequent blogger and want to have a backup of your database emailed to your account daily, but you are not doing many modifications to theme files, so you only want to do a full site backup monthly and have it sent to remote storage.

2.)  Restore

The restore function in BackupBuddy is super simple: just upload the importbuddy.php script and your backup file to the root of your server, and you will be taken through the steps to restore WordPress: your themes, widgets, plugins, and everything else.

3.)  Migrate

The Migrate function of Backup Buddy is one of my favorites! It makes the process of migrating an entire WordPress site to a new server or domain easy. This is a great feature for web developers who build custom sites for clients on a temporary domain or locally and then want to migrate the entire site to a live client domain.

4.)  Premium Support

Since backup buddy is built to work with such a variety of server configurations you may need to tweak the settings to make it work in your particular setup. But don’t be discouraged if it’s not working for you. Backup Buddy is a premium plugin, so the support forum is very active and the moderators are good about responding to questions.

At HyperArts we use Backup Buddy for many of our WordPress clients and it has proved to be a great solution for backing up, restoring and migrating sites.

VaultPress — A robust solution for ongoing realtime WordPress backup

However, for blogs or websites that are frequently updated, we use VaultPress which is another backup plugin by Automattic (the creators of WordPress). It’s a bit more expensive, but it is fully automated and creates backups in real time so that every time a change is made to your site, it is backed up.

To learn more visit their site.

Feel free to leave a comment and tell us if you’ve tried Backup Buddy, VaultPress or have another great backup solution.

Technorati Tags: Backup plugins, WordPress, WordPress Plugins

There are many available options for Facebook eCommerce (aka “F-Commerce”) and, although we don’t cover every Facebook eCommerce solution, we have included the most popular offerings and those that exemplify the various approaches to Facebook eCommerce.

What should you look for in a Facebook eCommerce solution?

Finding the best Facebook eCommerce solution will mean comparing several elements, all of which we will cover as we profile each eCommerce application and merchant:

• Pricing
• Where does browsing happen (on a tab or a canvas app)?
• Is the Facebook application a stand-alone shop or part of an existing eStore platform?
• How much custom design is allowed?
• Compatibility with popular technologies (read: Dependence on Flash)

Facebook Store Front vs. Facebook eStore

One of the most important questions to ask is where do the transactions actually happen? This is how we will organize the different applications and platform in this post, first presenting apps that are simply “Store Fronts” and then identifying the platforms that offer a fully functional “Facebook eStore.”

Facebook Store Front Options

(Users can browse products and click “Buy” or “Add to Cart” — They are then redirected to your eCommerce site to complete the transaction)

These applications are essentially portfolios of your store’s products, not really stores at all. A user can browse your products but when they click “Buy Now” or “Add to Cart” they will be taken to your eCommerce website to complete the transaction.

If you already have eCommerce on your website and you want to use a Facebook Store Front to drive traffic to your online store, here are some options:

• Miva Merchant
• Beetailer
• Fliptabify
• BigCommerce
• ShopTab

Miva Merchant — an Established eCommerce Brand

Pick products from your existing Miva Merchant store to display on a Facebook tab. You are essentially driving traffic to your website. The tab layout is clean and simple in the default template so your product images do all of the talking.

Pricing: $199 Default template / $399 Custom Template
Connected to Online Store? For use with a Miva Merchant store only
On Page Tab or Canvas App? Tab
Design Customization: Pay more for customization

Example:

Walleye Direct

Beetailer – “Bring your store to Facebook”

Beetailer offers both Store Front and full fCommerce services. Integrate your existing online store with this Facebook app and the actual purchase happens on your site. Or keep users on your Facebook Page to conduct the entire transaction. Compatible with various existing eCommerce platforms. Try it out free for 30 days and see if you like the features.

Pricing: First tier is free, with additional tiers for $50/$100/$300 per month (learn more)
Connected to Online Store? “Currently we support Magento, Magento Go, Shopify and Prestashop, and choosing the option Custom Store, you can create your Facebook Store even if you do not have any of these platforms.”
On Page Tab or Canvas App? Tab
Design Customization: Yes. See examples and contact them for more info.

Examples:

Nirvana
Sendra boots

Nirvana

Sendra Boots

Fliptabify- The Shopify eCommerce Platform Facebook Store

If you use the Shopify store software on your website, use the Fliptabify app on Facebook to offer a mini store tab to fans. This store is for browsing products only.

Pricing: Basic is free with Shopify, The Power Plan is $11.99/mo
Connected to Online Store? Yes, Shopify
On Page Tab or Canvas App? Tab
Design Customization: More customization if you pay:

“Additionally the Power Plan lets you:

• Enable Like-Gating to increase the number of Likes on your Facebook Page
• Choose which collections to show on Facebook (including hidden collections)
• Choose the default collection to display when users visit your Facebook store
• Select the number of products to display per page”

Example:

Bont Cycling gear

SocialShop2 — by BigCommerce. Integrate with existing BigCommerce Stores

Another simple shop for displaying your products on a Facebook tab. Built-in Facebook social plugins like the Recommend button allow shoppers to share their favorite products with friends.

Pricing: Free with BigCommerce plans. Starting at 24.95/month (learn more).
Connected to Online Store? Yes, must be a BigCommerce Customer
On Page Tab or Canvas App? Tab
Design Customization: Not much

Example:

Trice Jewelers

ShopTab – “Turn your Facebook Fan Page into a sales showcase”

Display items in a Store Tab but users are re-directed to your website in order to actually purchase products. More expensive packages include the option to fan-gate your store.

Pricing: Starting at $10/month (learn more)
Connected to Online Store? No, use your own online store platform
On Page Tab or Canvas App? Tab
Design Customization: Yes

Examples:

HerRoom
Fiji

HerRoom

Fiji

Facebook eStores

(Users conduct the entire eCommerce transaction within Facebook.)

These applications keep users on Facebook, allowing them to actually complete transactions — payment and all — without leaving Facebook. Some apps redirect the user to a Canvas App Page (away from the company’s Fan Page), and others require the shopper to accept a permissions request (the Facebook “Allow” popup dialog) before they are allowed to shop.

When to go with a Facebook eStore solution

If your goal is to keep users on your Facebook Page (or at least within the Facebook environment), then you should consider these options which are great for gaining more Facebook fans, especially if a Like is required in the shopping process.

Also, if you don’t already have an eCommerce-enabled website, then a stand-alone Facebook eStore may be a great option for you to sell your products.

We checked the following Facebook eStore solutions:

• 8th Bridge
• Milyoni
• Payvment
• Intuit SimpleStore
• TabJuice
• ShopIgniter

8th bridge — Previously called “Alvenda”

8th Bridge allows you to sell your products directly in their canvas application, or connect a tab on your Facebook Page to your own online store. Based on the example Clients that have listed on their site, this application seems to be very flexible and customizable. In most examples it looks like a custom tab on your Fan Page serves as a landing page that drives shoppers to Canvas App where they can complete transactions.

Pricing: Contact Sales for more info
Connected to Online Store? Connect to your online store OR use their eCommerce platform
On Page Tab or Canvas App? Tab and Canvas App
Design Customization: Very customizable

Examples:

Delta Airlines
1-800-Flowers

Delta Airlines

1-800-Flowers

Milyoni — “The Leader in F-Commerce”

This app displays products on a custom tab, directly on your Facebook Page, but when users click to view a product they are taken to a canvas app and must give the app permission to access personal information.

“The fan experience with the Facebook Store features personalization, social interaction and familiar shopping cart functionality. By leveraging information from the Facebook profile, merchants can create a personal mix of products in the store upon fan entry. Fans are given options throughout to share their shopping experience with friends, family and other fans. The Facebook Store from Milyoni can scale up to 75,000 items with unlimited number of categories.”

Pricing: Request a Quote
Connected to Online Store? Full “fCommerce” store
On Page Tab or Canvas App? Both
Design Customization: Yes

Example:

French Connection UK

Payvment – “Connect people, products, and conversations”

Users pay for goods directly on Facebook tab. Users must authorize the application before purchase. This fills in some personal information fields for the shopper, which is handy. Encourages users to share their activity with friends as they shop.

Pricing: First tier of service is Free, with 2 higher paid tiers (see more).
Connected to Online Store? No, this application is stand-alone.
On Page Tab or Canvas App? Tab
Design Customization: They appear to have an open API with support for developers (learn more).

Examples:

Adult Swim
Molly Sims Jewelry

Adult Swim

Molly Sims Jewelry

SimpleStore – by Intuit

Use Intuit’s eCommerce platform and add their Facebook store app to your page. The example store we found is an iFrame that appears to be pulling in a store that is too wide for the 520px maximum width of Page tabs. So it’s not very user friendly. This could be a bug or just an error on the part of the Page admin.

Pricing: “SimpleStore on Facebook is a free feature for all SimpleStore with Intuit Web Payment customers.”
Connected to Online Store? Yes, connected to Intuit’s eCommerce platform (30-day free trial, $34.98/month thereafter)
On Page Tab or Canvas App? Tab
Design Customization: Does not appear to be customizable

Example:

Arin Madison bows

TabJuice- “Complete eCommerce solution for Facebook.”

Purchase products directly on a Facebook tab through a secure checkout. This is a great app, without any visible scroll-bars, and no transfer to a canvas app. Using the app to browse products and add items to cart was easy. Seamless user experience.

Pricing: Free
Connected to Online Store? It can be, but TabJuice also offers eCommerce solutions for companies without online stores.
On Page Tab or Canvas App? Tab only.
Design Customization: Yes. Pick background images and color schemes.

Example:

DesignerSocial

ShopIgniter — “Engage customers through social promotions, storefronts and rewards programs”

ShopIgniter offers several programs to merchants that want to do more than just sell products. Reward your fans for purchasing and sharing. Track sales with analytics. The list goes on!

User experience: In order to see products on your Page Tab the user must allow the app to access their personal information. But after that they can browse and purchase products directly on your Facebook tab.

Pricing: Must request a demo to get pricing. Info not available on website.
Connected to Online Store? You can connect to existing platform if desired.
On Page Tab or Canvas App? Both Tab and Canvas App available
Design Customization: Lots of customization available.

Examples:

Alima
Kaenon

Alima

Kaenon

Which Facebook eCommerce / fCommerce is right for you?

One of the key aspects of a Facebook application is the built-in Facebook Sharing and Liking functionality. That could be the subject of a whole separate post!

Many of the above eCommerce solutions have the option of adding a Like or Recommend button to your store. If your goal is to gain new fans through the social shopping process, keep this in mind. When picking a platform make sure that you know your goals, and find the store that best meets those needs.

We would love to hear your opinions on Facebook eCommerce in the comments to this post. Tell us about your experience with these Facebook shopping platforms, or others that we left out.

Technorati Tags: 8th bridge, application, beetailer, canvas app, eCommerce, eStore, Facebook, intuit, merchant, miva merchant, payment, payvment, products, retailer, sell, shopigniter, social tab, store, tabjuice

This week we tried to avoid the temptation to share all of those “year in review” type articles. But Bill’s link to Web Design Ledger’s “Web Design Trends of 2012″ is a great list of design elements that you will be seeing all over the place. Jenni gets us excited about waking up early for CreativeMornings (San Francisco’s upcoming event sounds awesome!). Read on for more HYPERcool HYPERlinks…

Bill Dailey / Project Manager & Programmer

Web Design in 2012

http://webdesignledger.com/tips/web-design-trends-in-2012

Curious about the latest trends in web design? There is a great post over at Web Design Ledger listing emerging trends in 2012. Responsive Design is number one on their list, and has been a hot topic around the HyperArts office this week.

Taking Google Analytics To The Next Level

http://24ways.org/2011/getting-the-most-out-of-google-analytics

Many of you likely have Google Analytics tracking code installed on your web pages (and if you don’t, you should). This article from 24 Ways gives some great insight into how you can use GA to analyze what is happening on your website, and how you can improve it.

Fun with jQuery

http://www.catswhocode.com/blog/10-awesome-jquery-snippets

I love using jQuery, and this article gives from Cats Who Code has some great code snippits that do useful things – preload images, open all external links in a new window, and disabling the Enter button a form. Ah the magic of jQuery.

Swiss Modernist Design meets Punk Rock

http://www.swissted.com/

“A new graphic design style emerged in Switzerland in the 1950s that would become the predominant graphic style in the world by the ’70s. Because of its strong reliance on typographic elements, the new style came to be known as the International Typographic Style.

The style was marked by: 1) the use of a mathematical grid to provide an overall orderly and unified structure; 2) sans serif typefaces (especially Helvetica, introduced in 1961) in a flush left and ragged right format; and 3) black and white photography in place of drawn illustration. The overall impression was simple and rational, tightly structured and serious, clear and objective, and harmonious.” -InternationalPoster.com

Combining a love for this classic design style and punk/rock/indie music, graphic designer Mike Joyce created these re-interpretations of classic album covers. You can see the characteristics of International Style clearly. I really enjoy the bold minimalism in these pieces.

More on International Style: “Lessons From Swiss Style Graphic Design” by Smashing Magazine

The Noun Project: Free Vector-based icons, creative and informative…

http://thenounproject.com/

Maybe it’s because we’re in the middle of redesigning our own website (finally!), but I have icons on the brain. The Noun Project offers free vector-based icons that are creative, informative, and cool. The Project “collects, organizes and adds to the highly recognizable symbols that form the world’s visual language, so we may share them in a fun and meaningful way.” The download format is SVG which can be opened in Adobe Illustrator.

Because everyone, everywhere can benefit from good design

http://fab.com

My new favorite online shop, Fab.com, features daily design inspirations and sales at up to 70% off retail on the coolest items. You need to request membership to use the site, which shouldn’t be an issue considering the Fab.com team is “on a mission to be the world’s most valuable design resource.”

The only thing worth setting my alarm clock a few hours earlier

http://www.creativemornings.com/

CreativeMornings is a monthly breakfast lecture series for creative types. Each event is free of charge, and includes a 20 minute talk, plus coffee and baked goods! Once a month, hosts, videographers, photographers, and helpers come together, in their respective cities, to make the event happen. Don’t see CreativeMornings in your city? Contact the team to start a new chapter.

Wireframes on the fly

https://gomockingbird.com/

Mockingbird is an online tool that makes it easy for you to create, link together, preview and share mockups and wireframes of your website or application.

Technorati Tags: 2011, 2012, adobe, analytics, creative, design, development, fab, Google, HyperArts, icons, jquery, links, photoshop, tools, typography, web, wireframe

“Businesses can pay to feature a post so there’s a better chance you’ll notice it.” -Facebook

Facebook Ads Enter Your Feed

Facebook has quietly announced (to Inside Facebook here and in their Help Center here) that they will be rolling out a new form of advertising for Pages called Featured Stories.

Sponsored Stories have been a form of paid advertising for a while now, you can see them in the right column of the Facebook interface. They are stories that might normally appear in your News Feed (when a friend likes a Page, recommends something, etc) but they also might NOT.

Facebook has admitted that many stories get lost in the News Feed: “…a lot of impressions do get lost because there’s so much content coming through…” (via official Sponsored Stories page). The benefit of Sponsored Stories is that paying advertisers are able to harness the social nature of these stories, since Facebook users are more likely to pay attention to ads if they feature familiar faces and trusted names.

The only drawback is the location – in the right column of the Facebook interface. This is a space that most FB users know is for advertising. So we might ignore it automatically. But with the newly introduced Featured Stories, Facebook puts these paid ads directly into the News Feed.

But are they really “Ads”?

Here is an example of a new Featured Story via Ben and Jerry’s. In this case, the brand Page has published a normal Wall post but paid money to guarantee that it will appear in the feeds of their Fans:

via Inside Facebook

This story would not appear in your News Feed unless you had already Liked the Page. It feels different than normal advertising – which is often an unexpected and unwelcome bombardment. It’s more like enhanced Page-Fan interaction, since when you Like a Page you are essentially signing up to get updates from that Page.

“It is important to note that no story that would not have been eligible to show up in users’ feeds organically will become a Sponsored Story. Marketers can only pay for page posts to be featured in a user’s feed if the user has already liked the page.”- Inside Facebook, Jan 10, 2012

A Step-By-Step Explaination (Wait, how does it work?)

In Facebook’s Help section for this new feature they describe the process in which you might see one of these stories in your News Feed:

A quick example of how it works

• Say you like your gym’s Facebook Page.
• Some friends see the story in their news feeds, others may miss it.
• The owner of the gym can pay to feature the story so your friends are more likely to see it.

Who can see featured stories

You decide who can see what you share on Facebook. When a story is featured, it’s shown to the same people you originally shared it with.
Featured stories you may see

• When a Page you like posts something new
• When a friend likes something (such as a Facebook Page or individual Page post)
• When a friend checks in somewhere, plays a game or uses an app

Time to start complaining…

I am sure that there will be a lot of backlash over this new development. We have already heard from Fans on our Facebook Page Wall that this sort of brand promotion feels spammy. Users prefer to see stories from Pages that have gained traction organically and based on the quality of their content. Sites like Twitter already use this form of advertising (Promoted Tweets) but Facebook users seem much more protective of the purity of their content streams.

What do YOU think? As a Page Admin, do you feel that this might be a worthwhile investment of your money?

Technorati Tags: advertising, Facebook, featured, Featured Stories, paid ads, social media, sponsored, Sponsored Stories, stories

The problem is that Facebook doesn’t — at least at this time — create a link users can click to add an App to their Page which was the main purpose of the App Profile Page, a link that could be in the App Settings area.

In my previous article about the App Profile Page removal, I focused on how to code a link, using HTML, that when clicked provides the option for users to add an App to their Page.

In this article, I focus on how to migrate your App Profile Page to a Facebook Page so that all the Likes for the App Profile Page get transferred to the new Page, and how to add a custom tab on the new Page to allow users to add the App from that new Page.

Who actually NEEDS an App Profile Page?

If you’ve created your own iFrame Page Tab app, and you intend to just add it to your own Page, or perhaps to several Pages you admin, then you don’t really need an always-available “Add to My Page” link. I recommend following the instructions on my recent tutorial on adding Apps to Pages after February 1.

The need for a publicly available Page where users can go to add an App applies primarily to App developers who need to provide an add-to-my-page link, and I describe a way to do this, below.

Why did Facebook make this change?

This change is being done in order to reduce the number of Page types, as an App Profile Page was a sort of hybrid beast that served no purpose, really, other than to provide a place where users could go to add an App to their Page.

The migration option has been rolled out gradually and I only just recently saw the option at the top of the App Profile Page for TabPress:

I’ve now gone through the migration process and created this step-by-step tutorial to help others.

So how do you migrate your App Profile Page to another Facebook Page?

Actually, Facebook’s instructions on how to do this are quite clear.

If you are an admin of an eligible Facebook Page (must be of the Product/App category and match the app name), you will be prompted with the ability to transfer Likes to this Page. Transferring Likes will give you the ability to publish updates to these users from your new Facebook Page as you do today.

Please note that we will only transfer Likes, and not the content of these Pages. Before you go through the migration process, please ensure you have downloaded all photos, posts, Insights, and any other material that you want to keep. Once you hit the migrate button, the App Profile Page will be deleted.

App Profile Page Migration — Preparation and Requirements

• The target Page for migration must have the same name as your App: Before migrating, you must make sure you already admin a Facebook Page (NOT a Personal Profile) that has the same Page Name as your App. Otherwise, you’ll have to create a new Page that meets Facebook’s criteria.
  
  What exactly which name must the Page name match? In your App’s “Basic” settings, you’ll see there’s “App Display Name” and “App Namespace”:

  

  I named the Page I created for the migration “TabPress” and had no problems. So it appears that it’s the “App Namespace” that you have to duplicate for the Page name.

  NOTE: You can re-name an existing Page ONLY if the Page has fewer than 100 fans/likes. (See this Facebook Help Center article.)

  Because my App Profile Page had 200 Likes, I had to create a new Page for the App Profile Page migration, a Page with the name “TabPress.”

  NOTE: To create a new Page, go into the editing area of your Page. In the bottom footer links you’ll see “Create a Page” text link. Click to get started.

  

• Category: Brands & Products / App: The Page that you target for the migration of your App Profile Page MUST be set to the category “Brands & Products / App” under “Basic Information” in your Page editing area:

  

• IMPORTANT: As Facebook warns, ONLY Likes and the Vanity URL are migrated to the new Page. If you have any photos or other media on your App Profile Page you don’t want to lose, make sure you save them to your computer. AFTER THE MIGRATION IS COMPLETE, YOU’LL NO LONGER BE ABLE TO ACCESS THE OLD APP PROFILE PAGE!
• VERY IMPORTANT: IF your App Profile Page has a Vanity URL, it will transfer, along with the Likes, to the Page to which you migrate IF the Page to which you migrate doesn’t have a Vanity URL.
  
  If the Page to which you migrate DOES have a Vanity URL, the Vanity URL for the App Profile Page will now go to the app. This is my understanding of the explanation provided by Facebook’s Cat Lee, as well as the blog post about App Profile Page migration on the Facebook Developer Blog.

How to migrate your App Profile Page to a Facebook Page

Once you’ve confirmed that the Facebook Page to which you wish to migrate your App Profile Page meets the above requirements, you’re ready to do the migration.

1. In your browser go to the Facebook Developers site where, if you’re logged into Facebook, you’ll see a list of the Apps for which you’re an admin.
2. Click the App name in the left navigation, then click “Edit Settings”;
3. Under “Related links” in the left column, click “View App Profile Page”;
4. In the yellow banner announcement at the top of your App Profile Page, click “Click here to migrate to an existing Facebook Page” which will spawn a popup dialog:

   

   (NOTE: If you don’t yet see the yellow banner, then the change hasn’t yet rolled out to your particular app.)

   You should see the eligible Page in the “Choose a Page” pulldown list in the popup dialog.

   After selecting the Page and clicking the “Migrate” button, you should see this success screen:

   

   Although it says “allow up to 7 days for the Like migration to take place,” my migration began immediately. Each time I reloaded the page, the number of likes increased until they were all migrated.

5. NOTE: The URL for your old App Profile Page will forward to your new Page after you’ve successfully migrated.

“No Eligible Facebook Pages to migrate to” Error

If you get the following error:

the problem is that Facebook detects no Page you admin that has the same name as your application name.

Make sure your “App Namespace” name matches the name you’ve given the Page to which you wish to migrate the App Profile Page.

How does this work for new Facebook Apps you create?

When you are setting up your new App, you will no longer automatically get an App Profile Page. Instead, you’ll have the option of setting up the App Page in the “Settings > Advanced > Contact Info” area of your Dev App.

However, you don’t have to set up a special Page for your App. As I mention above, if you’re just creating an iFrame Page Tab app, then you should just follow the instructions in my previous tutorial on creating the Add to My Page link.

How we set up the new TabPress App Page

After I created the new TabPress App Page and completed the migration process, I simply added the TabPress iFrame App to the Page, changed “Welcome” to “Add TabPress to My Page” for the left navigation, and pasted in the code to create an Add-to-my-Page link, into both the non-fan and fan-only screens.

NOTE: Your old App Profile Page URL will automatically forward to the new Page you set up.

Good luck!

Additional Resources

• Facebook Developer Blog article on how to migrate your App Profile Page.
• Facebook username/Vanity URL FAQ

HYPERlinks: January 4, 2012

Happy New Year to you! We are excited about getting back to work in 2012 (not to say that we didn’t all enjoy 2 3-day weekends in a row…) and one of the most fun things we get to do each week is share some of our favorite industry links with you.

This week Jenni and Jason share links to websites and blog posts that might inspire some reflection on the past year – both on your own design work and the work of others. If you are feeling like Santa left your wallet nice and full, check out the premuim WordPress tools and icons sets recommended by Tim and Rachel.

Jason Amor / Facebook Designer & Developer

The Great Discontent

http://thegreatdiscontent.com

Inspiring interviews of artists, designers, musicians, and other creative types — all presented on a beautiful responsively-designed website.

Simple Desktops

http://simpledesktops.com

De-clutter your workspace by applying a simple, distraction-free desktop background.

FontShop: Best Typefaces of 2011

http://www.fontshop.com/blog/newsletters/dec2011c/

Take a look back at the best typefaces of 2011.

Rachel Tietjen / WordPress Programmer

2 Essential Premium WordPress tools

Use that Holiday money from Grandpa Bob to buy yourself one of the best WordPress frameworks out there. Throw in a much-needed security precausion – reliable backups of your site.

www.studiopress.com/themes/genesis
Genesis is a great premium wordpress framework (see my blog post) that allows for quick, seo optimized and highly functional theme development.

http://pluginbuddy.com/purchase/backupbuddy/
Backup buddy is the complete solution to your WordPress backup process. This premium plugin allows for regular scheduled backups of your entire site to your own server or a cloud service as well as offering tools for restoring and migrating your WP site.

Tim Ware / SEO, Web Design & Development

Website Backgrounds – Examples & Best Practices

http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

This Smashing Magazine article is an excellent overview of the use of backgrounds in Web designs, with examples and best practices.

Quality Icons for Print & Web – Overview by Think Vitamin

http://thinkvitamin.com/design/tips-for-finding-the-perfect-icon-set/

When you’re designing a website, there’s often the need for icons. There are many icon sets out there that are free and some that can be up to around $300. The more you pay, the more you get. And, of course, the more you pay, the less likely that a gazillion other sites on the Web will have the same icons!

The more expensive icon sets have more icons and they’re in vector format which allows you to scale them to any size, making them perfect for Web or print.

This Think Vitamin article is an excellent overview, with links to sets ranging from free to $279.

Jenni Schwartz / Designer

We’ve Come A Long Way, Baby

http://www.alistapart.com/articles/what-i-learned-about-the-web-in-2011/

Some of the industry’s most insightful people sharing what they learned about the web in 2011.

Hold On While I Google That For You

http://lmgtfy.com/

Being in the web industry comes with some unforeseen responsibilities. If you’re anything like me, your friends come to you with questions that they can easily Google themselves. I like to use “Let Me Google That For You” to kindly (or not) help them get a clue.

What Was I Thinking?

http://www.archive.org/web/web.php

Need a reminder of how much you’ve grown as a web designer/developer? Wayback Machine is a digital time capsule that enables users to see archived versions of web pages across time. Go ahead and check out what your website looked like in the beginning of the millennium. You are sure to have a giggle.

Please, share your favorite links of the New Year with us!

Technorati Tags: 2011, 2012, design, free, Google, icons, inspiration, Think Vitamin, WordPress

HYPERlinks Holiday Gift Edition: December 22, 2011

This week we share our best gift ideas for fellow Web designers and developers. Some of these gift ideas are practical tools for Web professionals, others are just plain funny. From books to iPad covers, these toys and tools will help you out as you work on the Web. Plus, now we know how Bill protects his Macbook from the Dark Side…

Jason Amor / Facebook Designer & Developer

Books for people who make websites

http://www.abookapart.com/
 
Give the budding web developer in your life the gift of knowledge. The latest publications from A List Apart include the most up to date information about HTML5, CSS3, Content Strategy, Responsive Web Design, Designing for Emotion, and Designing for Mobile.

V-Luxe iPad Stand

http://www.bknydesign.com/
 
If you watch movies on your iPad and consistently wake up with a mangled neck and sore arms, it’s time to invest in an iPad stand. Get this one, etc.

Megan Hornbecker / Front-end Developer

toggl

https://www.toggl.com/
 
“Time Tracking so easy you’ll actually use it.”
Seriously. You can track your time from your computer, tablet or phone; it’s easy to get started and it helps track all of your hours and minutes so don’t miss any billable time. Toggle integrates with Basecamp and Quickbooks. Toggle also has a handy section to budget time for tasks where you can view in real time actual hours worked compared to your estimated budget.

Analisa Svehaug / Social Media & Project Manager

Cosmonaut Stylus

http://www.studioneat.com/products/cosmonaut
 
“We love to sketch out quick ideas or doodle on our tablets, and using a stylus is much better than a finger for such tasks. The problem is, all the styluses on the market are designed to look and feel like a pen. But why? Writing or drawing on the iPad feels nothing like using a pen or pencil. The perfect tablet stylus is one that feels like a dry erase marker: fast, simple, low fidelity. ”

The Cosmonaut is a nice thick stylus that will work on most touch screen devices, including the iPad and iPhone. I like it because it reminds me of that chunky sidewalk chalk from childhood. Too bad you can’t play hopscotch on an iPad…
 

Embossed leather “Electric Library” smart cover for iPad 2

http://www.etsy.com/shop/punkassjim
 
Jim Thorpe is an old friend of HyperArts, and when we saw his classy iPad covers, we couldn’t help but want to share! Inspired by an old electrical handbook cover he found one day, Jim decided to make a similar cover for his iPad 2, using the title, “Audel’s New Electric Library” because, well, it makes perfect sense!

Jim carves the embossing plate by hand, presses the leather with his own “delightfully rustic method”, and then personally assembles and stress-tests the finished product. Each cover is unique, with its own slight imperfections and personality.

Jenni Schwartz / Designer

The Grablet

http://www.thegrablet.com/
 
The Grablet is a sleek, brightly-colored, multi-functional, multi-purpose case allowing you to transform the way you use your iPad. Designed to be modular in nature and brimming with attachments and uses…it lets you attach, hang, hook, suspend, and simply use your iPad safely and securely. My favorite part is the adjustable straps that allows you to custom fit the Grablet to your own hands!

Bill Dailey / Project Manager & Programmer

Yoda USB Desk Protector

http://www.thinkgeek.com/computing/usb-gadgets/d514/

Every designer or developer needs a special friend to keep watch over their prized electronic possessions. Never worry about leaving your Macbook unattended again.

Tim Ware / SEO, Web Design & Development

Keyboarding Gloves

http://www.freehands.com/categories/Collections/#Menu
 
In our finger-driven culture, the ability to communicate via keyboard is crucial, come sleet or snow. Freehands.com offers a variety of keyboard-friendly gloves to keep your digits moving in the cold.

Gmail USB Keyboard

http://www.gboard.com/
 
If you’re a frequent Gmail user, the Gboard, a Gmail-specific USB keyboard, is just the ticket. The 19 keys represent the most common actions performed in Gmail. And it’s only about $20!

Booq Laptop Bags

http://www.booqbags.com/All-Products/Mamba-laptop-bags/Mamba-shift-L-black-laptop-backpack
 
I bought one of these at Macword a few years ago and I love it! The Mamba Shift, around $150, is perfect for safely transporting your laptop while biking, and it can also be carried by its top handle (the back straps are removable).

One thing I really like, besides how well made and beautiful it is, is the variety of storage pockets inside and out, without looking goofy.

 
 
Happy Holidays from the HyperFolks!

Technorati Tags: gifts, give, holiday, holidays, links, share, tools, toys

HYPERlinks: December 14, 2011

This week both Tim and Jenni have links about Responsive Web Design that are must-reads for developers working on sites that need to look good on any screen, from a desktop monitor to a smart phone. Jason shares some HTML5 resources and fixes for IE stubbornness. Analisa is in love with the Pandr‘s color tool, you will see why…

Thanks for following our weekly link series, we have fun picking the best links to share with you!

Jenni Schwartz / Designer

Responsive Web Design

Responsive web design is a hot topic these days. From desktops to mobile browsers to netbooks and tablets, users are visiting web sites from an increasing range of devices and browsers. Are your designs ready?

The term “responsive web design” is related to the concept of developing a website design whereas the layout changes according to the user’s screen resolution. The practice consists of flexible grids and images and an intelligent use of media queries.

50 Gorgeous Responsive Web Design Examples:
http://designmodo.com/responsive-design-examples/

Techniques in Responsive Web Design:
http://www.webdesignerdepot.com/2011/11/techniques-in-responsive-web-design/

Tutorial: A Basic Responsive Grid (plus handy CSS3 media quiery reporter)
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/

Tim Ware / SEO, Web Design & Development

Responsive Design & Facebook

With people increasingly viewing websites on devices of many sizes and shapes and resolutions, the Responsive Design approach—one design that adapts to various displays via HTML5 and CSS3 —is really building steam. This article on the Facebook Blog looks at it in depth: http://developers.facebook.com/blog/post/599/

Comparison of CMS Platforms

There are a gazillion Content Management System (“CMS”) options out there, but WordPress, Drupal and Joomla lead the pack. Here are a couple sites that compare them, by features and by popularity/usage.

WordPress vs Drupal vs Joomla

Usage of content management systems for websites

Jason Amor / Facebook Designer & Developer

HTML5 Reset

On your next HTML5 project, rather than starting from scratch and hacking your way through the haunted forest of browser inconsistencies, consider starting with an HTML5 template. There’s a few boilerplates out there, but the two most popular are HTML5 Boilerplate (http://html5boilerplate.com/) and HTML5 Reset (http://html5reset.org/). These jump-off points create a level, HTML5-compatible playing field for your web project.

HTML5 Placeholder Fix for IE

Speaking of HTML5… one of my favorite things is the Placeholder feature, which allows you to specify placeholder text for your input fields. This way, you can display what field something is by showing text inside of the input field, rather than alongside. Once the user clicks in the field, the text is replaced with a cursor. Unfortunately, IE doesn’t even pretend to care about this functionality, so you have to fix it with jQuery. This post shows you how: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Native Form Elements

http://nativeformelements.com/

Form elements don’t look the same in everywhere. If you want to see what they will look like in certain browsers, just visit nativeformelements.com in the browser you’re wondering about. This is especially useful for design mockups. Just screenshot a form element and toss it into your PSD.

Analisa Svehaug / Social Media & Project Manager

The Pandr Color Tool

http://wearepandr.com/labs/colour_bookmark

It’s a bookmarklet, it’s a website, it’s a color palette detector! Pandr, web design company from the UK, developed this awesome tool that you can use as a bookmarklet in your browser, or just copy and paste a URL into the web page. When using the bookmarklet you can instantly see the color scheme of any website* you visit. Or paste the URL into their site and see the range of colors being used.

*If the site does not have a style sheet, the tool might not work. We tried on Google and got an error message.

Designer Resource – Free Social Media Icon Sets

http://www.designdeck.co.uk/s?cat_type=icons

Design Deck has some great free PSDs, icons and other resources for designers. I especially love their social media icon sets. Most of them are simple, clean, and work well on most sites. Browse through their collection of icons suites and see what you think.

Redesigns of Major Social Media Websites

In the last few weeks we have seen several big social networks unveil major design overhauls (or promise them, and not deliver…ahem, Facebook Timeline anyone?). Here are 3 significant ones that you have probably already seen. It’s interesting to see how these social industry leaders approach UX and overall design on sites that get a lot of use and traffic. Plus, mobile is a huge part of their markets now, so you can see how that influences design and interface structure. Twitter, for instance, rolled out the mobile update first (we are still waiting on the website update).

Twitter
YouTube
StumbleUpon

Stay tuned, next week will be a special holiday gift edition of HYPERlinks!
 

Technorati Tags: color, design, drupal, Facebook, HTML5, icons, Internet Explorer, joomla, jquery, pandr, photoshop, responsive web design, social media, stumbleupon, Twitter, WordPress, youtube

UPDATED Dec 14, 2011: I added a (heavily edited) discussion thread from the Developer Blog post that addresses the transferring of a Vanity URL to an existing Fan Page, and user questions around this. See below….

On Friday, Dec 9, 2011, Facebook announced that as of February 1, 2012 they are removing App Profile Pages, to be replaced by a much easier method of adding apps to pages.

Today, we are announcing that we will remove all App Profile Pages on February 1st, 2012. Though similar in appearance, the automatically generated App Profile Pages differ in features from traditional Facebook Pages, and over time the inconsistencies between the two, such as different Insights, APIs, and distribution channels, have become more apparent.

(See the discussion with Facebook’s Cat Lee, below….)

What takes the place of an existing App Profile Page?

You’ll need to migrate your App Profile Page to “an existing Facebook Page with the same name and of Product/App category.”

If you are an admin of an eligible Facebook Page (must be of the Product/App category and match the app name), you will be prompted with the ability to transfer Likes to this Page. Transferring Likes will give you the ability to publish updates to these users from your new Facebook Page as you do today.

Please note that we will only transfer Likes, and not the content of these Pages. Before you go through the migration process, please ensure you have downloaded all photos, posts, Insights, and any other material that you want to keep. Once you hit the migrate button, the App Profile Page will be deleted.

How does this work for new Facebook Apps?

When you are setting up your new App, you will no longer automatically get an App Profile Page. Instead, you’ll have the option of setting up the App Page in the “Settings > Advanced > Contact Info” area of your Dev App.

However, you don’t have to set up a special Page for your App.

Benefit: Now you can place a “Add App to My Page” dialog on any Web page or Page Tab

Instead of setting up a special App Profile Page, you can now embed an “Add App to My Page” (or whatever dialog you want) on your Facebook Page tabs or — better still — on your website.

Tab or Web page visitors can then add your App to their Fan Pages right from your Tab or Web page!

In this example, I used this code:

<a href="#" onclick=window.open("http://www.facebook.com/dialog/pagetab?app_id=176217385757369&next=http://tabpressapp.phpfogapp.com/content/pages/","PageTab","width=800,height=500");>Add TabPress to Your Fan Page!</a>

to allow users to add our TabPress iFrame Page Tab App to your Fan Page from this article: Add TabPress to Your Fan Page!

What value do I use for the “next” URL parameter?

For the “next” parameter URL — which is where the user will be redirected after adding your App to a page — must be:

• The “Page Tab URL” or “Canvas URL” for your App, as specified in your App settings;
• http://www.facebook.com/connect/login_success.html;
• http://www.facebook.com/ (ONLY the home page! Fan Page URLs or Page Tab URLs WON’T work!)

Any other value will most likely result in the dreaded “Error 191″:

However, if you use one of the above URLs, you should have success.

If you just need to add your App to one Page

If your App is a Page Tab you only need to add to your Facebook Page, and not an App that you want to make available to multiple pages, you can simply navigate to this URL in your browser:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace “YOUR_APP_ID” with your App ID and “YOUR_URL” with your App’s Canvas URL, both of which values are available in your app settings.

You’ll see a page similar to this the one below when you navigate to that URL:

Simply select the Page to which you want to add the App, click “Add Page Tab” and it’s done!

Why doesn’t Facebook also provide an “Add to my Page” link in the Dev App area?

This is puzzling. Facebook has created a great feature — the ability to place an “Add to my Page” link on websites and Page tabs, and a way to create a URL that allows the creation of an Add to my Page right from the email!

But they should still provide a link, say in the Dev App area (where you create and edit your app), as well as add this feature. I am guessing they will do that.

A Discussion with Facebook’s Cat Lee about Migrating the App Profile Page to an Existing Fan Page and Transferring Likes

I decided to simply transcribe, and edit, this discussion thread on the Facebook Developer Blog. The commenters asked a number of great questions and Facebook’s Cat Lee did her best to answer them….

NOTE: I’ve added a detailed step-by-step tutorial on migrating your App Profile Page to a Facebook Page.

Mase Sameh: What if the Vanity URL of my app profile is the one that I want to use but the Fan Page I”ll be migrating to is already have a Vanity URL?

For example: My app profile is “facebook.com/MafiaWars” but my Fan Page that I’ll be migrating to is “facebook.com/MafiaWarsFans” and of course I’ll want to use “facebook.com/MafiaWars” as my official app page+profile?

Cat Lee: You will need to first lose the Vanity URL for the Fan Page to migrate the Vanity URL from the app to the Fan Page automatically.

Mase Sameh: Cat Lee Thanks for your reply. How can I “lose” the current vanity URL for the Fan Page?

Cat Lee: I’m sorry, I misspoke. Looking at this Facebook Help Center Q&A, it doesn’t seem possible to change/get rid of a username on an existing Page.

If you really want to keep the username of the App Profile Page, the only thing you can do is to create a new Facebook Page of category Product -> App without a Vanity URL and migrate the Likes there.

Mase Sameh: Wow! So I have to lose more than 27,600 likes my app Fan Page got over the last year because I can’t use the username I already got for my App Profile Page. So Zynga will also lose its Apps vanity URLs such as: “facebook.com/MafiaWars”, “MafiaWars2″, “FarmVille”, etc… just like the rest of us?

Please Cat, try to figure out a solution for this or let us decide which vanity URL we would like to use (the App Profile Page URL or the Fan Page).

Cat Lee: You don’t necessarily have to lose the Likes. We will transfer the likes, just without the Vanity URL.

Mase Sameh: I guess you’re missing my point. Let’s say my page is “facebook.com/AppFans” on which I have about 27,600 likes, because it’s the one I used on my website and every other place to gather the fans.

But the App Profile Page is “facebook.com/App” which got about 6,000 likes but it also has the best vanity URL for my app which is the app name itself.

I want to migrate to the Page with 27,600 likes but will use the vanity URL of the App Profile Page (“AppName”). Again, it’s the same as Zynga did with its first games like “MafiaWarsFans” but the App Profile Page is “MafiaWars” so will Zynga lose the vanity URL “MafiaWars” or will it lose all the fans on “MafiaWarsFan”s just to use the App vanity URL “MafiaWars”?

Phoxer Roberto Baglieri: Cat Lee But we will lose the “username (vanity URL)” of the apps.. like @Mase Sameh says???.

Israel González Fernández:
Cat Lee Couldn’t agree more with Mase…let us at least decide which of our vanity URLs (the app’s or the page’s) we’d like to keep!

Cat Lee: Why not create a new Page for the app itself and transfer the vanity URL along with the Likes? This seems no different than maintaining the App Profile Page along with the Facebook Page that you already have.

Mase Sameh: Cat Lee – Because this is a golden opportunity for all developers to unite both their Fan Page and App Profile Page under one page. Unfortunately, most of developers including Zynga choose to use the app name for the App Profile Page and not the Fan Page.

Cat, I think it will be very easy to give developers the possibility to choose between one of the two vanity URLs. Regarding you suggestion, if you suggest that we have two pages if we want to keep our app vanity URL why is facebook removing profile pages in the first place?

Israel González Fernández: Cat Lee, Are you suggesting we create a third Facebook page just to transfer the App Profile Page’s vanity URL? The whole problem comes when developers already have both an App Profile Page and a Fan Page for the app fans. If we transfer App Profile Page stuff to the Fan Page we lose our preferred vanity URL (the app’s). And if we create a different page, then we can transfer the vanity URL from the app’s one but then we would lose all the fans we already have in the Fan Page!

Where is the “Transfer Likes” Feature?

Phoxer Roberto Baglieri: Cat, I have made a new app (page) with the same name of my app. but I can’t see the button to transfer “likes” to the new app page.. how to do that?

Cat Lee: This feature is slowly rolling out to all developers. If you don’t see the banner, it’s probably because it hasn’t rolled out to you yet. You’ll be seeing it in the coming weeks.

Join the Discussion!

I’m sure there will be lots of questions around this as it’s rolled out. I’ll update this article as the situation develops. And feel free to post questions or comments here.

Additional References

Facebook Developer Blog article on how to migrate your App Profile Page.

Technorati Tags: App Profile Page, Facebook application tab, facebook programming