Basic: Link to Social Pages

A basic but necessary way to integrate your organization’s social media on your web site is by adding hyperlinks to the organization’s pages on the respective social networks. A common practice is to add clickable icons that direct to your social pages (see Figure 13-1).

Subscribing: Following or Liking Social Pages

Another way of adding social networks on your site is through the notion of liking, subscribing, or following a social page (see Figure 13-2). Each social network has its own way of doing this. Note that there are differences in each network, such as liking a page on Facebook is not the same as following a page on Facebook.

Facebook is the social network most organizations get confused with. The popular comment is, “We need a Like button on our web site,” when what is really desired is a Follow button. The issue comes with the terminology used in day-to-day activities in using Facebook. When managing a Facebook page, we are seeking more Likes, which translates into users automatically seeing our updates on their feed. However, when we are on a web site, the Like button no longer means the same thing. When clicked, it tells Facebook that the user wants to tell his or her network that he or she likes this specific online web page. It has nothing to do with the brand it represents. If the requirement is to increase the company’s Facebook page’s number of followers, we need a Follow button.

All the different social plug-ins are available on the developer pages of each social network, the most popular of which are shown in Table 13-1.

Embedding a Feed on a Page

A common practice is to embed a Twitter feed of the organization’s account or to follow specific mentions and hashtags. In the example of social media integration shown in Figure 13-3, we added the Twitter feed in the footer of our site.

Sharing: Allowing Visitors to Share an Activity to Their Social Network

Also very popular, in this scenario the visitor can share what he or she is looking at, purchased or done to his or her social networks. This can be added in various contexts, from sharing the web site the visitor is on to announcements or blog posts inside the web site (see Figure 13-4). This aspect of integration has to be as quick and painless as possible to visitors, as otherwise they might just give up on their will to share.

Every social network comes with its own special interactions. More often than not, you will find many different social plug-ins available through each social network’s developer page. For example, one might want to use the LinkedIn Recommend button for each of the team members on the web site.

Planning the Implementation

One of the requirements for Specter Group was for the web site to be the central hub for visitors. From there, anyone should be able to visit Specter Group’s Facebook or Twitter page. However, the need for the links to the social networks was not so predominant that we would give them too much real estate on the page. We decided to go with a toggle menu that would show these networks if the visitor requested it.

Deciding where to put the links to the social networks can be challenging, especially in a responsive design. Obviously, the business requirements for the brand and the site have a large role to play in this. Are we trying to direct our audience to our Facebook and Twitter accounts where we have a strong established presence, or are we just providing links to them for those that are actively searching for them?

Having larger, more prominent links to the active social networks the company is using tends to lead the user away from our web site. This is done mostly when the type of service our site offers does not incite the user to visit often. Our company needs to keep a constant relationship with its audience and if there is no reason to come back to the site then the risk of losing that audience increases.

For these reasons, we decided that Specter Group did not need large accessible social network links because the audience will be coming back to visit the site often. For example, a clothing company will want users to visit and follow their Facebook page. The clothing company can then regularly update their site visitors and customers with new styles as seasons change.

Although we chose to limit the number of social networks shown on the social bar, we could not remove two very popular links, the RSS feed and a link to the YouTube channel. Although they are not necessarily considered social networks, they are often grouped with them and visitors have come to expect this presentation. The RSS feed allows visitors to subscribe to anything you have enabled an RSS feed for on your site. Most often this will be a blog or news section. YouTube, of course, is used to share videos.

Adding the Social Bar on a Site

We chose the social networks required for Specter Group and put them in a div that will only show up when requested. The best way to do this is to start without hiding them so that you can see the end result. In code shown in Listing 13-1 we add the HTML structure for our social bar, followed by the CSS in Listing 13-2 to style it. This social bar is added to the HTML master page we created in Chapter 4 and Chapter 5 so that it is available on all pages of the site.

Listing 3-1.  Adding the HTML for the Social Bar

<div class="social cf down">
   <ul class="cf">
       <li>
           <a href="http://www.facebook.com/spectergroup">
               <img src="img/social/Facebook.png" alt="Facebook">
           </a>
       </li>
       <li>
           <a href="http://www.twitter.com/spectergroup">
               <img src="img/social/Twitter.png" alt="Twitter">
           </a>
       </li>
       <li>
           <a href="https://plus.google.com/u/0/b/12345678901234567890/">
               <img src="img/social/Google+.png" alt="Google+">
           </a>
       </li>
       <li>
           <a href="http://ca.linkedin.com/in/spectergroup">
               <img src="img/social/LinkedIn.png" alt="Linked In">
           </a>
       </li>
       <li>
           <a href="http://www.spectergroup.com/feed">
               <img src="img/social/RSS.png" alt="Blog">
           </a>
       </li>
       <li>
           <a href="http://www.youtube.com/user/spectergroup">
               <img src="img/social/YouTube.png" alt="YouTube">
           </a>
       </li>
   </ul>
   <a class="social-toggle" title="Follow Us">
      Toggle
   </a>
</div>

Listing 3-2.  Adding the CSS for the Social Bar

/*social*/
header .social {
   position: absolute;
   top: -39px;
   right: 10px;
   height: 32px;
   padding: 0px 7px 7px;
   background: #993300 none;
   border-radius: 0px 0px 0px 5px;
   -moz-border-radius: 0px 0px 0px 5px;
   -webkit-border-radius: 0px 0px 0px 5px;
}
header .social ul {
   display: block;
}
header .social ul li {
   float: left;
   display: block;
   padding-left: 7px;
}
header .social ul li:first-child {
   padding-left: 0px;
}
header .social ul li a {
   display: block;
   width: 32px;
   height: 32px;
}
header .social a.social-toggle {
   position: absolute;
   bottom: -20px;
   right: 0px;
   display: block;
   padding: 0px 10px 8px 10px;
   height: 14px;
   width: 16px;
   background: #993300 url('../img/icon-arrows-vert.png') no-repeat 10px 0px;
   text-indent: -9999px;
   border-radius: 0px 0px 5px 5px;
   -moz-border-radius: 0px 0px 5px 5px;
   -webkit-border-radius: 0px 0px 5px 5px;
   -webkit-transition: all 0s ease;
   -moz-transition: all 0s ease;
   -o-transition: all 0s ease;
   transition: all 0s ease;
}
header .social a.social-toggle:hover {
   cursor: pointer;
}
header .social.down {
   top: 0px;
}
header .social.down a.social-toggle {
   background-position: 10px -25px;
}
.csstransforms.csstransitions header .social {
   -webkit-transition: top 500ms ease;
   -moz-transition: top 500ms ease;
   -o-transition: top 500ms ease;
   transition: top 500ms ease;
}
/*end social*/

Figure 13-5 shows the social bar that results from our code to this point.

As you can see, all of Specter Group’s networks were added in an unordered list inside a div. This div holds the list of icons as well as the toggle button we plan to use. To make the change as smooth as possible, add a class to your div called down that will simply change the top position of the div from off the screen to 0 from the top. With the help of the new CSS3 transition property and simple JavaScript with some jQuery to toggle the class down on or off, we have exactly what we need (see Listing 13-3).

Listing 3-3.  Provide a Click Function to Display or Hide the Social Icon Bar

<script>
//social
jQuery(document).ready(function($) {
   $('header .social a.social-toggle').click(function() {
       if ($('header .social').hasClass('down')) $('header .social').removeClass('down'),
       else $('header .social').addClass('down'),
   });
});
</script>

The code in Listing 13-3 enables the social bar to be collapsed, as shown in Figure 13-6, or expanded as we saw previously in Figure 13-5.

In this section, we built a simple social network bar that we added to the header of the Specter Group HTML master page. Now, in the next two sections let’s add a Facebook Follow button and embed a Twitter feed on our site.

Building the Basic Feed

When deciding to add a Twitter feed to a site, you must look at what kind of interaction or customization you are looking for. The Twitter developer site offers a “widget” generator that will be an embedded timeline based on your settings (see Figure 13-10). You can find the generator at https://twitter.com/settings/widgets.

There are a few reasons we might use the embedded Twitter feed. It’s quick and easy to create with a widget generator. A major disadvantage is that like the Facebook Follow button we saw earlier, it adds itself through an IFRAME on our page. Not only does that make it almost impossible to brand, but it isn’t friendly to our responsive design. Lucky for us there are other ways to add a Twitter feed on our site.

Use jQuery to Display a Twitter Feed

For the Specter Group site, it was important for us to incorporate our look and feel for the company Twitter feed. The default embedded timeline Twitter offers makes us work with an IFRAME, which is not exactly desired in this situation. Of course, we could create our own feeds with the documentation available on http://dev.twitter.com. We can run a search on Twitter and load the results as just plain HTML on our page. See Listing 13-5 for the script used to fetch the Twitter feed information.

Listing 13-5.  Add Twitter Feed Using jQuery

<!--we must link to the jQuery library if we have not already-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="twitter_feed">
</div>
<script type="text/javascript">
   jQuery(document).ready(function($) {
      var script=document.createElement('script'),
      script.type='text/javascript';
      script.src=
         'http://search.twitter.com/search.json?&q=%23SharePoint&callback=processTheseTweets&_='
         + new Date().getTime();
      // Loading it in Body
      $("body").append(script);
   });
   function processTheseTweets(jsonData) {
      var shtml = '';
      var results = jsonData.results;
      if(results) {
         $.each(results, function(index,value){shtml += "<p class='title'><span class='author'>"
             + value.from_user
            + "</span>: " + value.text + "<span class='date'>" + value.created_at +
                "</span></p>";});
         // Load the HTML in the #twitter_feed div
         $("#twitter_feed").html( shtml );
      }
   }
</script>

Another solution would be to use one of the many already available jQuery libraries for Twitter feeds. For Specter Group, we used the open source project from Github called seaofclouds. It is available in the form of a jQuery library and all it requires is a few settings to let it know what you want to display. The advantage of using a plug-in such as this for your web site is the immense capability to customize the way the information is presented.

1. Add the reference to the jQuery library in your master page or on the page to which you wish to add the Twitter feed. The code is shown in Listing 13-6.

   Listing 13-6.  Reference the jQuery Library

   <script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>

2. Add the necessary settings in a script file or in a script tag in the head of your master page (see Listing 13-7).

   Listing 13-7.  Add Twitter Feed Using jQuery Plug-In seeofclouds

   // Tweet feed
   $("#tweets").tweet({
     count: 3,
     username: "spectergroup"
   });

3. Then simply create a div, in this case with an ID of tweets and a class of tweet (see Listing 13-8).

   Listing 13-8.  HTML for seaofclouds

   <div id="tweets" class="footer-col tweet">
         <h4>TWITTER NEWS</h4>
   </div>

4. Finally edit the CSS to get the look and feel for your Twitter feed, as shown in Listing 13-9.

   Listing 13-9.  Custom Styles to Control the Look of the Twitter Feed

   /* Tweet widget CSS */
   .tweet, .query { }
   .tweet .tweet_list, .query .tweet_list {
      -webkit-border-radius: .5em;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow-y: hidden;
   }
   .tweet .tweet_list .awesome,.tweet .tweet_list .epic,.query .tweet_list .awesome,.query
       .tweet_list .epic {
      text-transform: uppercase;
   }
   .tweet .tweet_list li, .query .tweet_list li {
      overflow-y: auto;
      overflow-x: hidden;
      padding: 1em ;
      background-image: url(../img/icon-bird.png);
      background-repeat: no-repeat;
      background-position: 6px 19px;
      padding-left: 40px;
   }
   .tweet a,.query  a {
   }
   .tweet .tweet_list .tweet_odd,.query .tweet_list .tweet_odd {
      background-color: rgba(0,0,0,0.2);
   }
   .tweet .tweet_list .tweet_avatar,.query .tweet_list .tweet_avatar {
      padding-right: .5em;
      float: left;
   }
   .tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img {
      vertical-align: middle;
   }
   /*end tweets*/

Figure 13-11 shows the resulting feed.

Sharing Tools

Planning to add sharing to social network options on a site rarely involves just one social network. We always want to make sure that whichever social network the visitor is using, we make it possible for them to share it easily. The problem is it can be quite time consuming to get each social network’s code and add it to your site. To help developers integrate sharing to multiple social media sites at the same time, quickly and easily, a few solutions have surfaced on the market. Among them are two very popular ones today: ShareThis and AddThis.

Using tools like ShareThis and AddThis can literally get social links up and running on your site, like the one in Figure 13-12, in under ten minutes.

Most sharing tools allow some customizations as well. For the sharing tools to appear above, we simply copied and pasted the references to their JavaScript library in the head tag of our master page and added the JavaScript code the sharing tool provided at the desired location. However, we tend to lose control over the experience the visitor has with sharing to social networks. Something to point out is that social networking sites often redirect the user to the login page instead of showing a pop-up. This can result in a very bad experience for s site visitor. That’s why we sometimes look at a more customized experience and create our own sharing buttons.

For example, after going through the first steps of building a custom ShareThis button, we received the script tags shown in Listing 13-10 and placed them in the head section of our master page.

Listing 13-10.  ShareThis Script Tags

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

And we put the code shown in Listing 13-11 right below the footer tags. Although you can add it anywhere, it is common to add it toward the closing </body> tag of your code.

Listing 13-11.  ShareThis Script Tags

<script type="text/javascript">stLight.options({publisher: "8a70d7ad-79f0-4d6f-910c-
    619d9c964da2", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

<script>
var options={ "publisher": "8a70d7ad-79f0-4d6f-910c-619d9c964da2", "position": "left", "ad": {
    "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook",
    "twitter", "linkedin", "yammer", "googleplus"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

Depending on the requirements of social networks and the importance of the design, this could be a very quick and viable option. Note that they do allow some customization through the use of their API, but that is outside the scope of this book.

Custom Sharing Experience

Building your own sharing buttons can greatly enhance the user’s experience on your web site. From the image icon used to click to the pop-up window to write a custom message on their feed, everything can be reworked. If the design of the web site uses the new Microsoft Modern UI with tiles but the sharing buttons are traditional, your site design suddenly does not feel finished. The disadvantage to building your own sharing buttons is the time you invest in building and testing it to get the solution working exactly as defined in the design mockups. The end result is usually much more satisfying to the web site’s visitor.

As updates are added to the sharing tools like AddThis, much more visual customizations are added for the designer to play with. However easy and quick it is to get up and running certain facts remain. You depend on these external services, so if they are down so are your site’s sharing widgets, all at once. There is also a matter of performance as these tools are scripts loading more scripts. For the sake of the Specter Group site, we will look at adding a custom Share to Twitter button.

Building Your Own Twitter Button

Twitter offers different ways to communicate or share a message. We can easily add a Share button on a page, but the real value is in preparing the message for the user to post with the desired hashtags or mentions. A Twitter message’s reach is greatly increased when using these in a tweet. For Specter Group’s site, we want to allow visitors to contact the support team through Twitter in a quick and easy way.

First we look at the available Share buttons on the developer page of Twitter (see Figure 13-13).

If you are planning to use the available Twitter share buttons, integration will be a breeze. Simply set your configurations, as shown in Figure 13-14, and copy and paste the code where needed.

In this example, we added the generated code before the closing tag of the About Us section in the footer. The result is shown in Figure 13-15.

When this button is clicked, the user is prompted to log in to Twitter and a message is already generated contacting the Specter Group support team (see Figure 13-16).

Creating Your Own Twitter Button

What’s fun with Twitter is that you have easy control over the button’s look and feel. You do not need to be a social media integration expert to get things running. Almost everything can be done with a hyperlink and some CSS. Let’s change the default Share button we added earlier to a custom one.

<style type="text/css" media="screen">
   #custom-tweet-button a {
      display: block;
      padding: 2px 5px 2px 40px;
      background: url('/_catalogs/masterpage/spectergroupbootstrap
          /img/icon-bird.png') 1px center no-repeat;
   }
</style>

<div id="custom-tweet-button">
   <a href="https://twitter.com/share?text=I%20made%20a%20custom%20Tweet%20Button!"
       target="_blank">Rock it!</a>
</div>

<script>
jQuery(document).ready(function($) {
   $('.popup').click(function(event) {
      var width  = 575,
         height = 400,
         left   = ($(window).width()  - width)  / 2,
         top    = ($(window).height() - height) / 2,
         url    = this.href,
         opts   = 'status=1' +
                  ',width='  + width  +
                  ',height=' + height +
                  ',top='    + top    +
                  ',left='   + left;
     
      window.open(url, 'twitter', opts);
   
      return false;
   });
});
</script>

<div id="custom-tweet-button">
  <a class="popup" href="https://twitter.com/share?text=
      I%20made%20a%20custom%20Tweet%20Button!&url=http%3A%2F%2Fspectergroup.com"
      target="_blank">Rock it!</a>
</div>