Домой Без рубрики Создавайте сверхбыстрые кнопки социальных сетей без JavaScript с простым CSS

Создавайте сверхбыстрые кнопки социальных сетей без JavaScript с простым CSS

327
0

Мы рады анонсировать наш новый плагин Crunchy Sharing .

Crunchy Sharing — Мы рады объявить о нашем новом супер быстром # WordPress Social Sharing # Плагин : https://pro.crunchify.com/crunchy-sharing/

Более 25 вариантов обмена в социальных сетях, оптимизированный, без JavaScript, отзывчивый, легкий, быстрый, совместимый с GDPR.

Оформить заказ на все скриншоты:

Посетите Crunchy Sharing

Мы не можем представить сайт без Social Sharing кнопка. Это необходимо и абсолютно необходимо. Как следует из заголовка в этом уроке, мы рассмотрим шаги how to set up Social Sharing buttons в вашем блоге:

  • without используя любой WordPress Plugins
  • without любой JavaScripts
  • without любой performance влияние

Это пара дополнительных руководств, которые я написал о том, как оптимизировать ваш сайт WordPress , исключив плагин WordPress . Это стоит проверить.

У вас есть какие-либо из нижеперечисленных вопросов, тогда вы попали по адресу:

  • Как реализовать социальный обмен
  • Простые кнопки FontAwesome для обмена в социальных сетях без JavaScript
  • Кнопки общего доступа в социальных сетях. Нет JavaScript. Нет отслеживания. Сверх быстрый.
  • Самый простой способ предложить ссылки для социальных сетей
  • Добавление кнопок социальных сетей на любую страницу WordPress, без плагинов.
  • Простые кнопки обмена в социальных сетях без JavaScript и отслеживания
  • Сделай сам ссылки на социальные сети: добавь кнопки социальных сетей без плагина WP

Позвольте мне начать с концепции, которая стоит за этим:

Зачем внедрять свою собственную кнопку социального обмена?

  • Не все, но большинство плагинов для социальных сетей не оптимизированы для ваших нужд
  • Они могут загружать значки социальных сетей по отдельности, что увеличивает количество ненужных HTTP-запросов к вашему серверу.
  • Если вы используете официальные кнопки социального обмена, то это loads Java Script for each Sharing button что в конечном итоге существенно влияет на скорость загрузки вашей страницы
  • Если скорость вашей страницы высока, ваш сайт будет иметь высокий рейтинг в поиске Google
  • Если скорость вашей страницы высока, есть больше шансов, что пользователи будут чаще возвращаться на ваш сайт, так как это удобно для них.

Давайте проверим, какие скрипты загружает ваш сайт для 5 плагинов для обмена в социальных сетях. Если вы добавите больше, то add an extra script для каждого.

Сценарии

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
======== > Скрипт Twitter : < ========
<скрипт> ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] , p = / ^ http : / . тест ( д . место ) ? 'http' : 'https' ; if ( ! d . getElementById ( id ) ) { js = d . createElement ( s ) ; JS. id = id ; JS. src = p + ': //platform.twitter.com/widgets.js' ; FJS. parentNode . insertBefore ( js , fjs ) ; } } ( документ , «скрипт» , 'twitter-wjs' ) ;
======== > HTML5 скрипт для Facebook : < =========
<скрипт> ( функция ( д , с , идентификатор ) {
   вар JS , FJS знак равно д. getElementsByTagName ( s ) [ 0 ] ;
   если ( d . getElementById ( id ) ) возврат ;
   JS знак равно д. createElement ( s ) ; JS. Я бы знак равно идентификатор ;
   JS. ЦСИ знак равно //connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0 ;
   FJS. parentNode . insertBefore ( js , фдс ) ;
} ( документ , «скрипт» , 'facebook-jssdk' ) ) ;
======== > Буферный скрипт : < ========
type = text / javascript src = https://d389zggrogs7qo.cloudfront.net/js/button.js >
======== > Google + сценарий : < ========
type = text / javascript >
   ( функция ( ) {
     вар ро знак равно документ. createElement ( 'script' ) ; офицер по вопросам личного состава тип знак равно 'text / javascript' ; офицер по вопросам личного состава асинхронной знак равно правда ;
     офицер по вопросам личного состава ЦСИ знак равно 'https://apis.google.com/js/platform.js' ;
     вар s знак равно документ. getElementsByTagName ( 'script' ) [ 0 ] ; с . parentNode . insertBefore ( po , с ) ;
   } ) ( ) ;
======== > Скрипт Pinterest : < ========
<скрипт асинхронного Defer SRC = //assets.pinterest.com/js/pinit.js>
======== > Скрипт LinkedIn : < ========
src = //platform.linkedin.com/in.js type = text / javascript > язык : en_US

Есть no point to load above scripts on each and every page на Вашем сайте.

Теперь давайте начнем: Создать Социальный Sharing Кнопки

Шаг 1

Перейти к вашей теме function.php файл и вставьте ниже код. Это добавит кнопку обмена на bottom of the post ,

functions.php — Нижняя часть публикации Опция общего доступа

PHP
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
функция crunchify_social_sharing_buttons ( $ content ) {
Глобальный $ post ;
if ( is_singular ( ) | | is_home ( ) ) {
// Получить URL текущей страницы
$ crunchifyURL знак равно urlencode ( get_permalink ( ) ) ;
// Получить заголовок текущей страницы
$ crunchifyTitle знак равно htmlspecialchars ( urlencode ( html_entity_decode ( get_the_title ( ) , ENT_COMPAT , 'UTF-8' ) ) , ENT_COMPAT , «UTF-8» ) ;
// $ crunchifyTitle = str_replace ('', '% 20', get_the_title ());
// Получить миниатюру сообщения для интереса
$ crunchifyThumbnail знак равно wp_get_attachment_image_src ( get_post_thumbnail_id ( $ post — > ID ) , 'полный' ) ;
// Создаем URL для обмена без использования скрипта
$ twitterURL знак равно https://twitter.com/intent/tweet?text= . $ crunchifyTitle . & amp; url = . $ crunchifyURL . '& amp; via = Crunchify' ;
$ facebookURL знак равно 'https://www.facebook.com/sharer/sharer.php?u=' . $ crunchifyURL ;
$ googleURL знак равно https://plus.google.com/share?url= . $ crunchifyURL ;
$ bufferURL знак равно https://bufferapp.com/add?url= . $ crunchifyURL . & amp; текст = . $ crunchifyTitle ;
$ linkedInURL знак равно 'https://www.linkedin.com/shareArticle?mini=true&url=' . $ crunchifyURL . & amp; title = ' . $ crunchifyTitle ;
// По многочисленным просьбам добавлен Pinterest
$ pinterestURL знак равно 'https://pinterest.com/pin/create/button/?url=' . $ crunchifyURL . & amp; media = ' . $ crunchifyThumbnail [ 0 ] . & amp; описание = . $ crunchifyTitle ;
// Добавить кнопку обмена в конце страницы / содержимого страницы
$ содержание , знак равно ' ' ;
$ содержание , знак равно '

' ;
$ содержание , знак равно '

SHARE ON . $ twitterURL , 'target = _ blank > Twitter ' ;
$ содержание , знак равно .. $facebookURL' target=_blank> Facebook ';
$ содержание , знак равно .. $googleURL' target=_blank> Google+ ';
$ содержание , знак равно .. $bufferURL' target=_blank> буфера ';
$ содержание , знак равно .. $linkedInURL' target=_blank> LinkedIn ';
$ содержание , знак равно .. $pinterestURL' data-pin-custom=true target=_blank> Pin It ';
$ содержание , знак равно '' ;
вернуть $ content ;
} еще {
// если не пост / страница, тогда не включайте кнопку обмена
вернуть $ content ;
}
} ;
add_filter ( 'the_content' , 'crunchify_social_sharing_buttons' ) ;

Мы использовали the_content WordPress хук. Он отображает содержимое текущего поста / страницы.

Вот как ваш код выглядит в файле functions.php.

Шаг 2

открыто style.css файл вашей темы WordPress и поместите ниже код для лучшей стилизации.

Стиль темы.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
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
.crunchify-link {
     набивка : 2px 8px 4px 8px ! важно ;
     цвет : белый ;
     размер шрифта : 12 пикселей ;
     пограничный радиус : 2 пикселя ;
     Маржа право: 2 пикселя ;
     курсор : указатель ;
     -moz-background-clip : набивка ;
     -webkit-background-clip : ящик для прокладки ;
     коробка-тень : вставка 0 -3px 0 ргба ( 0,0,0, 0,2 ) ;
     -moz-box-shadow : вставка 0 -3px 0 ргба ( 0,0,0, 0,2 ) ;
     -webkit-box-shadow : вставка 0 -3px 0 ргба ( 0,0,0, 0,2 ) ;
     на полях : 2 пикселя ;
     дисплей : встроенный блок ;
     текстовое оформление : нет ;
}
.crunchify-link: hover, .crunchify-link: active {
     цвет : белый ;
}
.crunchify-twitter {
     фон : # 00aced ;
}
.crunchify-twitter: hover, .crunchify-twitter: active {
     фон : # 0084b4 ;
}
.crunchify-facebook {
     фон : # 3B5997 ;
}
.crunchify-facebook: hover, .crunchify-facebook: active {
     фон : # 2d4372 ;
}
.crunchify-googleplus {
     фон : # D64937 ;
}
.crunchify-googleplus: hover, .crunchify-googleplus: active {
     фон : # b53525 ;
}
.crunchify-buffer {
     фон : # 444 ;
}
.crunchify-buffer: hover, .crunchify-buffer: active {
     фон : # 222 ;
}
.crunchify-pinterest {
     фон : # bd081c ;
}
.crunchify-pinterest: hover, .crunchify-pinterest: active {
     фон : # bd081c ;
}
.crunchify-linkedin {
     фон : # 0074A1 ;
}
.crunchify-linkedin: hover, .crunchify-linkedin: active {
     фон : # 006288 ;
}
.crunchify-social {
     поле : 20px 0px 25px 0px ;
     -webkit-font-smoothing : сглаженный ;
     размер шрифта : 12 пикселей ;
}

Шаг 3

Убедитесь, что вы очистили кеш вашего сайта. Я использую плагин WP Super Cache на своем сайте. Если вы хотите оптимизировать все настройки для WP Super Cache, следуйте инструкциям.

Шаг 4

Deactivate а также Delete другой плагин Social Sharing, если он у вас установлен раньше. That's it ,

Вы должны увидеть красивые кнопки обмена на вашем сайте. Посмотрите живой пример в конце каждого поста на Crunchify.

NOTE: Я использую ShortURL в своем блоге . Если вы хотите иметь more social sharing buttons тогда, пожалуйста, посетите учебник .

Если вы хотите показать кнопку общего доступа на top of the post затем используйте этот код (только шаг 1):

functions.php — опция общего доступа

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
функция crunchify_social_sharing_buttons ( $ content ) {
Глобальный $ post ;
if ( is_singular ( ) | | is_home ( ) ) {
// Получить URL текущей страницы
$ crunchifyURL знак равно urlencode ( get_permalink ( ) ) ;
// Получить заголовок текущей страницы
$ crunchifyTitle знак равно htmlspecialchars ( urlencode ( html_entity_decode ( get_the_title ( ) , ENT_COMPAT , 'UTF-8' ) ) , ENT_COMPAT , «UTF-8» ) ;
// $ crunchifyTitle = str_replace ('', '% 20', get_the_title ());
// Получить миниатюру сообщения для интереса
$ crunchifyThumbnail знак равно wp_get_attachment_image_src ( get_post_thumbnail_id ( $ post — > ID ) , 'полный' ) ;
// Создаем URL для обмена без использования скрипта
$ twitterURL знак равно https://twitter.com/intent/tweet?text= . $ crunchifyTitle . & amp; url = . $ crunchifyURL . '& amp; via = Crunchify' ;
$ facebookURL знак равно 'https://www.facebook.com/sharer/sharer.php?u=' . $ crunchifyURL ;
$ googleURL знак равно https://plus.google.com/share?url= . $ crunchifyURL ;
$ bufferURL знак равно https://bufferapp.com/add?url= . $ crunchifyURL . & amp; текст = . $ crunchifyTitle ;
$ connectedInURL знак равно 'https://www.linkedin.com/shareArticle?mini=true&url=' . $ crunchifyURL . & amp; title = ' . $ crunchifyTitle ;
// По многочисленным просьбам добавлен Pinterest
$ pinterestURL знак равно 'https://pinterest.com/pin/create/button/?url=' . $ crunchifyURL . & amp; media = ' . $ crunchifyThumbnail [ 0 ] . & amp; описание = . $ crunchifyTitle ;
// Добавить кнопку обмена в конце страницы / содержимого страницы
переменная $ , знак равно ' ' ;
переменная $ , знак равно '

' ;
переменная $ , знак равно ' . $ twitterURL , 'target = _ blank > Twitter ' ;
переменная $ , знак равно ' $ facebookURL' target=_blank> Facebook ..';
переменная $ , знак равно ' $ googleURL' target=_blank> Google+ ..';
переменная $ , знак равно .. $ bufferURL' target=_blank> буфер ';
переменная $ , знак равно ' $ linkedInURL' target=_blank> LinkedIn ..';
переменная $ , знак равно .. $ pinterestURL' data-pin-custom=true target=_blank> Pin It ';
переменная $ , знак равно '' ;
вернуть Переменная $. $ content ;
} еще {
// если не пост / страница, тогда не включайте кнопку обмена
вернуть Переменная $. $ content ;
}
} ;
add_filter ( 'the_content' , 'crunchify_social_sharing_buttons' ) ;

Проверьте наш плагин Crunchy Sharing WordPress:

Хрустящий обмен

Создавайте сверхбыстрые кнопки социальных сетей без JavaScript с простым CSS

0.00 (0%) 0 votes

ЧИТАТЬ ТАКЖЕ:  URL-адреса социальных сетей для удобной ссылки: Facebook, WhatsApp, Twitter, Buffer, Google+, LinkedIn и многое другое

ЭТО МОЖЕТ БЫТЬ ИНТЕРЕСНОЕЩЕ ОТ АВТОРА

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь