Twórz superszybkie przyciski udostępniania społecznościowego bez JavaScript za pomocą prostego CSS

Opublikowany: 2019-01-23

Z przyjemnością informujemy o naszej nowej wtyczce Crunchy Sharing .

Crunchy Sharing – Z przyjemnością ogłaszamy naszą nową superszybką # WordPress Social Sharing # Plugin : https://pro.crunchify.com/crunchy-sharing/

Ponad 25 opcji udostępniania społecznościowego, zoptymalizowane, bez JavaScript, responsywne, lekkie, najszybsze, zgodne z RODO.

Sprawdź wszystkie zrzuty ekranu:

  • Crunchy Sharing Premium Plugin Normalne opcje przycisków postów
  • Crunchy Sharing Floating Options
Odwiedź Crunchy Sharing

Nie wyobrażamy sobie strony bez przycisku Social Sharing . Jest to konieczne i absolutnie wymagane. Jak wspomniano w tytule w tym samouczku, omówimy kroki how to set up Social Sharing buttons na swoim blogu:

  • without używania Plugins WordPress
  • without żadnych JavaScripts
  • without wpływu na performance

Oto kilka samouczków, które napisałem, jak zoptymalizować witrynę WordPress, eliminując wtyczkę WordPress. Warto to sprawdzić.

Czy masz któreś z poniższych pytań, to jesteś we właściwym miejscu:

  • Jak wdrożyć udostępnianie społecznościowe
  • Proste przyciski FontAwesome Social Sharing bez JavaScript
  • Przyciski udostępniania w mediach społecznościowych. Brak JavaScriptu. Bez śledzenia. Super szybko.
  • Najprostszy sposób oferowania udostępniania linków w mediach społecznościowych
  • Dodawanie przycisków udostępniania społecznościowego do dowolnej strony WordPress, bez wtyczki.
  • Łatwe przyciski udostępniania społecznościowego bez JavaScript i śledzenia
  • DIY Social Sharing Links: Dodaj przyciski udostępniania społecznościowego bez wtyczki WP

Zacznę od przedstawienia koncepcji, która się za tym kryje:

Przycisk Crunchify Social Sharing, w tym LinkedIn i WhatsApp

Po co wdrażać własny przycisk udostępniania społecznościowego?

  • Nie wszystkie, ale większość wtyczek do udostępniania społecznościowego nie jest zoptymalizowana pod kątem Twoich potrzeb
  • Mogą ładować indywidualnie ikony udostępniania społecznościowego, co zwiększa niepotrzebne żądania HTTP do twojego serwera
  • Jeśli używasz oficjalnych przycisków udostępniania społecznościowego, loads Java Script for each Sharing button co ostatecznie znacząco wpływa na szybkość ładowania strony
  • Jeśli szybkość Twojej strony jest wysoka, Twoja witryna będzie miała wysoką pozycję w wyszukiwarce Google
  • Jeśli szybkość Twojej strony jest wysoka, istnieje większe prawdopodobieństwo, że użytkownicy będą częściej wracać do Twojej witryny, ponieważ jest to dla nich płynne

Sprawdźmy, jakie wszystkie skrypty ładują się w Twojej witrynie dla powyższych 5 wtyczek do udostępniania społecznościowego. Jeśli dodasz więcej, add an extra script dla każdego.

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 script : < ========
<script> ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] , p =/^ http : / . test ( d . location ) ? '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 ) ; } } ( document , 'script' , 'twitter-wjs' ) ; </script>
 
 
======== > Facebook HTML5 script : < =========
<script> ( function ( d , s , id ) {
   var js , fjs = d . getElementsByTagName ( s ) [ 0 ] ;
   if ( d . getElementById ( id ) ) return ;
   js = d . createElement ( s ) ; js . id = id ;
   js . src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0" ;
   fjs . parentNode . insertBefore ( js , fjs ) ;
} ( document , 'script' , 'facebook-jssdk' ) ) ; </script>
 
 
======== > Buffer script : < ========
<script type = "text/javascript" src = "https://d389zggrogs7qo.cloudfront.net/js/button.js" > </script>
 
 
======== > Google + script : < ========
<script type = "text/javascript" >
   ( function ( ) {
     var po = document . createElement ( 'script' ) ; po . type = 'text/javascript' ; po . async = true ;
     po . src = 'https://apis.google.com/js/platform.js' ;
     var s = document . getElementsByTagName ( 'script' ) [ 0 ] ; s . parentNode . insertBefore ( po , s ) ;
   } ) ( ) ;
</script>
 
 
======== > Pinterest script : < ========
<script async defer src = "//assets.pinterest.com/js/pinit.js" > </script>
 
======== > LinkedIn script : < ========
<script src = "//platform.linkedin.com/in.js" type = "text/javascript" > lang : en_US </script>

Nie no point to load above scripts on each and every page w witrynie.

Teraz zacznijmy: Utwórz przyciski Sharing społecznościowego

Krok 1

Przejdź do pliku function.php swojego motywu i wklej poniższy kod. Spowoduje to dodanie przycisku udostępniania na bottom of the post .

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
function crunchify_social_sharing_buttons ( $content ) {
global $post ;
if ( is_singular ( ) | | is_home ( ) ) {
// Get current page URL
$crunchifyURL = urlencode ( get_permalink ( ) ) ;
 
// Get current page title
$crunchifyTitle = htmlspecialchars ( urlencode ( html_entity_decode ( get_the_title ( ) , ENT_COMPAT , 'UTF-8' ) ) , ENT_COMPAT , 'UTF-8' ) ;
// $crunchifyTitle = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$crunchifyThumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post - > ID ) , 'full' ) ;
 
// Construct sharing URL without using any script
$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;text=' . $crunchifyTitle ;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url=' . $crunchifyURL . '&amp;title=' . $crunchifyTitle ;
 
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url=' . $crunchifyURL . '&amp;media=' . $crunchifyThumbnail [ 0 ] . '&amp;description=' . $crunchifyTitle ;
 
// Add sharing button at the end of page/page content
$content . = '<!-- Implement your own superfast social sharing buttons without any JavaScript loading. No plugin required. Detailed steps here: https://crunchify.com/?p=7526 -->' ;
$content . = '<div class="crunchify-social">' ;
$content . = '<h5>SHARE ON</h5> <a class="crunchify-link crunchify-twitter" href="' . $twitterURL . '" target="_blank">Twitter</a>' ;
$content . = '<a class="crunchify-link crunchify-facebook" href="' . $facebookURL . '" target="_blank">Facebook</a>' ;
$content . = '<a class="crunchify-link crunchify-googleplus" href="' . $googleURL . '" target="_blank">Google+</a>' ;
$content . = '<a class="crunchify-link crunchify-buffer" href="' . $bufferURL . '" target="_blank">Buffer</a>' ;
$content . = '<a class="crunchify-link crunchify-linkedin" href="' . $linkedInURL . '" target="_blank">LinkedIn</a>' ;
$content . = '<a class="crunchify-link crunchify-pinterest" href="' . $pinterestURL . '" data-pin-custom="true" target="_blank">Pin It</a>' ;
$content . = '</div>' ;
return $content ;
} else {
// if not a post/page then don't include sharing button
return $content ;
}
} ;
add_filter ( 'the_content' , 'crunchify_social_sharing_buttons' ) ;

Wykorzystaliśmy hak WordPress the_content . Wyświetla zawartość bieżącego posta/strony.

Oto jak wygląda Twój kod w pliku functions.php.

Krok 2

Otwórz plik style.css swojego motywu WordPress i umieść poniżej kod, aby uzyskać lepszą stylizację.

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 {
     padding : 2px 8px 4px 8px !important ;
     color : white ;
     font-size : 12px ;
     border-radius : 2px ;
     margin-right : 2px ;
     cursor : pointer ;
     -moz-background-clip : padding ;
     -webkit-background-clip : padding-box ;
     box-shadow : inset 0 -3px 0 rgba ( 0,0,0,.2 ) ;
     -moz-box-shadow : inset 0 -3px 0 rgba ( 0,0,0,.2 ) ;
     -webkit-box-shadow : inset 0 -3px 0 rgba ( 0,0,0,.2 ) ;
     margin-top : 2px ;
     display : inline-block ;
     text-decoration : none ;
}
 
.crunchify-link:hover,.crunchify-link:active {
     color : white ;
}
 
.crunchify-twitter {
     background : #00aced ;
}
 
.crunchify-twitter:hover,.crunchify-twitter:active {
     background : #0084b4 ;
}
 
.crunchify-facebook {
     background : #3B5997 ;
}
 
.crunchify-facebook:hover,.crunchify-facebook:active {
     background : #2d4372 ;
}
 
.crunchify-googleplus {
     background : #D64937 ;
}
 
.crunchify-googleplus:hover,.crunchify-googleplus:active {
     background : #b53525 ;
}
 
.crunchify-buffer {
     background : #444 ;
}
 
.crunchify-buffer:hover,.crunchify-buffer:active {
     background : #222 ;
}
 
.crunchify-pinterest {
     background : #bd081c ;
}
 
.crunchify-pinterest:hover,.crunchify-pinterest:active {
     background : #bd081c ;
}
 
.crunchify-linkedin {
     background : #0074A1 ;
}
.crunchify-linkedin:hover,.crunchify-linkedin:active {
     background : #006288 ;
}
 
.crunchify-social {
     margin : 20px 0px 25px 0px ;
     -webkit-font-smoothing : antialiased ;
     font-size : 12px ;
}

Krok 3

Upewnij się, że wyczyściłeś pamięć podręczną witryny. Używam wtyczki WP Super Cache na mojej stronie. Jeśli chcesz zoptymalizować wszystkie ustawienia dla WP Super Cache, postępuj zgodnie z samouczkiem.

Krok 4

Deactivate i Delete inną wtyczkę do udostępniania społecznościowego, jeśli masz ją wcześniej zainstalowaną. That's it .

Powinieneś zobaczyć piękne przyciski udostępniania w swojej witrynie. Sprawdź przykład na żywo na końcu każdego postu na Crunchify.

NOTE: używam ShortURL na moim blogu. Jeśli chcesz mieć more social sharing buttons odwiedź samouczek.

Jeśli chcesz wyświetlić przycisk udostępniania u top of the post użyj tego kodu (tylko krok 1):

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
function crunchify_social_sharing_buttons ( $ content ) {
global $ post ;
if ( is_singular ( ) | | is_home ( ) ) {
// Get current page URL
$ crunchifyURL = urlencode ( get_permalink ( ) ) ;
 
// Get current page title
$ crunchifyTitle = htmlspecialchars ( urlencode ( html_entity_decode ( get_the_title ( ) , ENT_COMPAT , 'UTF-8' ) ) , ENT_COMPAT , 'UTF-8' ) ;
// $crunchifyTitle = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$ crunchifyThumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $ post - > ID ) , 'full' ) ;
 
// Construct sharing URL without using any script
$ 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;text=' . $ crunchifyTitle ;
$ linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url=' . $ crunchifyURL . '&amp;title=' . $ crunchifyTitle ;
// Based on popular demand added Pinterest too
$ pinterestURL = 'https://pinterest.com/pin/create/button/?url=' . $ crunchifyURL . '&amp;media=' . $ crunchifyThumbnail [ 0 ] . '&amp;description=' . $ crunchifyTitle ;
 
// Add sharing button at the end of page/page content
$ variable . = '<!-- Implement your own social sharing buttons without any JavaScript loading. No plugin required. Detailed steps here: https://crunchify.com/?p=7526 -->' ;
$ variable . = '<div class="crunchify-social">' ;
$ variable . = '<a class="crunchify-link crunchify-twitter" href="' . $ twitterURL . '" target="_blank">Twitter</a>' ;
$ variable . = '<a class="crunchify-link crunchify-facebook" href="' . $ facebookURL . '" target="_blank">Facebook</a>' ;
$ variable . = '<a class="crunchify-link crunchify-googleplus" href="' . $ googleURL . '" target="_blank">Google+</a>' ;
$ variable . = '<a class="crunchify-link crunchify-buffer" href="' . $ bufferURL . '" target="_blank">Buffer</a>' ;
$ variable . = '<a class="crunchify-link crunchify-linkedin" href="' . $ linkedInURL . '" target="_blank">LinkedIn</a>' ;
$ variable . = '<a class="crunchify-link crunchify-pinterest" href="' . $ pinterestURL . '" data-pin-custom="true" target="_blank">Pin It</a>' ;
$ variable . = '</div>' ;
return $ variable . $ content ;
} else {
// if not a post/page then don't include sharing button
return $ variable . $ content ;
}
} ;
add_filter ( 'the_content' , 'crunchify_social_sharing_buttons' ) ;

Sprawdź naszą wtyczkę Crunchy Sharing WordPress:

Chrupiące udostępnianie

15% ZNIŻKI na Crunchy Sharing Plugin. Użyj kodu: CRUNCHIFY 15