" />

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

About Charles Verhoeff

Charles Verhoeff+ 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


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.

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



Featured in Alltop

Big List - Search Marketing Blogs

2010 SEMMY Runner-Up

BoostCTR Best PPC Blogs