You may have noticed that there are several websites now that included integration with social networking websites such as Facebook, Google Plus and Twitter. These small buttons allow your user’s to share content instantly with their friends. Depending on which you’re including on your site it’ll show up differently, and each has a separate process to include them on your blog’s pages. Since I am using WordPress I will explain how to do this, but if you follow the example it should work in the broad case as well.
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.
A decade ago most of America connected to the Internet through some form of copper telephone line, and America On-Line was the service to be on. I remember dialing into a local telephone switch because hours on the Internet could run you hundreds of dollars in long distance fees. Oh boy has the landscape changed. The slowest cellular network available is still much, much quicker than the 56K dial up that I grew up with.
My good friend Kenny Katzgrau has written a blog post about his thoughts about the social networking phenomenon and some questions that he has about new “boom.” Has the service that Mark Zuckerberg stole pioneered a new type, a new form, of real-time communication and interaction with the world?
These social services such was Twitter and Facebook both provide a new medium to communicate around the world. This instant, publish-anywhere, status update has much more power than merely giving your ex-girlfriends the ability to stalk you on their iPhone. In merely 140 characters millions of people convey joy, hatred, love and disgust for anything and everything. Our thoughts, what we might have once kept to ourselves, can now be broadcasted to millions of people who are drooling to read the next quip from Ashton Kutcher. Mere mortals have become super stars because of Twitter.
Is this much different than Yahoo Chat a decade ago? There were literally thousands of rooms available for all sorts of pleasures. This then, instant communication tool, was a first of its kind. Yahoo pioneered one of the first social network web site providing photo profiles, chat services and much more – five years before Facebook even existed. Why am I going on and on about history?
- How will Facebook and other social networks become even more real-time?
I think that this answer is less about the technology and more about the ability to integrate, aggregate, information in a single package. A few years ago web portals such as Yahoo were shunned – we wanted the minimalistic design but the amazing power of Google’s search solution. We didn’t need a directory curated by Yahoo minions. But what is the most interesting morsel is that we are now looking to integrate services because it is a pain in the ass to deal with the replication of data and information.
As human beings we do not want to have to continually type in the same information into different services. I want to be able to log into websites with my Facebook account, and update my status on Facebook via Twitter. Why do I use Twitter instead of Facebook? Market share? Hype? Twitter definitely does not have a technical advantage over Team Zuck.
I believe that the future is aggregation. Facebook et al are going to integrate with each other. New data is going to be created because of this, and services will crop up to mine, analyze and display this information in new, interesting ways. Google realized early on that data and information is king.
- How will desktop software fit into the picture?
All of the JavaScript engines will eventually fall into oblivion and the Internet browsers will go with it. We’re going to see less and less differences between browsers and more focus on integrated experiences with services. In the case that Kenny brought up, Rock Melt, a browser designed with social connectivity in mind, is a first step towards this. Google has introduced a plugin-based software extensions for its Chrome browser. We’ll be using more and more services over the air via web API endpoints and less of the actual service through their web sites. The new crop of Internet businesses will be “cloud computing” style service-oriented websites that sell access to their API and offer a limited front-end to an overly simplistic service.
- How many investors will spend money on social applications?
What exactly isn’t a social application now on the Internet? Any new business will need to embrace the social aspect of the Internet or another business that does is going to crop up and displace them. Very few services are going to be able to get away with this.
- What is the sum of it all?
As I said before this is leading to an Internet that is a jumble of inter-connected services that are all providing data, for a price, to any client that is able to access the public API. We’ll a lot of services that both combine two competitors’ data into an application that trumps the user experience of both. The future of the Internet is decentralized information, plain and simple.
I could go on and on for hours regarding this. If any of you have thoughts please feel free to comment here, or head on over to Kenny’s blog and make sure to use both of our URLs in your WordPress callbacks!
The Twitter service is agnostic to your special characters that we use as annotations to #topics and @people. The community came up with these “features” as a way to facilitate conversation on a service that was meant to broadcast our daily meanderings. One of the main reasons why Twitter took off was its easy to use, well documented, and public API that can be used to literally build a client out of any computer language that knew how to handle HTTP requests. The service boomed, but the problem is that Twitter’s gold standard client was now left in the dust because all of these brand new kids on the block were offering features that the community invented.
Twitter web client as of November 2009
So let’s fast forward to the current day. The Twitter web client now incorporates almost every single feature that you can find inside of a third-party client. Any username that is prefixed with an @ symbol is properly highlighted and linked, and #hashtags that convey an idea (subject matter about the tweet) are highlighted as well. These subjects, when clicked, take you to the Twitter search feature which show you all the tweets “related” to that subject matter.
Now obviously it is not perfect. If you take a look at the daily trending topics people will append tags to the end of their promotional tweets to get to the top of the search list. We have brought ourselves back into the days of high school where everyone wants to be the popular kid of the block, wearing the latest clothes, and listening to the new music.
The problem that Twitter is facing is that they are competing against themselves. Because they are allowing outside clients to literally do nearly anything they want their “market share” is being chewed up by application authors. Will Twitter be able to survive? Well, that’s precisely why we are seeing the addition of Twitter Lists and the infamous Retweet features to the web client. These are ways that Twitter is attempting to draw back people to using the web service. A couple of months ago Twitter even hired an ex-Google web designer to spruce of their web interface, and let me tell you something, it looks a hell of a lot better now!
While the community still invents clients and services around Twitter they need to figure out a way to make some cash. Eventually the guys with the money are going to start pounding on the tables wanting a pay out. I enjoy the interaction that I am able to get by using Twitter, but the business side of me keeps asking How are they going to make money? Every time that I look at Facebook I keep thinking that eventually my Facebook information kludge is going to eventually be rebranded to Twitter when they dump a boatload of cash on the venture capitalists laps. Although the way that the Internet works you’ll see a clone in the works as soon as news of that merger hits the pipes.