Категории
pCloud Premium

HTML валидиране на бутони за социалните мрежи

HTML валидиране на бутони за социалните мрежи

HTML валидирането на един уеб сайт е изключително важно по ред причини. Една от тях е уеднаквяване на изгледа на уеб сайта във всички уеб браузъри. Освен това е една крачка напред в SEO оптимизацията ви. Може да проверите дали вашият уеб сайт е валидиран на този адрес W3C. Код от вида <g:plusone size="medium"></g:plusone> ще предизвика грешки във HTML валидацията. Ето как може да решим проблема.

За този урок ще е нужно да използваме jQuery библиотека.

Валидиране на Facebook like бутон

В този блог използвам facebook бутон със следните настройки:

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

Вместо това можем да покажем бутона чрез div: <div class="fb-like"  id="fbLike"></div>

В този случай, обаче ще изгубим настройките от типа show_faces="false" Затова ще ги добавим чрез jQuery javascript.

Не препоръчвам добавянето на jQuery библиотеката локално от вашият хост:

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

Има поне 3 причини това да стане чрез Google AJAX Libraries

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

1. По-бързо зареждане 2. Елиминирате един HTTP request към вашият сървър 3. Кеширане - има голям шанс вашите потребители вече да са посещавали уеб сайт, който е използвал googleapis за зареждане на jQuery библиотеката. Това означава, че този потребител няма да има нужда от повторно зареждане и от вашият уеб сайт, тъй като е вече кеширан в браузъра.

За да добавим настройките на facebook бутона можем да направим следното:

  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 бутон

В този блог използвам Google plus бутон със следните настройки:

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

Първоначално ще имаме нужда от един допълнителен div блок, към който ще добавим google+1 бутона:

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

Сега добавяме jQuery скрипта:

  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 бутон

В този блог използвам Twitter бутон със следните настройки:

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

Променяме този код така:

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

Сега добавяме jQuery скрипта:

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

Валидиране на LinkedIn бутон

В този блог използвам LinkedIn бутон със следните настройки:

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

Тук отново ще имаме нужда от един допълнителен div блок, в който ще сложим промененият скрипт:

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

Сега добавяме jQuery скрипта:

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

Валидиране на StumbleUpon бутон

В този блог използвам StumbleUpon бутон със следните настройки:

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

Отново добавяме един div блок, в който ще добавим бутона:

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

Сега добавяме jQuery скрипта:

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

Надявам се урока да е бил полезен ico

28 Март 2012г.
Прегледано 10578 пъти