20 November 2014

Tech Thursday: How to Add a Floating Facebook Tab to your Blog!

Today I am linking with the fabulous Teaching Trio for their Technology Thursday linky!

I have just added a floating Facebook tab to my blog and thought some of you may want to know how to do this :)






1. Log into your blogger account

2. Go to Layout --> Add a Gadget (ensure you add a gadget to your right sidebar)

3. Select HTML/Javascript

4. Copy the following code, replacing the facebook address highlighted in pink with your own:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">

</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizeK9c6R1Dt7JjAvoUipjzUPBMZVfiLhtbmc8VRNxSQdXTDDGiTFzR-QIsK2GpgHRymfE1UDYAme4TgS5kDxS9afWZUQkFQO8mq_cZUNLGTX9j1VFcj8PnoOjOjBjhojA1LIRTdnd-1o/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:10%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/mmegauthiersfrenchclass&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true">
</iframe></div></div>

The standard tab comes with a blue background. However, you can create your own tab (41x136px), save your image on photobucket or similar and replace the above image link highlighted in blue with your own image link :)


Enjoy your floating facebook tab and don't forget to check out other bloggers' tech tips by clicking on the button below:


http://teachingtrio.blogspot.com/2014/11/tech-thursday-112014.html

6 comments:

  1. That sound super easy! I'll definitely give it a try!
    Your blog is looking more and more beautiful. You should start thinking about designing blogs for other people :)
    Oh, and I love your new profile picture!

    - Lucy

    ReplyDelete
    Replies
    1. It is as simple as it looks, Lucy! Thank you so much for your kind words. It's taking me way too long to figure out all these HTML codes... I wouldn't even contemplate blog designing for other people, but it's a wonderful compliment :)
      I love learning about it though. It's quite addictive seeing my blog taking shape and looking more personal :)

      Thanks for stopping by and leaving a comment!
      Naïma

      Delete
  2. C'était facile! J'ai déjà ajouté mon bouton! Merci!

    ReplyDelete
    Replies
    1. J'étais surprise aussi de voir à quel point c'était simple Stéphanie! Je suis contente de voir que c'était utile :)

      Naïma

      Delete
  3. I get so annoyed with those pop-up Facebook like pages when I click into a blog. I am so glad that you showed how to create one of those tabs. I will definitely be working on this over the weekend! Thanks for sharing and linking up with us!

    Cassie
    Funky in Fourth
    Teaching Trio

    ReplyDelete
    Replies
    1. I don't like any kind of commercial pop up either!!! It goes without saying that I like to have a look at a blog or website first before being asked to like the page! I'd seen this tab on many blogs (Teaching Trio is one of them!) & always liked not having to scroll all the way up to find the Facebook icon ;)

      Thank you so much for leaving a comment. I'm glad you found this tip helpful :)
      Naïma

      Delete

Related Posts Plugin for WordPress, Blogger...