Categories: Marketing

How to add Floating Social Buttons – Google+1, Facebook-like & Twitter

Floating Google +1

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.

“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.


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:



<!– Place this code just above your ‘</head>’ tag –>
<script src=”″ type=”text/javascript”>
<script type=”text/javascript” src=””>
<style type=”text/css”>
div.c1 {position: fixed; margin-bottom:90%; margin-left:1%;}
<script type=”text/javascript”>tweetmeme_url = &#39;<data:post.url/>&#39;;</script>
<script src=”” type=”text/javascript”>
<fb:like action=”like” colorscheme=”light” expr:href=”data:post.url” font=”arial” layout=”box_count” send=”false” show_faces=”false”></fb:like>
<g:plusone size=”tall”></g:plusone>
<!– 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…)


1.     Much faster load time.

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


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:



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

    <link rel=”canonical” href=”” />

    <script type=”text/javascript” src=””>

      {“parsetags”: “explicit”}


    <script type=”text/javascript”>

      function renderPlusone() {






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

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



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





Published by

Recent Posts

Free Script: 3D Pre-Compose + Tutorial!

[youtube] I finally got tired of doing this manually, so we created a free…

8 months ago

3D Pre-Compose Script

    Pre-Compose 3D Aware effects with ease and link expressions    Great for displacement maps or isolating 3D…

8 months ago

New Tutorial: Sci-Fi Weapon FX!

[youtube] In this exciting tutorial I’ll be showing you how to create various sci-fi…

8 months ago

Sci-Fi Weapon FX

    Create a variety of futuristic weapon FX    Add Distortion and shockwaves Source: Video Copilot 2

8 months ago

New Tutorial: Shockwaves in After Effects!

[youtube] You don’t want to miss this in depth tutorial! Massive tips, no extra…

8 months ago


    Create a powerful shockwave effect without 3rd party tools    Fix seam issues and add particle pieces…

8 months ago