Floating Facebook Like Button: How to add Floating Like Buttons!

Posted By Charles on Jan 10, 2014 |


How to add Floating Facebook Like Buttons – Google+1 Facebook Twitter

After the Google+1 Plus one release, you may be looking for a good way to implement Facebook-like, Google+1 and Twitter buttons to your site.  This is an awesome, simple CSS and JavaScript based code that any site can use and can be easily installed.

Clean Floating Like Buttons On Your Site

If you have a WordPress site – it is super easy. The plugins I recommend are 1. “Digg Digg” or 2. “Flare” – both look quite clean and are very easy to install. Just go into your settings and tell it where you want to place the buttons (floating, at the top, etc.)

Floating Like Buttons!

Floating Google Plus 1

Floating Google +1

“Ooooohhhhhh Ahhhhhhhhh!” The magic floating Social Buttons on those big websites… How do I get that?

A magician never reveals his tricks but I will – I’ll do anything for a few likes (OK, almost anything).

Social sites and Google +1 (Plus one) are now, more than ever, an important part of SEO and, per Google, can boost your SEO and PPC search rankings as well as increase word of mouth among  public. Google has now added these social indications (or “likes”) to Google Analytics as well as Google Webmaster Tools.

 Plusone:

Per Google, the +1 (Plus One) button can now benefit your organic and paid search results and this can be implemented along with Social Sharing Buttons to allow visitors to share content across intended pages. Here’s the code:

 

<html>

<!– Place this code just above your ‘</head>’ tag –>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″ type=”text/javascript”>
</script>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”>
</script>
<style type=”text/css”>
div.c1 {position: fixed; margin-bottom:90%; margin-left:1%;}
</style>
<div>
<script type=”text/javascript”>tweetmeme_url = &#39;<data:post.url/>&#39;;</script>
<script src=”http://tweetmeme.com/i/scripts/button.js” type=”text/javascript”>
</script>
<br>
<br>
<fb:like action=”like” colorscheme=”light” expr:href=”data:post.url” font=”arial” layout=”box_count” send=”false” show_faces=”false”></fb:like>
<br>
<br>
<g:plusone size=”tall”></g:plusone>
</div>
<!– floating buttons end –>

NOTE: You can change positions with any of these codes by switching out the code after the ‘fixed;’ code above.

(TOP RIGHT USE:) margin-top:1%; margin-left:93%;

(TOP LEFT USE:) margin-top:1%; margin-left:1%;

(BOTTOM LEFT USE:) margin-top:20%; margin-left:1%;

(BOTTOM RIGHT USE:) margin-top:20%; margin-left:93%;

You can also place the buttons side-by-side  by replacing the “<br/><br/>” with “&nbsp;&nbsp;”

Optimize the Google +1 (Plus One) Script

The fastest of the Google+1 plusone code the “Explicit Render” Script is up to 5X faster than the Standard button & interestingly enough this may present the opportunity as well – in terms of enticing users to click on the button. For example, using this Render script – you can also put information behind the +1 button (+1 for more…)

Pros:

1.     Much faster load time.

2.     Can be used with a collapsible div in order to entice clicks.

Cons:

1.     Requires two clicks – in order to actually +1 the item desired.

2.     Places an external call to the Google Server.

3.     Can take up to 3 seconds to render the Plusone button after clicked.

Cut and paste the JavaScript portion from your code into the <HEAD></HEAD> of your web page, then place the render code only where you want the code to render:

<html>

  <head>

    <title>+1 Demo: Explicit render</title>

    <link rel=”canonical” href=”http://www.example.com” />

    <script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”>

      {“parsetags”: “explicit”}

    </script>

    <script type=”text/javascript”>

      function renderPlusone() {

        gapi.plusone.render(“plusone-div”);

      }

    </script>

  </head>

  <body>

    <a href=”#” onClick=”renderPlusone();”>Render the +1 button</a>

    <div id=”plusone-div”></div>

  </body>

</html>

I hope I helped you out.  Hey give me a Plus One? Just testing it out…

Enjoy,

Charlie

 

Floating Facebook Like Button: How to add Floating Like Buttons! by