• 1851
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Я уже публиковал социальный замок,но он сделан не очень красиво и переделывать лень,решил поискать в сети.И нашел сервис и сейчас вас с ним познакомлю.
Сервис http://plus-plus.net/generator/,предлагает
1.Социальные кнопки - Кнопки позволяют легко и быстро делиться понравившейся информацией в социальных сетях.
2.Всплывающее окно - Более привлекательный способ, чем простой блок с кнопками.
3.Блокировка страницы - Просим пользователя нажать "Лайк", после нажатия окошко исчезает.
4.Замок на контент - Открывает контент только после нажатия на "Лайк".
5.API - Можно использовать свои решения с использованиям социальных закладок.
Пример замка вы уже видели здесь ,извините за него ,больше примеров можете посмотреть здесь http://plus-plus.net/more/
Настройка проста и расписана на сайте у них,но все же распишу
1.Подключение библиотеки,в хеад

Код:
<!-- ++ Подключение библиотеки :: plus-plus.net (v2.0) ++ -->
<script type="text/javascript">plusplus={},plusplus.nr=[],plusplus.ready=function(e){plusplus.nr[plusplus.nr.length]=e};var b=document.createElement("script");b.src="//jquery-library.net/plusplus-2.0.min.js",b.charset="UTF-8",b.async=!0,b.type="text/javascript";try{document.getElementsByTagName("head")[0].appendChild(b)}catch(a){document.getElementsByTagName("body")[0].appendChild(b)}</script>
<style>[class^=plusplus_]{overflow:visible;margin:0;padding:0;border:0;background:0;line-height:normal;list-style:none;font-size:12px;font-family:Verdana,Arial;color:#000;width:auto;height:auto;vertical-align:top;text-decoration:none;text-align:left}[class^=plusplus_sl]{font:inherit;color:inherit;line-height:inherit;text-align:inherit}</style>
<!-- -- Подключение библиотеки :: plus-plus.net (v2.0) -- -->
2.Скрипт иннициализации и оформления кнопок и блоков, можно сразу после библиотеки добавить,а можно и туда где будут
кнопки или замок,или страница.
Код:
<!-- ++ Настройки социального замка :: plus-plus.net (v2.0) ++ -->
<script type="text/javascript">
plusplus.ready(function() {
plusplus.vars.sl.coverageUnlock = "link"; // охват разблокировки замков
plusplus.vars.sl.timeUnlock = 86400 * 7; // Сколько времени не будет появляться социальный замок (указывать в секундах)
plusplus.vars.sl.callback = ""; // код, который вызывается после успешного расшаривания
plusplus.vars.sl.html = "PGRpdiBjbGFzcz0icGx1c3BsdXNfdzYiIHN0eWxlPSJ0ZXh0LWFsaWduOmNlbnRlcjsiPjxkaXYgY2xhc3M9InBsdXNwbHVzX3c2IiBzdHlsZT0iY29sb3I6I2YyZmZmMjt0ZXh0LWFsaWduOmNlbnRlcjsgYmFja2dyb3VuZC1jb2xvcjogIzYzYjFmZjsgZGlzcGxheTppbmxpbmUtYmxvY2s7IHdpZHRoOmF1dG87IHBhZGRpbmc6MjBweDsgYm9yZGVyLXJhZGl1czoxMHB4OyI+0KHQvtGG0LjQsNC70YzQvdGL0Lkg0LfQsNC80L7QuiA8ZGl2IGNsYXNzPSJwbHVzcGx1c193NiIgc3R5bGU9ImNvbG9yOmluaGVyaXQiPtCn0YLQvtCx0Ysg0L/QvtC70YPRh9C40YLRjCDQtNC+0YHRgtGD0L8sINC60LvQuNC60L3QuNGC0LUg0L3QsCDQvtC00L3RgyDQuNC3INC60L3QvtC/0L7QuiDQvdC40LbQtTo8L2Rpdj48ZGl2IGNsYXNzPSJwbHVzcGx1c18iIHN0eWxlPSJ0ZXh0LWFsaWduOmNlbnRlcjsgbWFyZ2luOjEwcHg7ICIgb25tb3VzZW92ZXI9InBsdXNwbHVzLmdwcEhvdmVyKCd7UFA6dHlwZX0nLCd7UFA6Y2FsbGJhY2t9JykiPjxkaXYgY2xhc3M9InBsdXNwbHVzX3NiMV9ibG9ja0xpIj48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfYnV0dG9uIiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojMmY2OWExOyIgb25jbGljaz0icGx1c3BsdXMuY2tpY2tCdXR0b24oJ3ZrU2hhcmUnLCAne1BQOnR5cGV9JywgJ3tQUDpjYWxsYmFja30nKTsiPjxkaXYgY2xhc3M9InBsdXNwbHVzX3NiMV9pbWdJY28iIHN0eWxlPSJiYWNrZ3JvdW5kLXBvc2l0aW9uOi0xMjRweCAycHg7Ij48L2Rpdj48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfYmxvY2tDb3VudCBwbHVzcGx1c19jb3VudF92a1NoYXJlIj4wPC9kaXY+PC9kaXY+PC9kaXY+PGRpdiBjbGFzcz0icGx1c3BsdXNfc2IxX2Jsb2NrTGkiPjxkaXYgY2xhc3M9InBsdXNwbHVzX3NiMV9idXR0b24iIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmNDk2MGY7IiBvbmNsaWNrPSJwbHVzcGx1cy5ja2lja0J1dHRvbignb2RrbFNoYXJlJywgJ3tQUDp0eXBlfScsICd7UFA6Y2FsbGJhY2t9Jyk7Ij48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfaW1nSWNvIiBzdHlsZT0iYmFja2dyb3VuZC1wb3NpdGlvbjotOTNweCAycHg7Ij48L2Rpdj48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfYmxvY2tDb3VudCBwbHVzcGx1c19jb3VudF9vZGtsU2hhcmUiPjA8L2Rpdj48L2Rpdj48L2Rpdj48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfYmxvY2tMaSI+PGRpdiBjbGFzcz0icGx1c3BsdXNfc2IxX2J1dHRvbiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6IzM5NTc5YTsiIG9uY2xpY2s9InBsdXNwbHVzLmNraWNrQnV0dG9uKCdmYlNoYXJlJywgJ3tQUDp0eXBlfScsICd7UFA6Y2FsbGJhY2t9Jyk7Ij48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfaW1nSWNvIiBzdHlsZT0iYmFja2dyb3VuZC1wb3NpdGlvbjowIDJweDsiPjwvZGl2PjxkaXYgY2xhc3M9InBsdXNwbHVzX3NiMV9ibG9ja0NvdW50IHBsdXNwbHVzX2NvdW50X2ZiU2hhcmUiPjA8L2Rpdj48L2Rpdj48L2Rpdj48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfYmxvY2tMaSI+PGRpdiBjbGFzcz0icGx1c3BsdXNfc2IxX2J1dHRvbiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6IzAwYWJmMDsiIG9uY2xpY2s9InBsdXNwbHVzLmNraWNrQnV0dG9uKCd0d1NoYXJlJywgJ3tQUDp0eXBlfScsICd7UFA6Y2FsbGJhY2t9Jyk7Ij48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfaW1nSWNvIiBzdHlsZT0iYmFja2dyb3VuZC1wb3NpdGlvbjotMzFweCAycHg7Ij48L2Rpdj48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfYmxvY2tDb3VudCBwbHVzcGx1c19jb3VudF90d1NoYXJlIj4wPC9kaXY+PC9kaXY+PC9kaXY+PGRpdiBjbGFzcz0icGx1c3BsdXNfc2IxX2Jsb2NrTGkiPjxkaXYgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkOyBwb3NpdGlvbjphYnNvbHV0ZTsgaGVpZ2h0OjIycHg7IHdpZHRoOjM2cHg7IG9wYWNpdHk6MDsgb3ZlcmZsb3c6IGhpZGRlbjsgdHJhbnNmb3JtOnNjYWxlKDEuNDUsIDEuMzUpOyBtYXJnaW4tbGVmdDo3cHg7IG1hcmdpbi10b3A6NHB4OyI+PGRpdiBjbGFzcz0iZy1wbHVzb25lIiBkYXRhLWNhbGxiYWNrPSJwbHVzcGx1c0NraWNrQnV0dG9uR3BwIiBkYXRhLWFubm90YXRpb249Im5vbmUiPjwvZGl2PjwvZGl2PjxkaXYgY2xhc3M9InBsdXNwbHVzX3NiMV9idXR0b24iIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNiZTMzMDg7Ij48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfaW1nSWNvIiBzdHlsZT0iYmFja2dyb3VuZC1wb3NpdGlvbjotMTg2cHggMnB4OyI+PC9kaXY+PGRpdiBjbGFzcz0icGx1c3BsdXNfc2IxX2Jsb2NrQ291bnQgcGx1c3BsdXNfY291bnRfZ3BwU2hhcmUiPjA8L2Rpdj48L2Rpdj48L2Rpdj48ZGl2IGNsYXNzPSJwbHVzcGx1c19zYjFfYmxvY2tMaSI+PGRpdiBjbGFzcz0icGx1c3BsdXNfc2IxX2J1dHRvbiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6IzJmNjlhMTsiIG9uY2xpY2s9InBsdXNwbHVzLmNraWNrQnV0dG9uKCdtYWlscnVTaGFyZScsICd7UFA6dHlwZX0nLCAne1BQOmNhbGxiYWNrfScpOyI+PGRpdiBjbGFzcz0icGx1c3BsdXNfc2IxX2ltZ0ljbyIgc3R5bGU9ImJhY2tncm91bmQtcG9zaXRpb246LTIxN3B4IDJweDsiPjwvZGl2PjxkaXYgY2xhc3M9InBsdXNwbHVzX3NiMV9ibG9ja0NvdW50IHBsdXNwbHVzX2NvdW50X21haWxydVNoYXJlIj4wPC9kaXY+PC9kaXY+PC9kaXY+PHN0eWxlPiAucGx1c3BsdXNfc2IxX2Jsb2NrTGkgeyBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IG1hcmdpbjogMnB4OyAqZGlzcGxheTogaW5saW5lOyAqem9vbTogMSB9IC5wbHVzcGx1c19zYjFfYnV0dG9uIHsgcGFkZGluZzogMCA4cHggMCAycHg7IGJvcmRlci1yYWRpdXM6IDRweDsgaGVpZ2h0OiAzMHB4OyBjdXJzb3I6IHBvaW50ZXIgfSAucGx1c3BsdXNfc2IxX2ltZ0ljbyB7IGJhY2tncm91bmQ6IHVybCgvL2pxdWVyeS1saWJyYXJ5Lm5ldC9wbHVzcGx1cy8xNC5wbmcpIDAgMCByZ2JhKDAsIDAsIDAsIDApbm8tcmVwZWF0OyBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IHdpZHRoOiAzMHB4OyBoZWlnaHQ6IDMwcHggfSAucGx1c3BsdXNfc2IxX2Jsb2NrQ291bnQgeyBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IGxpbmUtaGVpZ2h0OiAzMHB4OyBjb2xvcjogI0ZGRjsgdmVydGljYWwtYWxpZ246IHRvcDsgfSA8L3N0eWxlPjwvZGl2PjxkaXYgY2xhc3M9InBsdXNwbHVzX3c2IiBzdHlsZT0iY29sb3I6aW5oZXJpdCI+0J/QvtGB0LvQtSDRjdGC0L7Qs9C+INC/0L7QtCDQutC90L7Qv9C60LDQvNC4INC/0L7Rj9Cy0LjRgtGB0Y8g0L7QsdC10YnQsNC90L3Ri9C5INC60L7QvdGC0LXQvdGCLjwvZGl2PjwvZGl2PjwvZGl2Pg==";
/* Предыдущая строка, во избежание ошибок со спец символами, закодирована в base64 */
});
</script>
<!-- -- Настройки социального замка :: plus-plus.net (v2.0) -- -->
3.Ну а последнее используется только для кнопок и замка на контент,ссылку,

Можешь почитать и вот эту статейку "Полезности для тех кто работает с Twitter Bootstrap"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element