The benefit of using GIT in the way below is that it maintains version history AS WELL as offering a managed host, i.e. it deals with uploading as well as versioning (in 1 git bash push.)

So here’s the scenario – there’s one of you, or maybe a few core founders/dev’s and you want to use GIT to version control your developments of a new web app or site. You already have a shared hosting account with 1and1 which works fine up to 20k hits a day or so, is there really need to have the thing scalable on demand from day one? No? Great, read on. If you REQUIRE scalability off the bat (I bet you don’t, really) then go find a PaaS/jump on AWS, for now here’s how to get GIT versioning (with automatic publication) working on your 1and1 shared hosting.

Firstly go read this, its a great guide that pretty much* got me there (95% of the credit to Abhijit), there’s just a few changes to get it to work on 1and1.

How I did it: GIT on 1and1

Load up your FTP, get to the root of your hosting and make your main site dir, in this case we will call it AppDev1:
/AppDev1
Next make two directories underneath it: “repo” and “live”, I shall explain these after you have made them:
/AppDev1/live
/AppDev1/repo
What these two are going to do is give you a live “root” for your web app/site as well as a GIT repository (which stores all the changes.) By separating them you keep everything simple. [live = web root folder, repo (or whatever you call it) = git bare repository.]

Next locally (on your machine) create a folder which you want to develop in:
C:/EpicNewApp

…And load up GIT BASH (assume you have) and enter the following:
cd "C:/EpicNewApp";
git init;

Next go ahead and load your SSH client (putty) and log into your 1and1 Account (there is guidance on 1and1 under SSH accounts, if you need it.) Once logged in enter the following:

cd "/AppDev1/repo"
git init --bare
cat > hooks/post-receive
#!/bin/sh
GIT_WORK_TREE="../live" git checkout -f
chmod +x hooks/post-receive

*note: This differs from the aforementioned guide in the address entered under GIT_WORK_TREE, this is the only way I could get this setup to work on 1and1.

You can also simply stick these lines into a file called post-receive and upload the file to the “hooks” folder of your new bare repository (repo), if you are so inclined.

That’s it, your done with the SSH, now you can bind a remote location in GIT BASH (replace the obvious:)
$ git remote add web "ssh://u99999999@yourMain1and1Domain.com/~/AppDev1/repo/"
…And go ahead and push to 1and1 (you will need your SSH password to do so.)
$ git push web +master:refs/heads/master
All being well this should have pushed a version to your /AppDev1/repo folder and also updated the live files as per your changes!

Happy Ghetto Versioning!

Note: As per comments, removed .git reference from link, thanks Ano.

It was a busy November, but it paid off – completed a good few projects for some great clients, and whats more I won no# 1 Top Freelancer @ people per hour!

You can read more about some of my recent projects here, although there’s only a few case studies up, the most public of the projects was a great life planning app that I built to first iteration, you can check it out (DO IT NOW!) @ 5years.me – built in the cloud on PaaS, behind the scenes I have also helped develop a social media analytics platform that is a marketeers wet dream, maybe as it gets properly released I will divulge more on that. Needless to say November was a great month of good work for great clients – off the radar now until my big project in early 2012

Was saving down facebook data into a database from the graph api, wanted to save the urls in a mixed url table but didn’t want to bother saving the whole http://www.facebook.com every time, what a waste of data. Initially I lazily abbreviated this too: fb.com/whateverthepagewas, left the acquisition stuff to its job and then went off to do something else. Coming back to the management system I accidentally clicked one of these fb.com/ links, and it worked! Facebook have set it up as a redirect. Maybe this was common knowledge but I hadn’t heard of it before…Anyhow a useful biproduct of dataspace savings!

So check it out: fb.com/hayday

That will redirect you too http://www.facebook.com/hayday (my page.) – just like fb.me, but traditional-like, lol. Neat eh? Anyone else know any facebook quick wins?

Clock Face by tibchris
Facebook Time in PHP, who the what where?

If you haven’t tried pulling anything time-sensitive out of the graph API yet, don’t, that’s my advice. There is not a single bit of coherent explanation as to how the API hand’s out times, when I first researched it I had written on my pad “Pacific time”…great, did my past (possibly beer holding) self not remember that Pacific time is one thing half the year and another the other half? PDT/PST? Obviously not. What’s more, now when I check (post something on a page, grab it with graph API) – its giving me GMT+00 times, WHEN I’M IN GMT+01.

All I can work out is facebook have either been pleasant enough to convert the time to the users original registration locale (likely, and pleasant) and not noted it down ANYWHERE publicly, or they have chosen to use GMT. Probably the former, either way – facebook developers – we need a better solution for working with facebook times.

You can host facebook apps on any host, but hosting somewhere unsecure (not accessible via https) will flag up the following prompt for anyone browsing to the page with secure browsing turned on (high proportion of fb users.) You CAN also use amazon cloud storage (S3) for free https file storage, up to a level, however you cannot run server side code (php/ASP.NET) without setting up a server with their EC service.

Not pretty eh? What will that do to your conversion rates? Yep nothing good.

Its not just the mavericks either, for example brands like banana republic are still running http stuff, prompting the user with this message on loading their like-capture pages.

Set up 1and1 shared hosting to host Secure SSL facebook apps/applications/tab pages

So anyway here’s the cheap, quick way to hosting your facebook apps SECURELY using 1and1 shared hosting.

1. Log onto admin.1and1.co.uk (or .com)
2. (Optional) Register a domain name which you don’t mind generically hosting your fb content. For me this is www.whfb.co.uk – this will only show up if users looked at the information for the frame, probably wont ever matter, but if you are running a whole host of different niche pages it might be worth it for simplicity/segmentation.
3. Go to domain management section and click “Shared SSL Encryption” under SSL option
   
4. Assign the Shared SSL Encryption to your generic domain/main domain you want to use
   
5. Setup a folder under your domain like you would with any facebook page, use the facebook php api to fangate or just put some html up there, bare in mind all objects referenced in what you put up should direct resources to “https” not http. That is if you reference “http://www.example.com/someimage.png”, switch the http for https (save your own copy of the file if you need to. Referencing images locally in the folder should work fine for http/https if you use the same domain.
6. Setup your facebook app (theres thousands of guides on this…) and set the following (under “Select how your app integrates with Facebook -> Page Tab”)
   
7. Add the app to your facebook fan page and visit it, (setting it as default landing page perhaps ) – you should not get any security messages, if you have you need to go back and check your html is pointing to any external elements via https.

Chances are if you are running 1and1 shared hosting (or any other major) then you will have SSLRelays free of charge with your package, what’s more this takes about 1 minute to setup, so test with this before you stick stuff in the cloud!

As I have been dabbling with facebook fan pages I thought I would share a few of the take-away’s, in this case purely to do with the branding of your facebook page, increasingly an important outward factor in all web developments – facebook fan pages are perhaps the building blocks of a good social sprawl. I will post later about the technicalities of using fan-gated iframe apps (hosting them on 1and1/Amazon S3 for no extra cost) and similar but for now lets focus on the looks.

Take a look at these few examples:

You have probably noticed straight away what I am getting at. Coherence. Branding coherence is an eternal battle for marketing departments, making your brand appear coherent to the corporate strategies laid down to be long term principles. In the realm of smaller web projects though its not such a huge deal. The first thing I do when setting up a new facebook page is get the overall branding planned and implemented. In short I make/contract 6 Images. These 6 images will either work well together, leaving a mark in the mind of an already bombarded potential fan or they’ll excite no one and be forgotten along with the other mediocre half-attempts. Get these 6 images right.

So here’s how it is. You are allowed a facebook profile pic for your page, this image can be just a logo (check out HP) or it can be utilised as any ad space might be, stick up an exclusives offer deal, some shocking message etc. This image can be up to 200 px x 600 px and you can upload a higher resolution, baring in mind the width will always be proportionate.

Your other 5 images come in the form of Tagged/Wall posted/Album images. These are shown across the top of your wall (where ultimately you wan’t your fans to be hanging out) and are sorted in a RANDOM order by facebook. That’s right, however you upload them they will occasionally appear in a completely different order unlike the ones on your personal profile page. These stick to normal photo proportion ratio’s and can be uploaded via the “upload photos” option on the pages’ wall. Remember they don’t have to be photo’s, use these 5 images to extend (coherently) the brand of the page you are trying to promote.

Take a look around, check out some pages of your favourite brands, I have no doubt they will be using the images in clever ways, ways that can improve like rates, conversation and overall brand image.

Facebook Fan Page Branding Template



(Adobe Illustrator CS4, 600kb Rar’d)

Its an Adobe Illustrator file with a dummy facebook page laid out with artboards setup for each of the 6 images I talk about above, it should let you create all your images in a single space so you can really get a feel as to how well they gel together. Once you have constructed your images, switch to artboard view and click each image in turn, remember when exporting the main profile pic image that it needs to be 200 pixels wide, this way you won’t suffer any of facebooks image downscaling nasties.

Do you use Auction2Post [A2P]? If you don’t its a wordpress plugin which automatically implants listings from ebay as wordpress posts, including affiliate links through the ebay partner network from which you earn a commission. Its quite useful. Read my post about it here. Anyhow if you don’t use the plugin you can pretty much skip this post, unless you use a similar thing which is generating all kinds of nasty strings you don’t want in your posts

This post will show you how to sanitise your auction2post posts for annoying (and contract breaking) ebay auction strings, it even has 125 rules already in a file for import!

The problem

Auction2Post is great in lots of respects, its well written and does a prescribed job. Where it caused irritation for me is arguably after its done its job, after the wordpress plugin had created its posts. You see you can create posts via templates, which is great, it allows enough customisation for most, however I wanted a bit of text processing as often you are left with irritating auction footers and garbage text which make the user hit back or close at a displeasing rate (some of these ebay strings might actually make your Auction 2 posts sites break ebay partner network terms of service, its really worth sanitising your posts as I describe below!)

The Solution

This problem with Auction 2 Post and wordpress is one of the reasons Automated Editor was born, to give a bit more freedom in text processing, wordpress filters are great but I don’t think filtering hundreds of ebay phrases like that is effective.

If you want to cleanse your Auction2post posts of dirty ebay auction footers and the like here is how I currently do it:

1. Install Automated Editor plugin on the blog in question. (Get it here and install like a normal plugin.)
2. Go to the plugin (Auto Editor on its plugin menu) and read the disclaimer (big red box) and THEN accept it.
3. Download the rules file I have created (Get it at the bottom of this post) and unzip it somewhere.
   
4. Go to “Import/Export” on the Automated Editor plugin menu.
   
5. Choose the aforementioned rules file and hit import.
   
6. You should now have 125 or so rules in your rules list
7. Now go to Schedules on the plugin menu and then click Add New.
8. Scroll down and hit Select All (under the long list of rule checkboxes ebay1, ebay2 etc.)
   
9. Scroll down again and select Most Recent Post from the Target dropdown.
10. Make sure run option is on “After a post is published”.
    
11. Save it.
12. Turn on schedules.
    
13. Post a test post, either via A2P or manually, it should remove any of the 125 annoying (common) ebay auction strings it finds! Sorted.

Notes on this method:

• You will need the Full version (Ultra Pro) of Automated Editor, the free version is limited to 3 rules and this rules file alone has 125 ebay-string removing rules. It’s cheap though here.
• If you already have Auction2Post auction posts in the system you will have to setup a different schedule to operate on those, I usually set this up before I set any automation (it’s quite easy, just do the same thing and switch out “Most Recent post” for “all posts”, run it once then disable the schedule – you don’t want it operating on them all every time!)
• Currently this removes 125 strings I have found previously, mostly from uk auctions, I am considering writing a simplified version of this whole setup, an “Auction2Post Post Cleaner” which you can just activate and leave, perhaps with cloud rules, so watch this space. Good thing about the above setup though is you can continually improve your own rules file by adding your own strings.

Rules File

The link below offers a RAR’d version of my Automated Editor rules file which contains 125 x ebay string removal rules, yours for free Please however do use carefully, as with all automated-editor situations if you don’t understand what you are doing then don’t use it, this is for the people that understand the above problem and have the full version of the plugin.

Download Rules File
[Right click-Save as]

Scenario’s are either:

• Use facebook like button generator to generate code for a like button (sometimes even this bugs out..)
• Use some service like ShareThis to generate code for a facebook like button

• It shows as Zero – Facebook likes ’0′ even if you know that URL (that you installed it on, or fb page) has likes
• It occasionally shows correct like count, but most of the time shows Zero [0] like’s

Investigate with:

• Facebook Lint tool (object debugger)

After spending a few hours working out what was causing this 0 like problem on my facebook like button I narrowed it down to two problems people are experiencing:

1. Error in the code you are copying across. It should be an iframe (unless you are using XFBML) like the code shown on the facebook lint tool (object debugger.) In fact the best way I found was to use the object debugger to make the iframe code and then adapt that using parameters from the facebook like button generator as the likebutton generator bugged out for me. MAKE SURE its pointing to the right url, use https if you can and point it to the page which validates in Lint tool.
2. Page Problems. If your page doesn’t validate properly in the Lint tool (object debugger) then this is your issue, this is the likely situation if you are seeing it OCCASIONALLY show the right figure in your likes box, but mostly 0 [zero] likes. Page problems as far as I have experienced boil down to:
1. Facebook soft deleting your page and not telling you. If you are experiencing this ZERO likes situation it might well be that facebook has actually discontinued your page without telling you, leaving it on your admin menu’s and leaving the likes/wall/everything in tact. This is confusing as hell and I wish they would formally tell/make it obvious. Reasons why your page gets deleted? I am sure there are a bunch. I repeat. Your page may look to you to be live, with likes and all – but if you are experiencing zero likes on your like button it might also be deleted. Get your friend to search for it in the search box, if it doesn’t appear, you’ve had it deleted!
2. Restricted Content. We all love fangating, well its a working economy, but I have a sneaking suspicion it may occasionally cause a discrepancy in like button, potentially pointing a like button to an inaccessible page to the potential like’ee would mean facebook wouldn’t be able to access it and therefore show zero (whereas it might be showing you the proper number as you have access..)

Anyway, for a nice combo of a facebook like button and a google + button (are these going to be more and more important?) check the following code, don’t forget to replace your url

<div align="left" style="height:70px">
    <div id="fbbox" style="float:left;height:65px;width:55px;">
    	<iframe src="http://www.facebook.com/plugins/like.php?href=***YOURURL***&layout=box_count" scrolling="no" frameborder="0" style="height: 65px; width: 55px" allowTransparency="true"></iframe>
    </div>
    <div id="gbox" style="float:left;height:65px;width:55px;"><g:plusone size="tall" href="***YOURURL***"></g:plusone></div>
</div>

If you want to read more about the plugin you can check out this post on, What is the point in Automated Editor or go right ahead and get it from wordpress.org or buy the professional version at AutomatedEditor.com.

Watch this space for a few posts on how I use the plugin, (it works fantastically well when rigged up with Auction2Post.)