Facebook & Twitter Web Site Integration

Social networking has truly revolutionized the way we communicate — it has enabled businesses to have direct access to potentially millions more consumers with relevant interests. Unless you’re a social holdout, you’re probably already making use of social media channels to engage and connect with your site’s audience. This might be Share or Like buttons on your content pages, a stream of your recent tweets or your Facebook status update.

But to properly position yourself in the social space, you need more than just Share buttons and activity feeds. In addition to these, you can consider other social tools that integrate better and seamlessly with your website. Facebook and Twitter offer various widgets and APIs that provide added social integration for your site to take advantage of the direction the Web is heading.

In this article, we’ll take a look at some of the other types of integration that the two most popular social networking sites, Facebook and Twitter, offer.

Facebook

Widgets & Plugins

Facebook offers several simple-to-implement copy and paste social plugins:

Like Box

The Facebook Like Box is foremost different from the Like button. It empowers you with a ‘Become a Fan’ button and also showcases a list of random people that “Like” your site. When placed on your homepage or within a sidebar throughout your site, the Like button can help you attract and gain more subscribers to your Facebook Page. The Like button can also be configured to display a list of recent activities on your page.  In my opinion, it looks better when it is a minimalist-style.

Send Button

The Facebook Send Button was introduced earlier this year and replaces the ‘Email to a Friend’ widget. By placing the Send button on your content pages, your site visitors can send that particular article or page to friends, groups or any email address. Unlike the Like Button which only posts content to a wall, the Share button provides more methods for users to share your content – and best of all, Send Buttons counts towards your overall ‘Like’ count.

Comments Box

The Facebook Comments Box is a handy plugin that allows Facebook users to leave comments on any of your pages. Site administrators can also moderate comments (delete, ban users or boost a comment). The one aspect that I love is the automatic sign-in which logs the user in – this feature promotes easy participation. The downside of this plugin though is that it is not SEO friendly in its purest implementation, because it is rendered in an iFrame – search engine bots do not index iFrames. On the other hand, you can leverage the Facebook Graph API to pull comments in plain HTML. The other thing to remember is, you can hinder participation from non-Facebook visitors if you only provide Facebook Comments.  So, it is wise to use this plugin in conjunction with another comment system.

Recommendations

The Recommendations plugin provides personalized recommendations to your site visitors even if they are not logged in your site. It takes into account all social interactions with your site (comments, likes, shares, etc) along with interactions made by the friends of the Facebook account to return highly personalized recommendations. These recommendations are usually in the form of object recommendations which can be an article on your site, a link or any other item that was shared by others on Facebook.

Registration

The Registration plugin allows your web site visitors to easily register on your site with their Facebook account. Note that this plugin doesn’t handle the actual registration, but provides a way for Facebook users to prefill your form’s fields with information pulled from their Facebook account. Visitors who do not have a Facebook account will be able to use the same form to sign up for your web site.

API

Facebook also offers an API, known as the Facebok Social Graph API. The Facebok Social Graph API allows you to access and write data to Facebook through a REST protocol. If you’ve never worked with an API before, it can be a bit daunting to start with; however, there are several libraries and classes that you can use to get started.

Below is a list of selected PHP & ASP.NET toolkits that provide a good abstraction to Facebook’s Graph API (the toolkits also provide some great usage examples):

Facebook Login


Easy authentication with Facebook is perhaps the most common usage of the Facebook API.  The Login API allows users access to your site without having to create an account. You can authenticate users on your web site by allowing them to provide their Facebook login credentials; all the while capturing their personal information and requesting permissions like ability to write to their wall, send them messages or upload photos and videos.

Toolkits: PHP, ASP.NET

Facebook Friends Invite

Facebook Invite allows your site visitors to send invite requests to their friends.  In turn, their friends will visit your site, join an event, or get involved in other participation-based activities – an excellent way to drive more awareness to your site.

Toolkits: PHP, ASP.NET

Facebook Bookmark Button


By providing a Facebook bookmark button, you can empower your Facebook visitors an easy and fast way to save your site’s pages within their Facebook account. This can increase the chance of someone returning to your site.

Toolkits: PHP, ASP.NET

Facebook Stream Publish


Stream publish allows you to provide an easy way for users to publish sotries on user profile, friends’ profile or to a Facebook page. It supports publishing content, image, video and Flash content. The API will takes care of all file conversion.

Toolkits: PHP, ASP.NET

Twitter

Widgets

One-Click Follow Button

The one-click follow button was launched a couple of months ago and provides an easy way for your visitors to follow your Twitter account without having to leave your site. As pointed out by Twitter in its announcement post, the addition of the one-click follow button allows your audience to be more connected and engage with your Tweets.

Search Widget

The search widget is similar to the profile widget that displays a list of your most recent Twitter updates on your website except that you can configure it to return results for a specific search term. For example, you can configure the widget to display tweets that contain a specific hash tag or @ replies.

Twitter API

As always, APIs allow you to gain more control over the data you can fetch or write to via a service. Here are some of the most common uses of Twitter’s API:

Fetching Streaming Tweets

The Twitter API allows you to gather tweets for selected keywords from its database. You can in turn store these in your own database or display them on your site. This is very handy if you’re building a mashup application.

Resources: Twitter API Library in PHP, ASP.NET Tutorial on how to display real-time tweets

Posting Status Updates

You can automate your status updates from your web site application to your Twitter account using Twitter’s API. Most popular CMS’ have plugins that allow you to post a tweet – with a link to your article – as soon as the article is published. However, you can take a look at the following resources if you’re working from a custom application and need that functionality:

Resources: PHP code on how to tweet remotelyTutorial on how to post status updates using ASP.NET

Twitter Login

Similar to Facebook’s Connect, you can add a way for your site’s audience to login your web site using their Twitter credentials. The implementation is based on the OAuth API, and the documentation on the Twitter’s website is fairly easy to follow. If you prefer easier implementation, you can use these wrappers:

Resources: Twitter PHP Login Wrapper, .NET Library for Twitter Integration