Adding the HTML 5 Facebook Like Button to Blogger

Facebook Like buttons are a cool feature to add to your blog. They really do work to drive more engaged traffic to your precious posts.

The reason is they are not just a static AddThis/ShareThis type of button. Those things never really worked very well. Facebook's buttons, by contrast, add social proof (or lack thereof) to your posts. They do this by:

• showing how many people already like the page
• showing photos of these people

They also provide a very easy way for people to quickly share content with their friends. Since 50% of Facebook's 800 million users log in every day, the chances of someone browsing your blog being already logged in to Facebook is pretty high. If they are logged in, when they see the Like button, they literally need to press it and your blog's title, URL, description, and image is instantly posted to their wall. Within seconds others will see it, and may comment, or click through to your site.

So the bottom line is: leverage the astoundingly lively Facebook ecosystem to get more clicks to your site. More importantly, these clicks are coming with a pre-recommendation from their Facebook friend.

Rules of thumb for Facebook buttons:

1. Make sure the Like/Share/Send is referencing the actual post URL, not the blog's home URL.
2. Include them at the end of the post - just after the content - so when people have finished reading, it's the next logical step.
3. Make them prominent and try to nicely integrate them into your page layout.
4. Customise:
1. Choose the word Like/Recommend depending on the context. Like is suitable for most sites, but Recommend might be better for product reviews, music, movies, etc..
2. Use the light/dark colour theme to best match your site's look.
5. Use Open Graph tags to maximise the impact of your integration - more about that later.

How to Integrate the HTML 5 Facebook Like Button Into Blogger

In a blogging platform like Wordpress, just use a plugin to insert the Like Button - it's the easiest way. But on Blogger, it's not so simple. Having said that, if you want total control, you can use the instructions below to include the Like Button right in your Wordpress Theme's post.php, category.php, or any other relevant file.

I suggest using the HTML 5 code because it's the most simple to integrate. Most browsers should be able to handle it, and this is increasing each day. In addition, the mobile world is heavily investing in HTML 5 so it helps ensure the button will work on mobile browsers too.

If you really can't use HTML 5, you can use the XFBML option with one extra step, or the Iframe version. Keep in mind the Iframe will be blocked by some user's configurations, and does not support the Send button.

1. Go to https://developers.facebook.com/apps
2. Set up an Application for your site. If you are only interested in the Like Button, you really just need the App ID, so don't worry too much about what you enter here unless you actually want to create a proper App related to your site.
3. Then go to:  https://developers.facebook.com/docs/reference/plugins/like/
4. Configure the button
5. Put anything in the url, e.g. http://test.com - we will change this later
6. Click Get Code
7. The code will pop up - make sure you are looking at the HTML 5 tab.
8. At the top, select the Facebook App you just created.
9. Select everything in the first box and copy it to the clipboard.
10. Now go into your Blogger Dashboard
11. In the blog you want to modify, go to Template, then click Edit HTML (I am using the latest Blogger Dashboard, if you can't find this, let me know in the Comments.), then click Proceed.
12. Click 'Expand Widget Templates'
13. Add the Javascript Facebook SDK code:
1. Scroll all the way to the bottom of the HTML window, and paste the Facebook code just above the </html> tag.
2. Then make a blank line after the <script> tag and before the </script> tag.
3. After the <script> tag, add:  //<![CDATA[
4. Before the <script> tag, add:   //]]>
5. This makes sure the javascript remains intact.
6. By the way, Blogger will move this code higher up in the template when you save it. I found that it's easy to add it here, then let Blogger do its thing.
14. Add the Facebook Like button code:
1. Go back to the Facebook Like Button Developer page and copy the code from the second box.
2. Search for "<div class='post-footer'>"
3. Just after this line, paste the Facebook code.
4. Now we need to edit the URL.
5. In the code you just pasted, change the data-href attribute to: expr:data-href="data:post.url". The entire line of code should look something like this: <div class="fb-like" expr:data-href="data:post.url" data-send="true" data-width="450" data-show-faces="true"></div>
6. Copy the line you just edited.
7. Search again for "<div class='post-footer'>" to find the mobile section of the template, and paste the line in again, after the line with "<div class='post-footer'>".
15. Click Preview and check how it all looks.
16. When you are happy with it, click Save Template.
17. That's it! You may like to change the built in Blogger widgets to remove the Facebook button, as now it's redundant.

Here are some screenshots to help you:

Facebook SDK code at bottom of template

The code for adding the button to the post

That's all you need to do to integrate the button, but we can do a bit more by adding the Open Graph information to the template's meta tags.

Adding Open Graph Information to your Blogger Blog

I don't know much about Open Graph, but I assume it will become more and more used by Facebook. They releases a new version last year, so this shows that they are committed to it.

In relation to the Like Button, it allows you to better control what actually gets posted to the user's wall.

You basically need to add six meta tags. You can generate these on this page and then modify them slightly for blogger. Again these instructions can be pretty easily adapted for use with Wordpress Themes.

Read about how Open Graph works.

On the Facebook page:

1. Leave Title blank - we will modify this later
2. Under Type, select Article, or something else if it makes more sense.
3. URL: leave blank
4. Image: leave blank unless you have a URL to a logo you want included. If so, paste in the full URL to the image. In Blogger, I don't know of a way to dynamically insert image URLs from a given post, but this is pretty easy in Wordpress.
   
   I have noticed that if you leave this tag out of your template, Facebook will automatically grab the first image from the post when someone posts it to their wall. So you can just leave it out unless you want to post a specific image.
   
5. Site name: leave blank
6. Admin: leave with the ID already included.
7. Click Get Tags and copy the output.

Now to your Blogger template:

1. Again go to Edit Template in Blogger.
2. Expand Widget Templates
3. At the top of the HTML box, find the line with the text:  <meta expr:content='data:blog.metaDescription' name='description'/>
4. Paste the tags you copied under this line.
5. Now we need to edit them like so:

<meta property="og:title" expr:content="data:blog.pageTitle" />

<meta property="og:type" content="article" />

<meta property="og:url" expr:content="data:blog.url" />

<meta property="og:image" expr:content="http://test.com/image.png" />

<meta property="og:site_name" expr:content="data:blog.title" />

<meta property="fb:admins" content="your user id, e.g. 123456789" />


It's also recommended to add the following tag:

<meta property="og:description" expr:content="data:blog.metaDescription" />

If the tag content is blank, you should not leave them in your template, as it will cause an error.

Now save your template and test your Like Buttons!!

Any questions - please fire away in the comments.

Check out TFS files directly from SQL Server Management Studio

The other day I explained how to configure the external tools feature of Edit Pad Pro to allow direct checking out of files from TFS.

Today I did the same thing in SQL Server Management Studio.

Here's pictorial instructions:

There is a small annoyance: SSMS will try to save the file before running the external tool. In this case, if we've modified the file then it will try and save over a Read-only file, causing it to try and Save As to a new file name.

I believe this is a bug in SSMS, or a well-intentioned, yet obstructive feature. Just press Escape to avoid this - the external tool will then run.

Let me know in the comments if you need any more information!

How to automate TFS checkouts from EditPad Pro

I am a long time user of the great EditPad Pro from JGsoft. I use it for text file manipulation and basic programming. I starting using it when it was at version 3 or 4; purchased it at version 5, and even upgraded my licence to 6 and 7!

You may find Text Editors boring - understandable! They are one of those types of software that is not particularly exciting, but for certain people, they are an essential tool. And if they perform slowly or lack intricate features, they will be quickly superseded by something better.

Developers need a powerful text editor. End of story.

As a developer you have to deal with a multitude of file types - config files, data import/export files, source code, database queries, and so on. Often you need to quickly search files, or change their contents and produce a new file.

EditPad Pro is an awesome tool for getting in there and quickly doing what you need. As I mentioned, I've used it for many years

It's an indispensable tool for me. This is due to features such as:

• Customisable syntax highlighting for a very wide range of file types, e.g. sql, vbs, sh, XML
• Powerful regular expression search and replace (actually I also bought RegexBuddy from JGsoft to make constructing these easier)
• Stable handling of very large text files
• Fast operation - fast to load, never laggy
• External tool support - which is the point of this post!

Integrating TFS checkout into EditPad Pro

In my current job, we use Team Foundation Server for source control. Visual Studio 2010 has great integration, in that it automatically checks out files when you try to edit them. 

However, we also store various other file types in TFS, which we do not edit in Visual Studio. Personally, I use EditPad Pro (EPP) to edit these. I have been manually checking out the files when I need to edit them using the Shell Integration provided by the TFS Power Tools. This works fine, but becomes tedious. 

Then I remembered that I could integrate the TFS command line application into EPP!

The screenshots below will show you how to do it, but in brief:

1. Open a file from your TFS working copy, that is currently checked in (Read Only)
2. Click on the Tools menu, then Configure Tools...
3. Configure the command line and add a keyboard shortcut. If you want it in the toolbar, you can check 'Show caption on toolbar'
4. Close the Tools dialogue and press your keyboard shortcut.
5. Your file is now checked out!

Now a bit more detail...

Tool Definition

This is where you set up the command line to run, and add the placeholders which pass the information from EPP to the command line tool.

In this case it is very simple:

"C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\TF.exe" checkout "%FILE%"

Your path to TF.exe may differ - just search your C drive.

The important part to note is you need the "" around the %FILE% placeholder to ensure that if you have spaces in the path to the file, this will be handled correctly.

TF.exe does not require the working folder to be set.

Tool Definition - set up the command line here

Files dialog

You don't really need to set anything up here, but if you like, you can check 'Reload the current file'. This ensures the latest version checked out from TFS will be displayed. EPP should automatically reload the file anyway though, so it's not strictly required. (You can set this behaviour in the main Preferences dialogue, under Open Files: check 'Automatically reload the active file if it was modified on disk.')

This section may be more useful to you if you want to do something like save your local copy in another temp file before you check out. You could tick the second option to do this.

If you are setting up a TFS check-in task, then you would check the first option to make sure the file is saved before checking in.

Tool file actions - optional

Standard I/O Dialogue

This is useful in case we get any errors. In this case, I set up the standard error to redirect to the message panel. This means you will see any errors if they occur (e.g. TFS down)

You can also set this to save the standard output to the message panel or to a new file. We don't need it in this case, because the standard output just tells us the file was checked out!

These settings are most used for tools which take your file's contents, change them, and produce modified output. With these tools, it's ideal to set the standard output to capture to a new tab. I have done this when using perl scripts to format files, etc.

Standard I/O - where to send the command line output

So there you go - look how easy it is to integrate an external tool into your text editor - and save yourself a lot of tedious clicks AND time!

If you are interested in trying out EditPad Pro - it's your lucky day! You can get a 30 day trial of EPP right here. Once the trial ends, it just switches to the Lite version, so you can keep using it forever.

VPS.NET cloud hosting review

This post is a first hand review of the VPS hosting services offered by VPS.NET, known as VPS Cloud Server. I'll keep it brief and focus on the benefits and disadvantages of their service.

My background as a web consultant and developer means that I've had experience with a wide range of web servers and hosting plans: shared, virtual server, dedicated, and internally managed corporate servers. I currently have accounts with four other hosting providers for various purposes.

The timing of this review is funny in a way. I've had an account with VPS.NET since November 2009, and until recently have had hardly any technical issues.

What's good about VPS.NET:

• The node concept - you buy nodes and arrange them into VPS's. A node = 376MB RAM, 600 MHz CPU, 10GB SAN storage. They get cheaper as you buy more (currently they are $8 each!)
• Control - they use a custom control panel (which is based on OnApp) which is breath of fresh air from CPanel. It's easy to scale your VPS, add another VPS, manage backups, get your invoices, submit support requests, and so on. This panel is great. It may even be better than Dreamhost's custom panel, of which I am also a fan.
• DNS management - easy and simple. You can use softlayer.com or vps.net servers.
• Large amount of operating systems to deploy - including Windows 2008, Debian, Ubuntu, CloudLinux, JumpBox and more. They also include a LOT of preconfigured templates for common applications, such as Asterisk, Magento, Wordpress, Bugzilla, Nagios, etc. This saves a lot of time.
• Flexible offerings - I like how they have somewhat commoditised hosting and created a system by which you can add various add-ons to your account. I outline some of the add-ons below. In short, the modularisation of the service is a very good thing, and something they've done really well.
• Lots of locations: 3 cities in the USA, 2 in Europe, 1 in Asia (Japan) - and some have multiple zones (which I think means data centres)
• Support: I've found them to be quick to respond any time of the day, and straight to the point. This includes Tech and Billing. I only have good things to say about vps.net Support. They also just added phone support, which is a plus.

Some of the add-ons that I make use of:

• Server Density monitoring - quick to set up and allows you to monitor load and other things of your system, Apache, MySQL, and much more. VPS.NET have brokered a cheaper licence from SD. Integration and setup is quite easy. The only problem with this type of licence is that it does not allow you to use the community contributed plugins from SD. This is a shame because I really wanted to add php-fpm monitoring, among other things. To use this, you need to sign up directly with SD, which voids the need for the VPS.NET add-on.
• Rsync backups - basically they provide offsite storage to the same capacity of your VPS and simple instructions to set up secure rsync over ssh. You then set up your own rsync (ask me in the comments if you want help setting up rsync backups.) script and stick it on cron.
• Snapshot backups - for $5/mth per VPS this gives you a daily, weekly, and monthly snapshot backup, as well as one manual backup you can use to create templates for future VPS deployments.
• Managed support - for $99/mth/VPS you can have pro support to help you with upgrades, security hardening, and a lot of other stuff.

So all of the above is a winning recipe, but unfortunately there's one major issue that erodes a lot of the benefit. That is hardware stability.

Originally I signed up with a VPS on the Chicago-C cloud. For over a year I found this to be great. Fast performance and very little downtime. All hosts experience downtime, and I have come to expect a few hours here and there. 

In September VPS.NET asked everyone on CHI-C to move their VPS's to CHI-A, with their help. I ended up moving to CHI-D so I could use a Debian 6 template for the new VPS. The whole point of this move was to retire CHI-C, which apparently had been victim to ongoing problems and power outages. To be honest, I had been really happy with the stability of CHI-C!

As I said above, I recently began to experience system instability. This is related to the fact that all VPS storage resides on SAN storage. This is all good in theory, but based on my personal experience with SANs - they are great when they work but they seem to provide a single point of failure. And one which affects a lot of stuff.

I am not an expert but this seems to be because the failover mechanism of a SAN is to synchronise everything to the failover partner. This takes a very long time when you are syncing the data for hundreds of VPS's. I have seen similar SAN failures in large enterprises, with similar delayed restoration scenarios.

Just look at the running totals here for the data centre my VPS is on: http://status.vps.net/2011/10/chi-d-cloud/ You can see the synchronisation takes a LONG time to complete.

In fact if you search status.vps.net for SAN you will see many errors, affecting every zone.

SAN vs local is a big discussion, which I could not possibly cover here, but in general I believe:

SAN's provide an elastic storage solution, fault tolerance, and other benefits, but in my opinion they are not the ideal solution for a web server. The average web site does not require that much storage space, and the files stored generally need to be accessed often, and quickly. A local RAID storage solution makes more sense to me, in most cases. This provides better isolation both in terms of performance and faults. Yes, if a drive fails in with local storage, this may require downtime. But often, with hot-swap RAID solutions, it will not. And if there is downtime, it will be less, simply because there is less data to copy/rebuild.

Enough about storage...

This post is about VPS.NET but I think it'll help to compare to another VPS provider I've got a lot of history with: Dreamhost.

I've had a Dreamhost VPS for well over 2 years and have never had hardware-related downtime. With Dreamhost, I have only experienced downtime due to network connectivity and from overloading the box with too much traffic! Dreamhost told me that their VPS's run with local storage. While there are obvious benefits to SANs, from a stability point of view, just based on what I've personally seen, I'd rather have local storage for a web server.

As an aside, you may be wondering, why I have VPS with two companies? 

Well, I had the Dreamhost one for quite a while, and added many sites over time. Mostly Wordpress sites, which routinely use a tonne of RAM! I kept hitting the limit of the VPS, and had to increase the resources. My choice was to keep spending more with Dreamhost or move a few sites to another host. Dreamhost VPS's give you a kind sudo root access, which means you can install pretty much whatever you want, but it's not as straight forward as having actual root access. They also do not give a choice of Linux distro. At the time I was keen to play with alternate web servers like lighttpd, and PHP extensions like apc and php-fpm. This was not easily possible with Dreamhost, so I chose to try vps.net, who provide full root access.

Before I forget, a few other things that VPS.NET could improve on IMHO:

• Central SMTP server for customers would be a big help. I understand why they don't do it though (I'm looking at you spammers.)
• Add-on pro-rating (is that a word?) - their billing system does a good job of pro-rating services when you add them, e.g. if I add backups 75% through the month, they will debit $1.25 from my account. However, if I then remove it two days later - no refund. I don't care about a few bucks, but I've heard that Linode actually do this. It'd be nice from a completeness point of view. Please correct me if I'm wrong. For larger amounts, where I have dropped nodes, I've asked billing to credit me and they have quickly and graciously done so.
• Scaling - some VPS providers allow you to almost instantly increase your RAM and CPU share, without a reboot. To do so with VPS.NET means adding 1 or more nodes, and then rebooting your VPS. This also provisions additional storage to your VPS. I think I saw somewhere that they were working on instant scaling. This would be a great benefit.
• CPUs - for some reason on my VPS I have access to 3 Xen vCPUs. Most other providers I've seen offer 4.

So at the moment I'm shopping around for a new host for my, and my client's websites because I need maximum stability. It's a shame because moving a whole heap of sites is time consuming. But explaining downtime is not something I want to spend time on, and losing advertising revenue from other sites I run is also clearly a bad outcome!

My final thoughts on VPS.NET: they have most of the ingredients in place for a winning service. They are relatively communicative, and seem to genuinely want to create a service that is a cut above the rest. They have implemented some very creative features, and innovate regularly. They just really need to spend some time on their infrastructure and consider some ways to remove the dependence from the SANs, or improve their reliability. I have heard rumblings from management that they are in the process of improving the VPS infrastructure. This review is based on the current state of affairs, which, of course, I hope improves.

Their redundant geo-hosting service looks like a step in the right direction, but it's still in beta, so we'll see how it pans out.

Once I find alternate hosting for the clients I have on vps.net, I'll probably reduce my nodes with them and continue to use the VPS for less important sites. But even if I leave completely, I'm sure I'll be back when the dust settles.

Based on their affordability, flexibility and creativity, I absolutely recommend them for non-mission critical purposes. However, if you set up redundancy with another provider (e.g. with MySQL replication, rsync, etc) then VPS.net could be a fantastically affordable part of that solution. I am certainly considering this as an alternative option to finding yet another host: if I am going to set things up all over again, I may as well leave a redundant copy on vps.net, perhaps with a reduced set of nodes.

As a general comment I'll say that VPS is an excellent solution if you have unusual requirements. The powerful control panel and modular nature of features allows you to mix and match different technologies, and quickly add VPS's for testing. In that respect I feel they are a great component as part of your whole web infrastructure - just not [yet] necessarily the primary component.

Check out all the VPS.NET plans here. 

Note to future readers: Remember this review was written in November 2011, so if you are reading this in 2012, I am pretty sure that the VPS.NET storage issues have improved.

If you'd like to try Dreamhost VPS - sign up here for a two week free trial, and use the promo code RANDOMVPS to save $50 if you decide to stay!

Windows Live Essentials 2011 Web Installer from Behind a Proxy

If you are behind an HTTP proxy that you don't have control over (say at work), which is not configured to be completely transparent, then the Windows Live Web installer will not work.

It won't know how to connect to Microsoft's download server to get the packages for installation.

To my knowledge there is no standalone 'full' installer available, so we need to help it to use a proxy connection.

On Windows Vista, Windows 7, and Windows Server 2008, you need to do this:

Open a command prompt

Type: netsh winhttp

You should then see:

netsh winhttp>_

then type:

set proxy yourproxyserver.example.com:port ""

OR, if you want to exclude some other domains:

set proxy yourproxyserver.example.com:port ";*.domain1.com;*.domain2.com"

(port should be 8080 or 3128 usually)


Then restart the WL installer.

After it has installed, you can go back to the netsh prompt and clear your changes with:

reset proxy



Having trouble? Let us know in the comments!