Cykod

How To: Social Plugins

by Pascal Rettig posted Jul 29, 2011

 

[ This is a Guest Post from Cykod Intern James Burke ]


This is a follow up post to the talk I gave recently on Social Plugins and Widgets at the Boston Front End Developers Meetup.

Social Plugins are still a fairly new concept. While widgets that track visitors or display RSS feeds have been done to death, Facebook breathed new life into social sharing with their Facebook Platform and Social Graph. Since debut, Facebook has been storing user information and building a huge network of data. With the debut of Social Plugins, any site can take advantage of the social giant Facebook has become.

 

Facebook’s Open Graph Protocol:

Access to Facebook’s Social Graph is accessible through their aptly named, Graph API. Nearly all Facebook public data is available through this graph. People, pages, events, photo galleries, etc. The ability to see this information is a very cool and powerful way to do analytics research.

We’re going to use this platform to socialize our websites. In order to properly integrate our web pages, we need to turn our content into a form that Facebook can recognize. We declare this information as meta data in the page header. There are a bunch of properties to use, but Facebook requires these four specifically:

 

So in my example for Cykod.com, the Open Graph tags would look like this,

<meta property="og:title" content="Cykod"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://cykod.com/"/>
<meta property="og:image" content="http://cykod.com/system/storage/3/11/logo.png"/>
<meta property="og:description" content="A forward thinking, Rails-based web start-up looking to change the way you interact and play with the web."/>

You can take a shortcut for your Open Graph tags by skipping to step two on the Like plugin page.

 

Like/Share Button:

This is a really simple one to implement. Just follow along on the Facebook documentation.

There’s a form to help you out. Enter in the content you like, and compare to the live preview.

Like/Share button options:

XFBML or IFrame?

 eXtended Facebook Markup Language is Facebook’s very own specialized XML markup to quickly add these plugins.

IFrames are HTML tags that allow other pages to be embedded as a frame within another page. These are quick and easy to implement, but carry accessibility and SEO concerns.

In my opinion, XFBML is a cleaner approach with more options. It gives you —the developer— more control over the code.

 

Comments:

The comments plugin is pretty cool. In just a few minutes, your entire site can be up and running with a fully-fledged comment and moderation system without worrying about login/registering users.

Similar to the Like button we just covered, Facebook offers a nice form that generates the code for us.

After entering your site URL, your code will look like this:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="example.com" num_posts="2" width="500"></fb:comments>

Special Note: If you want each page on your site to have a different comment box (versus a side wide comment thread), then you’ll want to replace the url found in the href attribute. Using your favorite server side language, print out the url of the current page. For example, in Code Igniter (a PHP framework), I have a global function current_url(); that will return the —wait for it— current url. so, <fb:comments href=”<?php echo current_url(); ?> ...  creates a different comment thread for each page. Try Googling "{language of choice} print current url" if you need more help with the back end.

   You should see the comment box being displayed. Make sure you’re logged into Facebook and enjoy your quick commenting system!

 

Posting a message on the user’s wall:

The JavaScript SDKoffers us a bunch of additional tools to play with user data. First though, we need to take a short detour and setup a Facebook application page (so Facebook knows who is asking to publish content).

We’re going to focus on the first example from the Social Channels page. We want to prompt a logged in user to share a link on their wall. Facebook gives us the following base code.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true });
FB.ui({ method: 'feed', message: 'Facebook for Websites is super-cool'});
</script>

The first two lines should seem pretty familiar. We have the #fb-root again, as well as the JavaScript sdk.

Additionally, the FB.init and FB.ui methods are called right away;

FB.ui will execute as soon as the page is done loading, which is not the best scenario. We would really like it only occur after clicking a link. Let’s wrap FB.ui in a method we can then easily call.

<script>
function postToFacebookWall(content){
FB.ui({ method: 'feed', message: content});
}
</script>

<a href=”javascript:postToFacebookWall('This is our content!');”>Click here to share this page on your Facebook wall</a>

When a user clicks on our link, we call the FB.ui to prompt a post. We pass the content parameter to populate the message value within FB.ui. This should give a bit more control when creating new links.

 

Other Sharing:

Besides Facebook plugins, there’s a whole world of different sharing plugins. Thankfully, they’re all very similar in code and usage. Nearly every instance you come across will have a form to generate customized code for you.

  • Twitter - Tweet Button
    • Select your shape, the default tweet text, what URL to focus on, and you’re done! Copy, paste, and tweet!
  • Twitter - Follow Button
    • Enter your user name. Copy, paste, follow!
  • Google Plus - Plus 1
    • The newest kid on the block, the asynchronous code looks worse than it is.
  • LinkedIn - Share Button
    • You may want keep this one away from your cute kitten Tumblr.
  • Delicious - Save Buttons
    • Although it may not be around for much longer, Delicious was the original social bookmarking website.
  • Digg - Digg Button
    • One of the earliest implementations of the social sharing.
  • Reddit - Reddit Buttons
    • Arguably where all the former Digg users now live.

Group Sharing Widgets

Easily embed dozens of Social Widgets at once. These take the guess work out of your code and make it very easy to share. There are a bunch more, but these are generally the top three options.

 

Building social functions is a tricky task, but these social plugins help the hurt. Optimized by some of the best engineers in the industry, these code snippets will help your site grow and make sharing content easy.

Make sure you dig through the Facebook documentation and let us know how you integrate social into your sites!

 

 


 

James Burke is the summer intern at Cykod. He is a front end designer and developer from Pennslvania, going into his senior year for Computer Science.