About Me

My photo
Northglenn, Colorado, United States
I'm primarily a BI Developer on the Microsoft stack. I do sometimes touch upon other Microsoft stacks ( web development, application development, and sql server development).

Tuesday, September 25, 2012

Facebook comments button using jquery

 So, as my offical first try at jquery, I created a facebook button that can be used to display facebook comments.

HTML5 Code:

<!DOCTYPE html>
<html>
<head>
<title>Facebook Comments Test</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js>
</script>
<script type="text/javascript">
  $(document).ready(function () {
    $("#facebookButton").click(function () {
       if ($("#rightFacebook").is(":visible")){
          $("#rightFacebook").hide(1000);
       }
       
else {
          $("#rightFacebook").show(1000);
       }
    });
  });
 
<
/script>
</head>
<body>

<div id="fb-root"></div>
<script type="text/javascript">    (function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
} (document,
'script', 'facebook-jssdk'));
</script>
<h1>Popular Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit magna. Vivamus nec eros ac ante auctor porta id in velit. Aenean sit amet metus eget tellus dignissim dignissim ac at metus. Maecenas sagittis lectus eu nibh porta non ornare mauris fermentum. Vestibulum vel mi id nibh sagittis gravida. Phasellus ac orci eu ante consequat convallis. Pellentesque ultrices tincidunt dignissim. Phasellus porttitor ornare nisi, in faucibus nisl ornare ornare.</p>

<p>Vivamus ac ultricies mi. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas urna nibh, interdum eu aliquet quis, molestie ut elit. Maecenas sed arcu ullamcorper lectus consectetur placerat quis at mi. Fusce nisi dui, rutrum quis euismod a, euismod ac justo. Mauris congue blandit sapien, sed aliquet est interdum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Nulla a justo id nisl fringilla iaculis. Quisque mollis ipsum in tortor convallis nec commodo massa faucibus. Nullam eget neque nibh, commodo euismod turpis. Nunc quis lobortis augue. Duis interdum commodo nisl, et bibendum mauris congue vitae. Phasellus dignissim fermentum dolor, vel tempus nisi faucibus sed. Curabitur cursus faucibus eros, quis elementum ipsum feugiat quis. Vivamus at sem massa. Pellentesque risus sem, euismod non elementum bibendum, aliquam ac elit.<p>

<p>Nunc lacinia consectetur arcu, nec vestibulum nulla rutrum vel. Quisque sem quam, congue eget molestie sit amet, rhoncus non risus. Aliquam erat volutpat. Nunc vitae feugiat elit. Sed pretium tincidunt lectus, sit amet posuere turpis consequat consectetur. Quisque vel sodales sapien. Quisque tincidunt, augue ut mattis lobortis, eros purus fringilla ante, vitae congue lorem sem eget purus. Phasellus nunc quam, consequat vel fermentum ultrices, sollicitudin sit amet turpis. Vivamus sagittis vehicula tortor.</p>

<p>Donec ut ligula lacus, non fermentum dui. Ut vel ipsum ante. Praesent consequat metus eget eros porttitor vulputate. Fusce tellus lacus, convallis eget tincidunt sit amet, pretium vitae leo. Etiam interdum magna egestas massa feugiat vel ornare elit hendrerit. Etiam id eros sem, ac rhoncus ante. Etiam tellus dui, pretium non commodo nec, pharetra et dui. Suspendisse quis dolor quis magna iaculis suscipit. Nullam fermentum iaculis malesuada.</p>

<div id="rightFacebook">
   <div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
</div>
   <button id="facebookButton">
      <img id="facebookButtonImage" alt="facebook comments" src="facebook.png"/>
   </button>
   
</body>
</html>



CSS Code:
div#rightFacebook{
   float: right;
   position:fixed;
   right:20px;
   top: 5px;
   width: 500px;
   background-color: #FFFFDB;
   margin-bottom: 0.5em;
   display:none;
}

button#facebookButton
{
   float: right;    position:fixed;
   right:10px;
   top: 5px;
}
img#facebookButtonImage
{
  width:15px;
  height:15px
}


p#facebookButtonText
{

   font-family:Tahoma;
   font-size:10px;
}



Explaination:

I used this script so, that I didn't have to download the jquery library. Instead I used Microsofts, which can slow things down if not local.
<script type="text/javascript" src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js>
</script>

My jquery script, short and simple. If the button was clicked, then I check if my facebook comments are visible/invisible and then hide/show. I gave it 1 second animation when it hides/shows the comments:

<script type="text/javascript">
    $(document).ready(function () {
       $("#facebookButton").click(function () {
          if ($("#rightFacebook").is(":visible")){
             $("#rightFacebook").hide(1000);
          }
         
else {
             $("#rightFacebook").show(1000);
          }
      });
   });   
<
/script>


Facebook gives code to allow you to adjust what page the comments are for, number of posts, width, and color scheme. (http://developers.facebook.com/docs/reference/plugins/comments/)
The first section of code they give, basically the connection to facebook:

<div id="fb-root"></div>
<script type="text/javascript"> (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document,
'script', 'facebook-jssdk'));
</script>

The second code grab are the attributes you filled out on the website, which can easily be adjusted:

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
 
I placed the second grab in my div, where I wanted the comments to be displayed:

<div id="rightFacebook">
    <div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
</div>
<button id="facebookButton">
    <img id="facebookButtonImage" alt="facebook comments" src="facebook.png"/>
</button>

I stole a facebook icon, facebook.png, and used that as my button. In the CSS, I made sure that my button and comments are always in the upper-right hand corner, even when the page is scrolling.




Hidden:
Displayed:
 
Scrolling: