Клуб пользователей блока «Поделиться»

а в валидном варианте это возможно?

a4523105
16 февраля 2011, 18:04

html5 еще не существует (официально)

как возможно подключить кнопки не используя подобный бред data-yashareType='link' data-yashareQuickServices='yaru,vkontakte,facebook,twitter,odnoklassniki,moimir'

или же как заставить работать при загрузке данного фрагмента

<div class='yashare-auto-init' data-yashareType='link' data-yashareQuickServices='yaru,vkontakte,facebook,twitter,odnoklassniki,moimir'></div>

аяксом

27 комментариев
Подписаться на комментарии к посту
аяксом никак, блоки .yashare-auto-init ищутся после domcontentloaded
используйте обычный конструктор Ya.share()
у меня на сайтах страницы аяксом собираются, а включать в html код не валивные фрагменты нет ни когого желания - скрипты перестанут корректно работать
спасибо, вроде заработало с  конструктором Ya.share()

P.S. зачем было изначально писать с использованием html5, его же еще нет и непонятно когда он будет?
мне непонятно зачем нужна валидация )
1. гарантия корректной работы скриптов и сайта во всех популярных браузерах
2. неспособность написать валидный код, всего лишь говорит о уровне програмиста/верстальщика :-)

валидация - не гарантия правильного отображения, а всего лишь проверка синтаксиса. Яркий пример - это IE. А html5 data-атрибуты валидны с точки зрения синтаксиса.
гарантия (если конечно не брать совсем уж древние версии), вопрос в кривезне рук :)
если страница собирается js, то лишние элементы в коде только осложняют работу

сколько сайтов имеют доктайп html5?
какая разница? с точки зрения html все валидно, неизвестные атрибуты игнорируются
как раз с точки зрения html и не валидно :)
неизвестные атрибуты должен игнорировать браузер, а не валидатор при явно указанном DOCTYPE :)

Подскажите, пожалуйста, как всё таки правильно вставить Яндексовский скрипт "Поделиться", чтобы Валидор на него не ругался.

в html  коде страницы, там где должна быть кнопка:

<div id='ya_share1'>&nbsp;div>

в <head>:
<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8">script>
+ ссылка на ваш скрипт который подключен к данной странице

в вашем скрипте при получении браузером DOM следует вызвать функцию Social();

function Social() {
    new Ya.share({
        element: 'ya_share1',
            elementStyle: {
                'type': 'button',
                'quickServices': ['yaru', 'twitter', 'vkontakte', 'facebook']
            },
            popupStyle: {
                blocks: {
                    'Поделитесь с друзьями!': ['yaru', 'twitter', 'vkontakte', 'facebook', 'lj', 'moikrug', 'moimir', 'friendfeed', 'odnoklassniki']
                },
                copyPasteField: true
            }
});
};

P.S. у меня подключена библиотека jquery

у меня вся страница на простом HTML-е и к ней не подключены никакие скрипты и DOM я даже не в курсе что это... :)

подскажите, пожалуйста, что нужно в HTML коде поменять, чтобы валидатор перестал ругаться на http://nanuka.ru/index.html

скрипты подклбчены :)

вместо


<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8">script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,moikrug">div>

поставте
<div id='ya_share1'>&nbsp;div>

в
там где стоит
<script type="text/javascript" src="script.js">script>
добавте
<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8">script>


в вашем скрипте script.js

добавте функцию которую я писал выше

в начале скрипта вызовите её
Social();

валидотор не ругается, но и иконки соц. сетей не отображаются :(

посмотрите плиз, что не так http://nanuka.ru/index.html http://nanuka.ru/script.js ?

не совсем понял где именно нужно прописать вызов функции social

наверно так вам будет проще:
добавте в
<script type="text/javascript" src="http://yandex.st/jquery/1.6.2/jquery.min.js" type="text/javascript">script>

(это библиотека jquery)

в
http://nanuka.ru/script.js добавте (в самом конце)

function Social() {
    new Ya.share({
        element: 'ya_share1',
            elementStyle: {
                'type': 'button',
                'quickServices': ['yaru', 'twitter', 'vkontakte', 'facebook']
            },
            popupStyle: {
                blocks: {
                    'Поделитесь с друзьями!': ['yaru', 'twitter', 'vkontakte', 'facebook', 'lj', 'moikrug', 'moimir', 'friendfeed', 'odnoklassniki']
                },
                copyPasteField: true
            }
});
};

jQuery(document).ready(function(){
Social();
});


пример как это реализованно можно посмотреть на http://www.allave.ru/

всё сделал, как сказали. не работает. (кнопки доб. в соц. сети не видны). :((

поправте строчку:

<script type="text/javascript" src="http://yandex.st/jquery/1.6.2/jquery.min.js" type="text/javascript">script>
должно буть
<script type="text/javascript" src="http://yandex.st/jquery/1.6.2/jquery.min.js">script>
(это я ошибся)

и в вашем файле http://nanuka.ru/script.js

нет
function Social() {
    new Ya.share({
        element: 'ya_share1',
            elementStyle: {
                'type': 'button',
                'quickServices': ['yaru', 'twitter', 'vkontakte', 'facebook']
            },
            popupStyle: {
                blocks: {
                    'Поделитесь с друзьями!': ['yaru', 'twitter', 'vkontakte', 'facebook', 'lj', 'moikrug', 'moimir', 'friendfeed', 'odnoklassniki']
                },
                copyPasteField: true
            }
});
};

jQuery(document).ready(function(){
Social();
});

есть в моем файле  http://nanuka.ru/script.js функция social. я туда её прописывал в несколько мест. безрезультатно :(

строчку <script type="text/javascript" src="http://yandex.st/jquery/1.6.2/jquery.min.js" тоже поправил. не помогло :(

если вы в москве то 8(985)777-42-49

Всем спасибо! Заработало!

нужно было поставить загрузку jquery.js раньше script.js вызывающию её :) 


Ура :)

Особая благодарность

Еще один валидный  вариант:

 

 

в данном виде это будет в исходном html

во-первых, это просто лишние

во-вторых, пс такие конструкции помимают :)

 

Если я все правильно понял

в :

 

 

 

 

в html  коде страницы, там где должна быть кнопка:

 

 

скрипт social.js:

function Social() {

    new Ya.share({

        element: 'ya_share1',

            elementStyle: {

                'type': 'button',

                'quickServices': ['yaru', 'vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'moimir', 'lj', 'friendfeed', 'moikrug']

            },

            popupStyle: {

                blocks: {

                    'Поделитесь с друзьями!': ['yaru', 'vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'moimir', 'lj', 'friendfeed', 'moikrug']

                },

                copyPasteField: true

            }

});

};

 

jQuery(document).ready(function(){

Social();

});

 

Все работает.

Как лучше

 

или

 

 

как лучше?

тут несколько нюансов,

1. при загрузке jquery со своего домена увеличится время загрузки страницы, т.к. браузер может обращаться к одному домену только в один поток

2 при загрузке из библиотек (яндекса, гугла...) данные ресурсы могут отслеживать информацию о загрузке и использовать её в своих целях

3. можно подгружать просто со своего поддомена, впрочем как и css, img (то что нет необходимости индексировать), но если у вас не сумашедшие по размерам страницы то можно просто со своего домена :)

 

Что лучше выбрать

jquery-1.6.2.min.js

или

jquery-1.6.2.js

С Уважением, Алексей

 

min это просто сжатая версия :)

Посмотрел http://yandex.st/share/share.js и нашел там два параметра data-vdirection и data-hdirection.

Насколько я понял они отвечают за то в какую сторону открывается окошко поделиться, но при постановке значений up, down,left и right никакой реакции.

Кто знает в чем дело?