Almost every person, company, hobby, or group wants or needs a home page somewhere on the web, and a social network presence provides a presence that is easy to set up and manage, even for nontechnical people. All social networks provide at least one page, say your profile page, while others allow you to create multiple pages, all within their platform. For this book, we created a Facebook page in under 5 minutes as shown in Figure 18.13.

Figure 18.13 Screenshot of Facebook pages for this textbook

Your page comes with a URL, which is normally professional enough looking that you could use it as your primary web page on the WWW. The next step is to link to these pages from your existing site, and perhaps elsewhere, such as your email footer and business cards, often using logos from the social network itself. Whether it be Google, Twitter, Facebook, LinkedIn, or another, creating a link to your presence is a straightforward way to associate with a social network.

In social networks like Twitter, shorter URLs are preferable to long URLs, since they leave more room for other content.

To address this potential challenge, Twitter includes a built-in URL shortening service with your account so that URLs are automatically shortened when you post. Popular ones from the other major players include t.co, goo.gl, bit.ly and ow.ly.

These services add a crucial step in between clicks and the ultimate destination, your URL. As illustrated in Figure 18.14, they provide an opportunity for the third party to collect statistical click data and may prevent the links from working if the host ever goes down. Malicious URL-shortening services can also sell the URLs to other parties, turning potential traffic for you into traffic for another company (often a few weeks after you create the link so that it works as expected for a while).

Figure 18.14 Illustration of a URL shortening service

Beyond the basic social media presence anyone might have, the major social networks have long been trying to expand their reach beyond their own web portals onto regular websites in the form of easy-to-use plugins, which anyone can deploy. You will next learn a little about Twitter and Facebook plugins in the following sections. These plugins (sometimes called widgets) allow you to integrate functionality from the social network directly into your site by simply adding some JavaScript code to your pages. The advantage of approaching these widgets as a web developer is that we can delve deeper into controlling and customizing these third-party tools than the non-developer.

To include the Facebook libraries in your website in the long term, you will have to first register as a developer and get an application ID. Going back to Chapter 18 on security, you might recall how public and private keys are used for authentication and validation. Using your APP_ID, you can then include Facebook’s JavaScript libraries from Listing 18.7 in your webpage. Notice that it creates a FB object that allows your JavaScript code to interact with Facebook plugins. The loading of the plugin is asynchronous, so your users will not have to wait for a response from Facebook before loading your page.

<script>
  window.fbAsyncInit = function() {
   FB.init({
    appId        :'your-app-id',
    autoLogAppEvents: true,
    xfbml        :true,
    version      :'v7.0'
  });
 };
</script>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js"></script>

The details of getting an application ID are straightforward. Log in to Facebook and check out https://developers.facebook.com/ to get started.

With the Facebook classes loaded in JavaScript, you can take advantage of it to automatically parse your HTML page for certain tags, and replace them with common plugins. The Like button, being the most widely used, can be included simply by defining a <div> element with the class fb-like, and some other custom attributes as shown in Listing 18.8.

<div class="fb-like"
   data-href="http://funwebdev.com"
   data-width="450"
   data-layout="standard"
   data-action="like"
   data-size="small"
   data-share="true">
</div>

When the page loads and the FB object parses the page, it will see the DOM object with class fb-like and use JavaScript to embed the familiar Like button as shown in Figure 18.16.

Figure 18.16 Screenshot of the Facebook Like social plugin

Although the HTML5 version of the Facebook Like widget works fine, Facebook limits customization of various aspects to its own eXtended Facebook Markup Language (XFBML) version of the widget.

XFBML is the primary way to create Facebook social plugins, since in the authors’ experience it is better supported than the more accessible HTML5. Sometimes XFBML’s extra functionality is essential when doing more complex things than a Like button or comment box.

The beauty of social network integration is how by liking a page (by clicking the button) a story will then appear in a user’s newsfeed inside the Facebook site talking about the page that they just liked. Newsfeeds are filled with posts by a person’s friends, meaning a like from one person will generate a story that appears both on that person’s home page and the newsfeeds of their friends.

While the Like button works either way, how it appears in your newsfeed will depend on the scraping that was done by Facebook. In our case, the newsfeed item doesn’t look great with a LinkedIn logo being the image for the page, and the details are unclear (shown in Figure 18.17).

Figure 18.17 Screenshot of story on a Facebook newsfeed, generated in response to clicking Like

To control what Facebook uses when displaying items in your newsfeed, you must use Open Graph semantic tags to create Open Graph Objects in your HTML pages, which is covered in a later section.

To illustrate how easy subsequent social plugins are to create, consider adding the Follow Me button, which allows a Facebook user to follow a Facebook page, by simply adding the XFBML code shown in Listing 18.9 into your webpage.

<fb:follow
     href="https://www.facebook.com/fundamentalsOfWebDevelopment"
     width="450"
     show_faces="true">
</fb:follow>

Comments are an important aspect of a modern website. It’s interesting that many media companies have adopted Facebook comments over in-house systems to try and eliminate anonymous commenters. The code for the social widget takes only one parameter, the page being commented on, as illustrated in Listing 18.10.

<fb:comments
     href="http://funwebdev.com" width="470">
</fb:comments>

To use Open Graph markup, you must first add the prefix modifier to your <head> tag as shown in Listing 18.11. After that, <meta> tags about the application, title, and image can be used to set the values of items in the improved newsfeed item shown in Figure 18.20.

Figure 18.20 Annotated relationship between some Open Graph tags and the story that appears in the Facebook newsfeed in response to liking a page

<head prefix="og: http://ogp.me/ns#">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="http://funwebdev.com/">
<meta property="og:title" content="Fundamentals of Web Development">
<meta property="og:site_name" content="Fun Web Dev">
<meta property="
og:description" content="Randy Connolly and Ricardo
                Hoar are working on a book">
<meta property="
og:image" content="http://funwebdev.com/wp-
                content/uploads/2013/01/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="424">
<meta property="og:image:height" content="130">
<meta property="og:type" content="book">
</head>

The most common Twitter action you tend to see is people tweeting about an article or video by embedding the URL into the tweet. The Tweet This button does exactly that, and it is the easiest of all the widgets to add with nothing to change when embedded from page to page. The button in Figure 18.21 requires the markup in Listing 18.13.

Figure 18.21 The Tweet button

<a href="https://twitter.com/share"
   class="twitter-share-button"
   data-hashtags="web">
Tweet</a>

The Follow Me button (shown in Figure 18.22) is just as straightforward. Simply create an <a> tag with the Twitter URL of the account to follow as the href attribute, and use the class twitter-follow-button as illustrated in Listing 18.14. Having people follow you means that they will see your posts in their stream and can exchange personal messages. The more followers you have, the wider your potential reach.

Figure 18.22 Twitter Follow button

<a href="https://twitter.com/FunWebDev"
   class="twitter-follow-button"
   data-show-count="false">Follow @FunWebDev
</a>

The most recognizable thing in Twitter is the display of the last few tweets by a particular person, often used in the sidebar of your site as shown in the preview pane in Figure 18.23.

Figure 18.23 Screenshot of the Twitter Widget code generator

The code, shown in Listing 18.15, uses not only the user’s Twitter URL, but an additional field that cannot simply be guessed: the data-widget-id field. Twitter generates this field only when requested by a user through the web interface (Settings > Apps) as shown in Figure 18.23. That means you cannot simply create timeline feeds for anyone whose ID you know, unless they agree to go through the process of defining this widget on your behalf.

<a class="twitter-timeline"
   href="https://twitter.com/FunWebDev"
   data-widget-id="365338105127002112">
Tweets by @FunWebDev</a>