This functionality is provided by using meta information that is stored on the user’s browser. Unless you decide to do something nefarious, you do not have to their data by merely adding these buttons, but it does expose your user’s to a potential security risk. There are browser plugins that allow them to turn off this functionality if they have it enabled. If you’re comfortable with all this, then go on ahead and follow the instructions.

A useful wizard is available that provides you with both the XHTML and Javascript necessary to make this functionality work correctly on your site. The Javascript code snippet provides the bridge between the user’s browser and the Facebook social graph that this is using in the background. There are a few routes regarding how to implement it, I chose the HTML5 approach which asked me to add a schema namespace to the HTML element, and then used the custom like button element that is provided to display it.

Javascript snippet Place this after your BODY element

<script src="//connect.facebook.net/en_US/all.js"></script>
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=309698452382243";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

HTML element Place this where you want the button to appear.

<fb:like href="http://example.com" send="true" layout="button_count" show_faces="true" action="recommend" font="lucida grande" display="inline"></fb:like>

You will be given the exact HTML element tag that you should use based upon your wizard settings. If you want to use this dynamically in the WordPress Loop to display under each post you’ll have to use a PHP function the_permalink(); which will return the URI to the page in question. This can also be done on the single pages if you so desire. One last step is to include meta information at the top of each page to let Facebook know how the post should be described in the user’s activity feed. This is very straight forward and simple. An optional title element should be used on individual pages. Categories can be selected through the wizard.

Meta information Place this in the HEAD element

<meta property="og:type" content="blog" />
<meta property="og:site_name" content="Thoughtless Banter" />
<meta property="fb:admins" content="199800257" />

The Google Plus approach is very similar, and doesn’t require any meta information tags. When a user decides to “+1″ any of your posts they will in a special location on that user’s profile, and in any the subscriber’s feeds as well. You’ll need to include a Javascript snippet, like above, and a special HTML tag element. You can add all of this below the Facebook directives if you desire.

Javascript snippet Place this after the BODY element.

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

HTML element tag Place this where you wish the button to appear.

<g:plusone href="http://example.com" size="medium" annotation="inline"></g:plusone>

Finally, the Twitter button is the easiest to place, and they once again provide a wizard for you to change the colors of the background, design, and number of tweets you wish to show (if you do not just want a button, but rather the feed itself). This one-liner can be placed anywhere you want the button to appear.

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://thoughtlessbanter.com/2011/11/23/furniture-for-men/" data-text="Furniture For Men" data-count="horizontal" data-via="johnbellone">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js">

That should basically the gist of how to get this functionality working on your website. Facebook offers more comprehensive widgets that take advantage of the social graph to display photos, and even information about user’s actions on your page. There is beta examples of how to post directly to the new Facebook Timeline feature that will be rolling out to your profile shortly. As more and more of these snippets become available you should consider both the advantages and the disadvantages of using them. I know that many user’s are worried about privacy and tracking that all the social sites are beginning to do. It is quite possible in the future that this type of functionality will be opt-in rather than opt-out and it may not work with the breadth of your user’s without their explicit consent. So be wary designing your website around these widgets specifically.

This meant that I was no longer tethered to the limitations of the infrastructure provided by the website. My previous host got swallowed up by Rackspace and went to shit. A few months ago someone told me about Linnode as it is a local Jersey business, so I started to check them out, and finally bit the bullet today and started the migration process from my old host to this brand spanking-new piece of iron. It took me about an hour and a half to get the blog post that you’re reading up and going. Not too shabby.

I’d like to reminisce for a moment: I remember way back when I had to work with someone that was paying hundreds of dollars a month for hosting to get ten megabytes and a subdomain for their account to start a video game portal in the late nineties. These bastards were being charged, by the subdomain, some absurd amount by the web host to set up a few DNS records. Now, mind you, it took sometimes several days for DNS to propagate across the Internet back then. I was able to accomplish this feat in the matter of about fifteen minutes, and ironically enough, the last machine that I had access to to actually receive the DNS update was my previous virtual host. Bastards.

So if you’re going to take the leap to virtual cloud hosting, give Jersey some love and set it up on Linnode.com, and by clicking on that link you’ll give me a free credit for $20 if you sign up for three months. Not going to lie, I completely wrote this post to hopefully get two or three of you poor schmucks to get me a month of free hosting. But hell, I’m going to be posting more set up information regarding my LAMP stack in the upcoming day or so. Free consulting as far as I am concerned.

As always, go fuck yourself.

There are some obvious advantages to this set up: Nginx can serve up all of the static content very, very quickly without having to send it down to the Apache instances to process. This frees up those daemons to only serve application logic, which in this case is the WordPress PHP application, but would work for nearly anything that you have set up with it. I will give you a quick example of the configuration that I have set up for this site.

This is the main configuration file for the Nginx application. Most of the commands here I have plucked from various tutorials across the internet, specifically dealing with the gzip settings, and as you can see there are a few connection and process related settings. These can all be tweaked at your desire, but I find that they work best on my low load cloud virtual server. The information to note here is the location of the proxy server (127.0.0.1:8080) that the requests will be sent to, as well as some folders for errors, logs, etc. These are all standard with the Nginx installation from aptitude and should be modified to suite you. Note the section where we include any scripts that are in /etc/nginx/sites-enabled/* which is similar to the set up of the Apache portion of the LAMP stack.

/etc/nginx/nginx.conf

user  op;
worker_processes  2;
 
error_log  logs/error.log warn;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
pid        logs/nginx.pid;
 
events {
    worker_connections  1024;
}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
 
    access_log  logs/access.log  main;
 
    gzip on;
    gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_min_length 1100;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers 16 8k;
    gzip_disable "MSIE [1-6].(?!.*SV1)";
    gzip_vary on;
 
    include /etc/nginx/sites-enabled/*;
 
    server {
        listen       80 default;
        access_log  logs/host.access.log  main;
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
        location / {
                 include /etc/nginx/proxy.conf;
                 proxy_pass http://127.0.0.1:8080;
        }
    }
}

This configuration file sets up the particular domain inside of the Nginx proxy. It covers both the fully qualified domain name and the alias, and provides the root directory for serving up the static content. If there is content that you do not want to be served up (e.g. you have a public folder) make sure to point this only to your assets directory. We set up the path for logs to be written to (you’ll have to mkdir -p those directories) as well. The real gem here is the regular expression that specifies what static content will not get fielded off to the apache daemons. Obviously you can make any corrections here that you see fit. When you are done set up a symbolic link in /etc/nginx/sites-enabled/.

/etc/nginx/sites-available/thoughtlessbanter.com

server {
 server_name www.thoughtlessbanter.com thoughtlessbanter.com;
 root /path/to/thoughtlessbanter.com/;
 
 access_log /var/log/nginx/thoughtlessbanter.com/access.log;
 error_log /var/log/nginx/thoughtlessbanter.com/error.log warn;
 
 location ~* ^.+.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|mid|midi|wav|bmp|rtf|js)$ {
              access_log off;
              expires 30d;
 }
 
 location / {
              include /etc/nginx/proxy.conf;
              proxy_pass http://127.0.0.1:8080;
 }
}

This little tidbit is necessary to send over the header information from the HTTP client to the Apache daemon. These proxy settings, with this configuration set up, will affect every single web request, so be careful with what you modify here. There are additional parameters involving the maximum size of a payload, send, connect, and read timeouts, etc. These can all be looked up with a quick Google search and modified freely.

/etc/nginx/proxy.conf

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

Last you’ll need to modify your virtual host for all of the websites to now accept the connection on the new port, 8080, which is were Nginx will proxy the requests to. Be sure to set the server alias for both the fully qualified domain, and the shortened one. I am not an Apache configuration guru here, so some of the other options may not be applicable, but they seem to do the job for me. Most of my domains are further configured appropriately in the .htaccess in the document root directory.

/etc/apache2/sites-available/thoughtlessbanter.com

<VirtualHost *:8080>
              ServerAdmin jb@thunkbrightly.com
              ServerName thoughtlessbanter.com
              ServerAlias www.thoughtlessbanter.com
              DocumentRoot /path/to/thoughtlessbanter.com
              <Directory />
               Options FollowSymLinks
               AllowOverride All
              </Directory>
              <Directory /path/to/thoughtlessbanter.com>
               Options Indexes FollowSymLinks MultiViews
               AllowOverride All
               Order allow,deny
               allow from all
              </Directory>
 
              ErrorLog /var/log/apache2/thoughtlessbanter.com-error.log
              CustomLog /var/log/apache2/access.log combined
</VirtualHost>

When you have made all of the changes feel free to restart the services and test your website. Once all the instances are bounced you should be able to point the browser to the location and still bring up your website. If you check the logs located in /var/log/nginx/ and /var/log/apache2/.log you should be able to see your static content requests hitting nginx, and being served up right from there. The apache daemons will now only serve the application logic.

Let me know what you think. I’m sure I’ve made a few mistakes.

Earlier in the year I installed a developer preview of Lion which did not seem to include too many features. In fact, I did not even remember that I installed this, and when it came to the Mac App Store at first it believed that I already had Lion installed. After some searching through Google and forum posts I was able to figure out how to reset the Mac App Store and get Lion downloaded. The installer kicked off without any problems. This is when the proverbial shit hit the fan.

I was greeted with a failure message that basically told me jack squat. My disk was corrupt and unable to be repaired by the Lion installation image (or the bundled Disk Utility program). This was a real problem. After some quick searching some fellow patrons suggested trying a repair installation with the original Snow Leopard installation disk. I tried this and was met with a little success – I was now greeted with a seemingly updated installer that included Safari and an updated version of Disk Utility. But to no avail was I able to actually get Lion installed on the disk. My laptop was effectively a brick.

Since I was actually busy this weekend (riding the Monster around New Jersey) I decided that I would make an appointment to see the “Genius” bar at the heralded 5th Avenue Apple Store in New York City. This was a big mistake. Despite making the appointment an hour and a half ahead, arriving fifteen minutes before my appointment, it took them a full hour to actually see me. Not the best service thus far. The “Genius” that I met with was baffled at the problem claiming to never have seen the installation do this to a laptop. Great.

What really complicated the matter was that I was using FileVault to encrypt my home directory just in case my laptop got stolen. If it wasn’t for this fact I would have merely copied all of my music, photos, and documents over from the directory to an intermediate storage device. After completing the re-installation of Lion I could copy it over and all is good. But, rightfully so, this was not the way to actually complete the measure.

Now I am writing this without actually attempting to open up the encrypted sparsebundle that my data is stored in. I have a copy on an external drive that I mounted in the Lion installer, and copied over the files from the Terminal application. The actual Lion installation (after using Disk Utility to erase my main disk) went smoothly without a hitch. All of my applications were installed and ready to go after about an hour and a half.

The only thing that remains right now is getting the sparsebundle mounted unencrypted so I can extract the data, and figuring out why my instructions for using a third party device to backup with Time Machine don’t work. It is looking like that Apple is requiring the use of AFP protocol for Time Machine backups. This won’t be too much of a problem as the open source netatalk solves this for all of you Linux users, but for people using an integrated device that runs a stripped down version of Linux it may be a little bit of a pain to get this on the device. Nevertheless, I am on the problem.