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

Posted on Monday, August 1st, 2011 by Print This Post Print This Post

Categories - Featured, Social Media

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

“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

Tags | , ,

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

  1. Kamal says:

    How can i implement this on a WP blog? specific to which file?

    • Hey Kamal, Sorry for not seeing this sooner – to answer your question I would recommend placing this at the bottom of the header.php file inside the Theme you are using…

      • Kamal says:

        Good Morning and Thanks Charles for the reply.

        As mentioned, when i inserted the code at the end of the header.php, i cannot see the widget which is enabled as it is popping up on TSA blog.

        But most of the other site owners were able to implement it. I don’t know on how to implement this. i think my website is not supporting it. Thank you and good day.

    • For WordPress – you can use the “getsocial” plugin. But make sure that you uncheck the “Advanced Options” if you do not see it. It says: “Load scripts in Footer (Loads scripts in footer by default. Uncheck this only if the GetSocial box does not appear at all.)” You should then see it nicely.

  2. Glad I could help. – Charlie

  3. Hi Denzil, What type of system are you using? WordPress? Or what?

  4. Denzil, Did you get this sorted out? Can you tell me what language your site is built in? PHP, HTML? – Charlie

    • denzil says:

      seems as though the comment box interpreted some of the code. can i email you in plain text instead?

      • Charles Verhoeff says:

        If you are using WordPress try the “Getsocial” plugin. The Get Social plugin does not show up on your home pages. P.S. make sure you uncheck the footer button in the Advanced Options as I said above…

  5. denzil says:

    problem solved. thanks for your assistance

  6. Rick Noel says:

    Floating social sharing buttons make a lot of sense to make sure that content syndication capabilities are always above the fold. This way, no matter where on the page the user gets an aha moment and feels the content is worth of sharing, they don’t have to go scrolling first. I am working on impelementing in a HubSpot CMS. My gut tells me this kind of floating share buttons provide a noticable lift in social engagement. Thanks for sharing.

  7. Thanks for your write-up. I would also love to say that the first thing you will need to complete is verify if you really need credit repair. To do that you have got to get your hands on a copy of your credit history. That should really not be difficult, because the government necessitates that you are allowed to get one free of charge copy of your credit report on a yearly basis. You just have to inquire the right men and women. You can either check out the website with the Federal Trade Commission or contact one of the main credit agencies directly.

  8. Parish says:

    I am using blogger.
    Unfortunately this code is not working for me. I placed this code above head tag and when I save it shows below error
    “Error parsing XML, line 1302, column 13: Open quote is expected for attribute “src” associated with an element type “script”.”

    line 1302 is where the code starts from.

  9. Kay Sandeen says:

    I wanted to thank you for this wonderful read!! I certainly loved every little bit of it. I have got you book marked to check out new things you post…

  10. Charles Verhoeff says:

    It was updated – so make sure you have the faster +1 version now in this code. Best, Charlie

Trackbacks/Pingbacks


Leave a Reply

Follow Us on Twitter

Authors