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

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

Posted By Charles Verhoeff On August 1, 2011 @ 9:34 am In Featured,Social Media | 14 Comments

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>
<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);
})();
</script>
<style type=”text/css”>
div.c1 {position: fixed; margin-bottom:90%; margin-left:1%;}
</style>
<body>
<div>
<script type=”text/javascript”>tweetmeme_url = ‘<data:post.url/>’;</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 all of the “<br>” with “&nbsp;” above.

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

Enjoy,

Charles Verhoeff

Article printed from The Search Agents: http://www.thesearchagents.com

URL to article: http://www.thesearchagents.com/2011/08/googleplusone-socialmediamarketing-buttons/

URLs in this post:

[1] Image: http://www.thesearchagents.com/2011/08/googleplusone-socialmediamarketing-buttons/google1-logo-social-media/

[2] How to Improve Social Sharing Using Google Social Interaction Analytics: http://www.thesearchagents.com/2011/09/how-to-improve-social-sharing-using-google-social-interaction-analytics/

[3] The Ultimate Google +1 Speed Test: http://www.thesearchagents.com/2011/06/ultimate-google-plus-one-speed-test/

[4] Social Sharing Button Playground Infographic: http://www.thesearchagents.com/2012/05/social-sharing-button-playground-infographic/

Copyright © 2009 The Search Agents. All rights reserved.