Скрипт популярных социальных кнопок / tiaurus.name — Non sunt entia multiplicanda praeter necessitatem
Technology and Science
Скрипт популярных социальных кнопок
5 years ago
2.5K

Разбирая залежи накопленных годами материалов, обнаружил скрипт простых кнопок для отправки любых страниц в популярные социальные сети. Сделан он по мотивам кодов, опубликованных на Хабре.

Скрипт генерирует 8 простейших социальных кнопок — Google+, LinkedIn, Facebook, Twitter, ВКонтакте, LiveJournal, Одноклассники и Mail.ru. Код сденан на JS (jQuery), кнопки можно стилизовать через CSS. Используется скрипт очень легко:

нужно добавить код скрипта в footer.php

footer.php
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<script>
Share = {
    go: function(_element, _options) {
        var
            self = Share,
            options = $.extend(
                {
                    type:       'vk',                  
                    url:        location.href,        
                    title:      param('title'),        
                    image:      param('image'),        
                    text:       param('description'),  
                },
                $(_element).data(),
                _options            
            );
        if (self.popup(link = self[options.type](options)) === null) {
            if ( $(_element).is('a') ) {
                $(_element).prop('href', link);
                return true;
            }
            else {
                location.href = link;
                return false;
            }
        }
        else {
            return false;
        }
        
        function param(name) {
            return $('meta[property=og\\:' + name + ']').attr('content');
        }
    },
 
    //LinkedIn
    li: function(_options) {
        var options = $.extend({
            url:    location.href,
            title:  document.title,
            text:   ''
        }, _options);
 
        return 'http://www.linkedin.com/shareArticle?mini=true'
            + '&url='       + encodeURIComponent(options.url)
            + '&title='     + encodeURIComponent(options.title)
            + '&summary='   + encodeURIComponent(options.text);
    },
 
    // Google+
    gg: function (_options) {
      var options = $.extend({
        url: location.href      
      }, _options);
 
      return 'https://plus.google.com/share?url='
        + encodeURIComponent(options.url);
    },
 
    // ВКонтакте
    vk: function(_options) {
        var options = $.extend({
                url:    location.href,
                title:  document.title,
                image:  '',
                text:   '',
            }, _options);
 
        return 'http://vkontakte.ru/share.php?'
            + 'url='          + encodeURIComponent(options.url)
            + '&title='       + encodeURIComponent(options.title)
            + '&description=' + encodeURIComponent(options.text)
            + '&image='       + encodeURIComponent(options.image)
            + '&noparse=true';
    },
 
    // Одноклассники
    ok: function(_options) {
        var options = $.extend({
                url:    location.href,
                text:   '',
            }, _options);
 
        return 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'
            + '&st.comments=' + encodeURIComponent(options.text)
            + '&st._surl='    + encodeURIComponent(options.url);
    },
 
    // Facebook
    fb: function(_options) {
        var options = $.extend({
                url:    location.href,
                title:  document.title,
                image:  '',
                text:   '',
            }, _options);
 
        return 'http://www.facebook.com/sharer.php?s=100'
            + '&p[title]='     + encodeURIComponent(options.title)
            + '&p[summary]='   + encodeURIComponent(options.text)
            + '&p[url]='       + encodeURIComponent(options.url)
            + '&p[images][0]=' + encodeURIComponent(options.image);
    },
 
    // LiveJournal
    lj: function(_options) {
        var options = $.extend({
                url:    location.href,
                title:  document.title,
                text:   '',
            }, _options);
 
        return 'http://livejournal.com/update.bml?'
            + 'subject='        + encodeURIComponent(options.title)
            + '&event='         + encodeURIComponent(options.text + '<br/><a href="' + options.url + '">' + options.title + '</a>')
            + '&transform=1';
    },
 
    // Twitter
    tw: function(_options) {
        var options = $.extend({
                url:        location.href,
                count_url:  location.href,
                title:      document.title,
            }, _options);
 
        return 'http://twitter.com/share?'
            + 'text='      + encodeURIComponent(options.title)
            + '&url='      + encodeURIComponent(options.url)
            + '&counturl=' + encodeURIComponent(options.count_url);
    },
 
    // Mail.Ru
    mr: function(_options) {
        var options = $.extend({
                url:    location.href,
                title:  document.title,
                image:  '',
                text:   '',
            }, _options);
 
        return 'http://connect.mail.ru/share?'
            + 'url='          + encodeURIComponent(options.url)
            + '&title='       + encodeURIComponent(options.title)
            + '&description=' + encodeURIComponent(options.text)
            + '&imageurl='    + encodeURIComponent(options.image);
    },
 
    // Popup
    popup: function(url) {
        return window.open(url,'','toolbar=0,status=0,scrollbars=1,width=320,height=480');
    }
}
 
$(document).on('click', '.social_share', function(){
    Share.go(this);
});
</script>

и добавить вывод кнопок в том месте, где вы их хотите видеть (например, в single.php):

single.php
PHP
1
2
3
4
5
6
7
8
9
10
<div class="social_div">
    <button class="social_share social_share_gg" data-type="gg">Google+</button>
    <button class="social_share social_share_li" data-type="li">LinkedIn</button>
    <button class="social_share social_share_fb" data-type="fb">Facebook</button>
    <button class="social_share social_share_tw" data-type="tw">Twitter</button>
    <button class="social_share social_share_vk" data-type="vk">ВКонтакте</button>    
    <button class="social_share social_share_lj" data-type="lj">LiveJournal</button>
    <button class="social_share social_share_ok" data-type="ok">Одноклассники</button>
    <button class="social_share social_share_mr" data-type="mr">Mail.Ru</button>
</div>

Оформление кнопок задается в style.css:

style.css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* оформление блока с кнопками */
.social_div {  }
 
/* оформление любой кнопки */
.social_share {  }
 
/* оформление кнопки Google+ */
.social_share_gg {   }
 
 
/* оформление кнопки LinkedIn */
.social_share_li {   }
 
/* оформление кнопки Facebook */
.social_share_fb {   }
 
/* оформление кнопки Twitter */
.social_share_tw {   }
 
/* оформление кнопки ВКонтакте */
.social_share_vk {   }
 
/* оформление кнопки LiveJournal */
.social_share_lj {   }
 
/* оформление кнопки Одноклассники */
.social_share_ok {   }
 
/* оформление кнопки Mail.Ru */
.social_share_mr {   }

Скрипт хорош тем, что не грузит сайт сторонними скриптами, тянущими откуда-то из вне кучу всего не нужного. Он работает через jQuery. Скрипт подтягивает название страницы, ее текстовое содержимое, и картинку из мета-тегов OpenGraph, поэтому нужно позаботиться, чтобы таковые уже присутствовали (например, установить плагин, создающий эти мета-теги, или вручную прописать код, создающий их).

Записи об изобразительном искусстве — квинтэссенции научных и культурных достижений цивилизации.
5
art
Записи о влиянии бизнеса на нашу жизнь и наоборот.
4
business
Все об авторском праве, интеллектуальной собственности и прочих подобных мифах.
3
copyright
Записи о положительной и отрицательном изменении в культуре.
5
culture
Записи и дизайне, его влиянии на нас и влиянии требований времени на него.
2
design
Страны, места, направления.
2
geo
Записи, имеющие определенные исторические привязки.
4
history
Записи о здоровье — как его не растерять, сохранить и преумножить.
11
lifestyle
Записи о литературе — самом древнем информационном искусстве.
8
literature
Записи о минимализме, как принципе мышления и действия.
2
minimalism
Записи о кино — фильмы, актеры, развитие этого вида искусства.
2
movies
Записи о музыке — самом точном и загадочном искусстве.
3
music
Народные мудрости, воплощенные в совершенную словесную форму.
1
parable
Записи о людях, личностях и их роли в истории, культуре и науке.
5
people
Записи о самой неприятной области деятельности человека.
4
politics
Альтернативная реальность.
2
religion
Наука, как авангард человеческого познания мира.
4
science
Сервисы и приложения, обеспечивающие социальные коммуникации интернет-сообщества.
6
social
Записи о развитии общества.
6
society
Записи о веб-технологиях и программном обеспечении.
9
software & webware
Записи о спортивном образе жизни.
51
sport
Записи об управлении временем.
4
time
Записи о WordPress — настройки, плагины, темы, сниппеты и скрипты.
2
WordPress
Трюк из брюк
Два приложения для оптимизации изображений, которые я использую — Webify и JPEGmini