- The Search Agents - http://www.thesearchagents.com -

Google +1 and Social Media Marketing For Your Site – How to Add Floating Social Media Marketing Buttons

With the new Google +1 (Plus One) button release and the increasing buzz around the role of social media marketing on search engine results, “word of mouth”  and the idea of making it  easier for your users to share your content has become more important than ever before to Search Engine results and Social Media Marketing.


By now, most everyone is familiar with the social sharing buttons that appear at the top of a web page or blog post.  However –  by the time you reach the end of the article, those buttons are often above the fold, out of sight, and out of mind.   This article explains a lightweight and simple way to add Google’s new +1, Twitter and Facebook like buttons to your site and keep them on screen at all times.


This is built using a small amount of code and can be virtually used on any website with no 3rd parties – using CSS and JavaScript.


Not sure what I mean by the “floating” social sharing buttons?  Just check out the Twitter, Google+, Facebook, and LinkedIn share buttons to the left of this blog post.  Scroll down the page and prepare to be amazed!


Watch as I perform my magic…Google +1 Social Merketing [1]

“Ooooohhhhhh Ahhhhhhhhh! The magic floating social buttons on those big websites… I want! I want!”

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

Plus one:

Social signals such as Google +1 (Plus One) have always enabled and encouraged sharing of web content.  Now, they are an important ranking factor in SEO.  Recently, Google added data on these social indications 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 for magic floating Google+1, Twitter and Facebook “Like” buttons:

<!– Place this code just above your ‘</head>’ tag –>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″ type=”text/javascript”>
<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);
<style type=”text/css”>
div.c1 {position: fixed; margin-bottom:90%; margin-left:1%;}
<script type=”text/javascript”>tweetmeme_url = ‘<data:post.url/>’;</script>
<script src=”http://tweetmeme.com/i/scripts/button.js” 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 all of the “<br>” with “&nbsp;” above.

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


Charles Verhoeff

About Charles Verhoeff

Charles Verhoeff+ [7] specializes in Search Engine Optimization & Architecture, at The Search Agency - 11150 W. Olympic Blvd., Suite 600 Los Angeles, CA 90064 as a Search Engine Architecture Specialist - Website: www.thesearchagency.com [8]

Charles is a dynamic developer and webmaster with a strong history in Web Design and User Interface, Computer Technology including Multimedia and video integration and SEO and SEM internet marketing experience. Charles worked as a Computer Security Tech and 3D Renderer for an International Construction company for over 13 Years. Then moved on to build many websites in HTML and Flash for Rigney Graphics in Pasadena, Producing major products for companies such as Speedo (Touch Screen for the Olympics) and helping to build the Gene Autry National Center Websites. Charles interest grew in SEO and SEM When he became the Director of Internet Marketing for Survival Insurance, upgrading their systems and creating a “Facebook-like” online community for motor enthusiasts. Charles was responsible for testing and expanding the Organic results across multiple keywords he became technically skilled in Email marketing & tracking, SEO, SEM (Marketing), PPC (Pay Per Click) and Lead Generation & Internet Marketing with a versatile administrative support skill set developed through experience as a webmaster / manager. Charles Excels in resolving Lead Generation, Analytics and micro site / landing page tracking with innovative solutions, systems and process improvements proven to increase efficiency, customer satisfaction and the bottom line.