August 2010 – Reverb Studios Design

Add a Contact Form to Facebook

I bet you’re like me and thought this should have been fairly easy right!? Wrong. Unless I missed something fairly obvious, there doesn’t seem to be an easy way to do it without the help of either a web developer/FBML expert or external apps/sites. The first obvious thing I tried was searching for Facebook Form apps but nothing turned up. Secondly, I tried pasting some of the code from my own site forms including offsite code from my Blog Newsletter (which normally works anywhere) into an FBML app tab and presumably due to FBML or Facebook restrictions, that was rendered useless.

After some Google research, I came upon an excellent and mostly free form building site called JotForm.com which presents you with an easy to use WYSIWYG form builder with all the options you could ever need. The most important option I found at the end was that you can generate Facebook specific FBML code that is guaranteed to work in your FBML app tab. Jotform doesn’t stick it’s logos all over your form, in fact, there’s no clue it’s there at all through the whole process. It also redirects any data entered to an email address of your choice.

I tried it and here are the results after very little time messing around:

www.facebook.com/ReverbStudiosDesign?v=app_4949752878

Batch Upload to Dropbox via WordPress

I’m currently building a site for a local Pharmacy who would like to have the ability to allow customers to upload photos to be developed via an online form on their site. The catch is, they would prefer to have the files go to their Dropbox (File sharing/storage site) folder for easy processing. I done some searching for an off the shelf WordPress plugin and this one came closest but unfortunately, didn’t have batch capability and seems slightly buggy – WordPress.org/extend/plugins/dropbox-plugin.

I then got to wondering if it was possible to Email pics to Dropbox and found a few sites/apps that can do it well. This one seemed best – SendToDropbox.com.

So, armed with the above knowledge, here’s what I done:

Contact Form 7

This is one of the most popular FREE form plugins for wordpress and the current version includes the ability to add File Upload fields to a form. As many as you want. I setup a new form with standard questions like Name, Email, etc..and included a few upload file fields with specifications as to File Type, File Size, etc.. I then pasted in the automatically generated email address from SendToDropbox.com in the “To” field. Contact Form 7 also has the option to send the results of the form submission to a second email address and I setup a duplicate of the first email to go to the proper contact email address of the website, minus the file attachments, just so the website admin would get notification of newly uploaded files. Of course, the Dropbox PC software also alerts you straight away when new files are added to your folder. See below for Contact Form 7 settings:

SendToDropBox.com

This is a simple but cool site that connects to your Dropbox account and provides a custom email address that you can send emails and file attachments to. It also has a copule of extra features that process emails received such as: Automatic Unzipping, Email Content Inclusion and control over Dropbox Folder Names/Trees for emailed files, ie – files uploaded in this way can be added to folders named by Date, Email Address, Subject, etc..handy for keeping thigs organised and finding customers uploaded files! See below:

Result

The end result is a normal looking contact form on the customers site that allows basic personal info to be uploaded to Dropbox along with files and photos. The website admin gets instant notification of new files added to his Dropbox account as well as email notifaction of the customer’s details. Nice!

Of course, it can be even simpler. If you just add an email address to the site like Upload@SiteName.com and have that forward on to the custom SendToDropbox email address then people can use the methods they already know for sending emails and attaching files and it will work just as good. I personally think it’s best and more professional to use the form method but perhaps a choice can be given.

Leon.

Optimise Facebook Logos & Thumbnails

Thanks to Johnny Beirne for educating me on some aspects of properly managing both your personal and Business Page Facebook Logos and Thumbnails. Your Facebook Logo/Photo appears top left (in the current Facebook layout!) of either your personal profile or your company page. Facebook also takes a thumbnail portion of this logo to put beside each of your status updates/posts. The logo can be a max of 200px wide by 600px high so it makes sense to use the full size to get as much info in as you can, particularly on your business page. Be aware though that the longer the logo is, the more it will push down the info below it which would normally include your bio info and website links.

The trouble with these logos and thumbnails is that while the logo can be 200 x 600, the thumbnail that Facebook auto crops for you can only be 50 x 50 so the chances of the thumbnail not looking exactly as you’d like it are quite high! This thumbnail is all over Facebook if you post a lot so it might be worthwhile making sure it looks decent. You have a small bit of control over the thumbnail content. Once you’ve uploaded your new logo, hover over it and you’ll see a “Change Picture” link. When you click this you’ll see an “Edit Thumbnail” link that allows you to drag and select the best 50 x 50 portion of your logo for use as your thumbnail.

What Johnny pointed out is that if you purposefully design your logo to take the thumnail into account right from the start you can kind of engineer it to look good as a thumbnail. Johnny suggests designing your logo with a 200 x 200 ‘box’ at the top into which you put your main company logo or symbol, which should be smaller than 200 x 200, ie – with white padding around it, possibly about 150 x 150 or 175 x 175. Now when you upload this logo and click “Edit Thumnail”, you should be easily able to select a nice uniform portion for a thumbnail instead of grabbing a bit of text too, etc..

My own logo isn’t really suited to this as it’s not square so this may not work for everyone. Here’s mine and Johnny’s Facebook pages so you can see how we’ve done things:

Facebook.com/ReverbStudiosDesign

Facebook.com/JohnnyBeirneSocialMedia

Fix Your Facebook Like & Recommend Buttons

I’ve rewritten this article after ‘proper’ researching and realising how Facebook Like and Recommend buttons ACTUALLY work! The original article was prompted by Channelship pointing out that there seemed to be a difference between clicking Like V’s Recommend, ie – clicking Like only posted a tiny link to your profile page whereas clicking Recommend seemed to publish the link to your wall resulting in way more exposure.

Some background:

As some of you may know, Facebook have relatively recently rolled out an external “Like” system whereby content outside of the Facebook site itself can have Like buttons. Straight away tons of sites (this one included) added the Like functionality through embedding code manually or using plugins. I have personally used the FB Like WordPress plugin for this blog and find it works well but here’s the manual code for your self-hosted WordPress blog if you prefer. It should be pasted in your “single.php” theme file ideally:

http://www.facebook.com/plugins/like.php?href=?phpechourlencode(get_permalink($post-ID));?&layout=standard&show_faces=false&width=450&action=like&colorscheme=light

Check your code:

What I realised is that it makes no difference whether you use the Like or Recommend verb for your button. The important thing is to make sure that you either use the XFBML version of the button code or if using the IFRAME version, make sure to use the “Standard” layout with at least 450px width. Doing it either of these ways ensures that people will be given the option of leaving a comment and it’s this comment that ensures the article link goes on your wall. All is explained in this paragraph from the Facebook manual code link below:

When will users have the option to add a comment to the like?

If you are using the XFBML version of the Like button, user’s will always have the option to add an optional comment to the like. If you are using the Iframe version, users will have the option to add a comment only if you are using the ‘standard’ layout with a width of at least 450 px. If users do add a comment, the story published back to Facebook is given more prominence.

Get manual code:

Here’s the link to get Recommend/Like button code for your site or static page. The link also has some important information about the distinction between Like and Recommend and leaving comments:

http://developers.facebook.com/docs/reference/plugins/like

Here’s the manual code again for your self-hosted WordPress site:

http://www.facebook.com/plugins/like.php?href=?phpechourlencode(get_permalink($post-ID));?&layout=standard&show_faces=false&width=450&action=like&colorscheme=light

Since Liking/Recommending in this way is akin to ‘Sharing’ and to avoid the ambiguity between Like & Recommend, here’s a link to a decent WordPress Facebook Share plugin:

http://wordpress.org/extend/plugins/share-on-facebook/

Conclusion:

It has already been proven via stats that bloggers have started to get a lot more traffic after installing Like buttons so make sure you have yours!

PS – Please “Like” this article if for no other reason than to see how it works!

Leon.

Crazy BP Photoshop Twitpic Stats

Twitpic is a Twitter related service for sharing photos via Twitter in real time and is normally included in the likes of Phone and PC Twitter clients by default. As you send out a tweet, you can attach a picture from your PC or Phone camera and the application will automatically embed a Twitpic link so your followers can view the picture. One of the best things about Twitpic is the stats it gives on how many people have viewed your pic and while I suspect they are not terribly accurate (Simply refreshing adds hits!) and possibly count search robot visits, etc..it’s still a good, rough indication of viewer numbers.

Most of the pics I post to Twitpic go out on Facebook too and I get on average about 30 to 40 hits, however a recent upload went totally off the scale! Readers might have heard about the recent controversy involving British Petroleum (BP) when they released a poorly Photoshopped (edited) image to the media depicting a BP monitoring room where workers were keeping an eye on the oil leak. The image was edited to make it look like they were a little busier than they actually were but it wasn’t a great job!

I spotted a link from Wired magazine on Twitter asking for members of the design community to have a go at altering the original BP photo for the laugh and to see if they could do a better job than the botched BP one so I gave it a bash, seeing a good oportunity to get my Photoshop skills some coverage and maybe get some work in considering the Twitpic links to my main Twitter account with all my business info and web links attached!

Here’s the result below depicting some ‘alternative/lighter viewing’ in the BP control room and here’s my Twitpic with stats (currently 17,864 hits):