Categories
pCloud Premium

HTML validation of social buttons

HTML validation of social buttons

HTML validation of a website is extremely important ofr several reasons. On of which is synchronizing the visual look of the website in all web browsers. Besides that it's one step ahead in your SEO optimization. You can check if your site is validated on this adress W3C. Code of this kind <g:plusone size="medium"></g:plusone> will couse error in the HTML validation (if it's not HTML5). So here is how we can solve the problem.

For this tutorial I'll be using jQuery library.

Validating Facebook like button

In this blog I use facebook button with these configs:

<fb:like send="false" layout="button_count" width="500" show_faces="false"></fb:like>

Instead of that we can show the button with: <div class="fb-like"  id="fbLike"></div>

In this case however we are gonna lose the configuration of the type show_faces="false" So we'll add them trough jQuery javascript.

I want to mention that adding jQuery locally from your host is not very recommended:

<script type="text/javascript" src="/js/jQuery.min.js"></script>

There are atleast 3 reasons this to happen with Google AJAX Libraries

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

1. Quicker loading 2. ЕEliminate one HTTP request to your server 3. Cache - there is a big chance your users to already have visited a website which use googleapis to load the jQuery libraby. This means, that the user don't have to load the libraby again in your wesite, couse it's already been cached in the browser.

To add the facebook button configurations we can do the following:

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. $('#gPlus1').attr('data-size', 'medium');
  4. $('#fbLike').attr('send', 'false');
  5. $('#fbLike').attr('layout', 'button_count');
  6. $('#fbLike').attr('width', '500');
  7. $('#fbLike').attr('show_faces', 'false');
  8. });
  9. </script>

Google+1 button validation

In this blog I use Google plus button with the following configs:

<g:plusone size="medium"></g:plusone>

First we need one extra div block, in which we'll append the google+1 button:

<div class="google-plus"></div>

Now we add the jQuery script:

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. $('.google-plus').append( '<div class="g-plusone" id="gPlus1"></div>' );
  4. $('#gPlus1').attr('data-size', 'medium');
  5. });
  6. </script>

Twitter button validation

In this blog I use Twitter button with the following configs:

<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>

Change the code like this:

<a href="https://twitter.com/share" class="twitter-share-button" id="twit">Tweet</a>

Then add the jQuery script:

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. $('#twit').attr('data-count', 'horizontal');
  4. });
  5. </script>

LinkedIn button validation

In this blog I use LinkedIn button with the following configs:

<script type="IN/Share" data-counter="right"></script>

Again we'll need one additional div block, to insert the changed script:

<div class="linkedin"><script type="IN/Share"></script></div>

Then add the jQuery script:

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. $('.linkedin script').attr('data-counter', 'right');
  4. });
  5. </script>

StumbleUpon button validation

In this blog I use StumbleUpon button with the following configs:

<su:badge layout="2"></su:badge>

Again we'll need one additional div block, to insert the button:

<div class="stumble-up"></div>

Then add the jQuery script:

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. $('.stumble-up').append( '<su:badge layout="2"></su:badge>' );
  4. });
  5. </script>

I hope this article will help you ico

28 March 2012г.
Viewed 11877 times