Articles


How to Put Social Media on Your Web Site

Facebook, Twitter, myspace, Digg... everyone wants to be connected and communicating

Copyright © 2010 Dorian S. Cole

Time dated material, August 20, 2010: This Web content is based on HTML 5 and CSS 3 specifications, and current social media standards. It is not likely to be up to date after a few months.


 
Summary

Social Media is exploding. Everyone wants to be a part of this "connectedness" and "instant communications," from people who surf the Web to organizations that want their messages out there in the mix. Most of these social media companies try to make it easier to use social media, but it can be a daunting task. For example, Facebook introduced FBML, but placed no examples on its developers site. This article explains some of the rudimentary coding. Check with the social media site for their developer recommendations.

Getting started

If you plan to use Facebook or Twitter, you need an account (subscribe), to these. For both, you will need to sign in as a developer and get an application id. Others have described this process on numerous Web pages. This will also enable you to use Facebook statistics. (You can also use Google statistics to track clicks, instead of Facebook. I don't describe statistical tracking here.)

You are also going to need a collection of icons from these sites to put on your page. The size depends on how you design your page. Icons are available from these social media sites.

The Experience Project (http://www.experienceproject.com/), is a place where users are not limited to a sound byte and can write about their experiences in depth. You can link to the experience project, a part of the project, or to your own experience.

Future: Google is rumored (July 2010) to be working on another social media site that may have attributes similar to Facebook. They have the capacity to integrate Gmail and Google enterprise's other offerings, such as Google Buzz, Picaso (photo sharing), etc. Google keeps trying until they get it right, so watch for a new Google social media offering.

Determine where you will put social media links on your Web page. They might be best at the bottom of the page, so people use them after having read the content. I also use a bar with the icons only, at the top of the page, that either links to the actual social media boxes at the bottom of the page, or opens a popup with these.

Each of these social media sites have numerous applications that you can put on your page, from like buttons that link users to their accounts, to comment boxes that allow users to create their comment while on your site and then send it, to displays of other user's comments. None of these impose on user's privacy. See their site developer areas for more design details.

There are many social media sites, and more coming all the time. I describe here how to work with the ones that I use. Consult the social media site for the recommended code and applications.

HTML header

The header of an HTML document tells the browser important information about what the browser needs. HTML 5, a multi-year work in progress which is somewhat supported in major browsers already, makes the header much more simple. The doctype info is very short, and the XML namespace tag (XMLNS) tag is no longer necessary since HTML is becoming its own tree structure and is no longer based on XML schemas... except that Facebook does use the XMLNS tag for their FBML. Hopefully that will change. So your HTML header, if you use HTML 5, the first part of your HTML header should look like this:

<!DOCTYPE html>
<html lang="en" xmlns:og="http://opengraphprotocol.org/schema/" 
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8" />
  • Note that meta charset is not required - utf-8 is assumed, and detected by the browser.
  • Use the "opengraphprotocol" url if you want Facebook statistics.
  • The Facbook xmlns tag will cause an error in the HTML 5 validator. Ignore it - it will work fine. Note that the W3C validator automatically accepts HTML 5, recognizing it from the doctype.
  • Important: You can copy this from your browser, and it will work, but copying won't work from the page source code.
  • Important: This page is in the UTF-8 character set. If you copy, the code must be put into the character set used by your web page composer. Older composers typically use ANSI type 8859-1, or a variation, the initial Web standard. Browsers gag on mixed character set types, and spew out unrecognizable characters.
  • If you are in need of an HTML composer, especially one that will convert between character sets, I highly recommend Notepad ++, which is a text editor that indicates markup for HTML, scripting (JavaScript, PHP, etc.), and several other coding languages. If you need a visual (WYSIWYG) editor, I recommend Amaya. Both tools are free, but Amaya does not yet support HTML 5 (August 2010 - work began in June).
  • To convert text from one character set to another in Notepad ++, all you do is paste the text into a new document, click Encoding menu and select Convert To (encoding type), save, and your text is converted.

If you use XHTML (transitional - which allows deprecated tags and loose validation), the first part of your header should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" 
   xmlns:og="http://opengraphprotocol.org/schema/" 
   xmlns:fb="http://www.facebook.com/2008/fbml">

If you use plain HTML, just add the following line under the DOCTYPE line: 

   <html lang="en" xmlns:og="http://opengraphprotocol.org/schema/" 
   xmlns:fb="http://www.facebook.com/2008/fbml">

Myspace uses a simple meta tag to identify content, as shown below. Twitter uses a script in the header. After the <title> tag, for HTML, HTML 4, HTML 5, and XHTML, (basically all), depending on the social media you use, add the following information to the header:

<!--For MySpace,  200-300 characters max.:-->
<meta name="description" content="The description of your content - 
probably the same as the document title /> 
<!--http://wiki.developer.myspace.com/index.php?title=
How_to_Add_Share_on_MySpace_to_Your_Site 
and http://wiki.developer.myspace.com/index.php?title=Developer_Analytics-->
<!--For MySpace  255 characters max -->
<link rel="image_src" href="IMAGE_URL_GOES_HERE" />
<link href="../css/css.css" rel="stylesheet" type="text/css" />

<!--For Twitter-->
<script src="http://platform.twitter.com/anywhere.js?id= - insert your id here - &v=1" 
type="text/javascript">
</script>
<!--For Digg-->
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

Body - content coding

Facebook offers the choice of either adding their Like Button through an iframe, or by using the more versatile FBML JavaScript code, which lets you put in the Content box and any other Facebook applications. If you use the iframe, you can put it in a table, if you want, or in a div that is styled for size, etc. If you want to use a Comment box, the FBML code can go basically anywhere. 

<fb:comments xid=" 'your app id' " width="300"></fb:comments>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Important: Be sure to insert your Facebook application ID in place of " 'your app id' ," in both the first and fifth lines of code.

Important: The first line of the code, <fb:comments xid=" 'your app id' " width="300"></fb:comments>, is not part of the SDK code. This first line is the part that actually creates the Comments box. Other social media applications can be specified instead of the Comments box. See the Facebook developers site. The rest of the lines are scripting to make the application work. Be sure to include the first line, or an alternate, or nothing will appear on the page.

The Digg link is very simple. It puts in the Digg button automatically and picks up the URL of the page to send automatically: 

<a class="DiggThisButton DiggMedium" href="javascript:void(http://digg.com/submit?
url='+encodeURIComponent(document.location.toString())"></a>

Important: The link above is broken into two lines to make it fit the page. Remove the line breaks if you use this code.

The myspace link also can be operated by JavaScript, as shown below:

<a href="javascript:void(window.open(
'http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(
document.location.toString()),'ptm','height=450,width=440').focus())">
    <img src="http://cms.myspacecdn.com/cms/ShareOnMySpace/large.png" 
	style="border:none;" alt="Share on MySpace" />

Important: The link above is broken into three lines to make it fit the page. Remove the line breaks if you use this code.

Twitter works from a simple script. Simply paste it into a table or div: 

<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {

    T("#tbox").tweetBox({
      height: 40,
      width: 300,
      defaultContent: ""
    });

  });
</script>

Putting it all together

I prefer to put my social media links all together into one package that I can reuse for all site pages. Then if I ever have to change the links, or add to them, I can change one page of code, and not have to change every page on the Web site. There are a number of ways to do this. If your Web page is PHP or ASP, then you can simply include the page when it is assembled on the server. To include this on the client side, use an iframe or script file. Facebook FBML has special requirements to put in an iframe, so check the Web for other's details on how to do this (search: FBML iframe). You can also do this with a script file, but it requires special processing of the HTML with escapes and coding, or it won't work.

If you need an example, contact me.

- Dorian

 

 

Dorian's Twitter Feed