Exercise: JS Snippet APIs

In this exercise, you'll try out using several JS snippet APIs to bring more functionality into the webpage.

If you get strange security errors in the console on any step, try following these instructions to run your files over http:// instead of file://

Download the starter file, or start with your own solution from the last exercise. Open the webpage up in the browser and make sure it works.
Go to the Google+ button docs and generate the code for a Google+ button with no annotation and a medium size. Insert that so it shows up next to the header of the webpage(You need to run a local server to see G+ icon, read the instructions above.)
Go to the Tweet button docs and read about the Tweet button. Find the HTML/SCRIPT tag for adding it, and paste that into your webpage, at the bottom near the counter.
Modify the share URL or HTML according to the docs to specify hash tags and change it so that it doesn't show the counter.
Bonus: Using JavaScript, generate a Tweet button for each video, and display it when the video is clicked. The text for each tweet button should be the video title.

Make sure that you use your browser developer tools to make debugging easier while working on this. Check for errors, and use console.log() to figure out how far your code makes it, and what the values of your variables are along the way.

      
        <!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Video Watcher</title>

  <link rel="stylesheet" type="text/css" href="http://www.teaching-materials.org/common/css/bootstrap.min.css">

  <style type="text/css">
  /* This puts titles always on a separate line from thumbnails */
  #videos-list img {
    display : block;
  }
  </style>
 </head>
 <body>

<div class="container">

 <div class="row">
   <div class="col-md-12">
    <h2 class="page-header">Best Videos Ever ❤

    <div class="g-plusone" data-size="medium" data-annotation="none"></div>
    <script type="text/javascript">
      (function(){
        var po   = document.createElement('script');
        po.type  = 'text/javascript';
        po.async = true;
        po.src   = 'https://apis.google.com/js/plusone.js';
        var s    = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>

      <a href="https://twitter.com/share?count=none&hashtags=youtube" class="twitter-share-button"
         data-lang="en">Tweet</a>
      <script>!function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if(!d.getElementById(id)){
          js     = d.createElement(s);
          js.id  = id;
          js.src = "https://platform.twitter.com/widgets.js";
          fjs.parentNode.insertBefore(js, fjs);
        }
      }(document, "script", "twitter-wjs");</script>

    </h2>
   </div>
 </div>

 <div class="row">
   <div class="col-md-3">
     <ul id="videos-list">
    </ul>
   </div>
   <div class="col-md-9" id="video-watcher">
   </div>
 </div>

 <div style="text-align:center; margin-top: 30px; clear:both;">
  <a href="https://info.flagcounter.com/nEFy"><img
    src="https://s04.flagcounter.com/count/nEFy/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/"
    alt="Flag Counter" border="0"></a>

</div>

</div>



<script type="text/javascript" src="http://www.teaching-materials.org/common/youtube.js"></script>
<script type="text/javascript" src="http://www.teaching-materials.org/common/js/jquery.min.js"></script>
 <script>

 function addVideoToList(video){
   var videoLink = $('<a>');
   videoLink.append(video.title);
   var linkUrl      = videoLink.attr('href');
   var thumbnailUrl = youtube.generateThumbnailUrl(video.youtubeId);
   var thumbnailImg = $('<img>');
   thumbnailImg.attr('src', thumbnailUrl);
   videoLink.append(thumbnailImg);

   videoLink.on('click', function(e){
     e.preventDefault();
     var videoTitle = $('<h2>');
     videoTitle.html(video.title + ' <small>' + video.author + '</small>');
     var videoEmbed = $('<iframe></iframe>');
     videoEmbed.attr('src', youtube.generateEmbedUrl(video.youtubeId));
     videoEmbed.attr('width', 560);
     videoEmbed.attr('height', 315);

     var videoRating = $('<img></img>');
     videoRating.attr('src', 'https://chart.googleapis.com/chart?chs=225x125&cht=gom&chd=t:' + video.rating);

     var videoWatcher = $('#video-watcher');
     videoWatcher.hide();
     videoWatcher.empty();
     videoWatcher.append(videoTitle);
     videoWatcher.append(videoEmbed);
     videoWatcher.append(videoRating);
     videoWatcher.fadeIn();
   });

   var videoItem = $('<li>');
   videoItem.append(videoLink);
   $('#videos-list').append(videoItem);
 }

 var videos = [
   {
     "youtubeId" : "TddFnTB_7IM",
     "title"     : "Trip through the 80s",
     "author"    : "meliberty",
     "rating": 90
   },
   {
     "youtubeId" : "HwSKkKrUzUk",
     "title"     : "Circle of Life",
     "author"    : "parkerjademerce",
     "rating": 70
   },
   {
     "youtubeId" : "il2IrgFHfsg",
     "title"     : "The Ooooh Cat",
     "author"    : "RnBTree",
     "rating": 60
   },
   {
     "youtubeId" : "epUk3T2Kfno",
     "title"     : "Otters Holding Hands",
     "author"    : "cynthiaholmes"
     "rating": 100
   }
 ]

 for(var i = 0; i < videos.length; i++){
   addVideoToList(videos[i]);
 }

 </script>
 </body>
</html>