• Anasayfa
  • Nesne
  • Genel
  • Basit CSS ile JavaScript olmadan Süper Hızlı Sosyal Paylaşım Düğmeleri oluşturun

Basit CSS ile JavaScript olmadan Süper Hızlı Sosyal Paylaşım Düğmeleri oluşturun

Yayınlanan: 2019-01-23

Yepyeni eklentimiz Crunchy Sharing'i duyurmaktan mutluluk duyuyoruz.

Crunchy Sharing - Yepyeni süper hızlı # WordPress Sosyal Paylaşım # Eklentimizi duyurmaktan mutluluk duyuyoruz: https://pro.crunchify.com/crunchy-sharing/

25'ten fazla sosyal paylaşım seçeneği, Optimize Edilmiş, JavaScript Yok, Duyarlı, Hafif, En Hızlı, GDPR uyumlu.

Tüm ekran görüntülerini kontrol edin:

  • Gevrek Paylaşım Premium Eklentisi Normal Gönderi Düğmeleri Seçenekleri
  • Gevrek Paylaşım Kayan Seçenekler
Crunchy Sharing'i ziyaret edin

Social Sharing düğmesi olmayan bir site düşünemiyoruz. Zorunludur ve kesinlikle gereklidir. Bu eğitimde başlıkta belirtildiği gibi, blogunuzda how to set up Social Sharing buttons ilişkin adımların üzerinden geçeceğiz:

  • without bir WordPress Plugins kullanmadan
  • JavaScripts without
  • without bir performance etkisi olmadan

Bu, WordPress eklentisini ortadan kaldırarak WordPress sitenizi nasıl optimize edeceğiniz hakkında yazdığım birkaç ders daha. Kontrol etmeye değer.

Aşağıdaki sorulardan herhangi birine sahip misiniz, o zaman doğru yerdesiniz:

  • Sosyal Paylaşım Nasıl Uygulanır?
  • JavaScript Olmadan Basit FontAwesome Sosyal Paylaşım Düğmeleri
  • Sosyal Medya Paylaşım Düğmeleri. JavaScript yok. İzleme yok. Çok hızlı.
  • Sosyal Medya için Paylaşım Bağlantıları Sunmanın En Basit Yolu
  • Herhangi bir WordPress Sayfasına Sosyal Paylaşım Düğmeleri Ekleme, Eklenti Yok.
  • JavaScript ve izleme olmadan kolay sosyal paylaşım düğmeleri
  • Kendin Yap Sosyal Paylaşım Bağlantıları: Eklenti WP Olmadan Sosyal Paylaşım Düğmeleri Ekleyin

Bunun arkasındaki bir kavramı anlatarak başlayayım:

LinkedIn ve WhatsApp dahil olmak üzere Sosyal Paylaşımı Crunchify

Neden kendi Sosyal Paylaşım Düğmenizi uygulamalısınız?

  • Sosyal paylaşım eklentilerinin tamamı değil, çoğu ihtiyacınıza göre optimize edilmemiştir.
  • Sunucunuza gereksiz HTTP isteklerini artıran sosyal paylaşım simgelerini ayrı ayrı yükleyebilirler.
  • Resmi sosyal paylaşım düğmelerini kullanıyorsanız, sonunda sayfa yükleme hızınızı önemli ölçüde etkileyen loads Java Script for each Sharing button .
  • Sayfa hızınız yüksekse siteniz Google Arama'da üst sıralarda yer alacaktır.
  • Sayfa hızınız yüksekse, kullanıcıların sitenize daha sık dönme şansları daha yüksektir çünkü bu onlar için sorunsuz bir deneyimdir.

5'in üzerindeki sosyal paylaşım eklentileri için sitenizin hangi komut dosyalarını yüklediğini kontrol edelim. Daha fazlasını 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 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>

Sitenizdeki no point to load above scripts on each and every page .

Şimdi başlayalım: Sosyal Sharing Düğmeleri Oluşturun

Aşama 1

Temanızın function.php dosyasına gidin ve aşağıdaki kodu yapıştırın. Bu bottom of the post paylaşım düğmesi ekleyecektir.

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' ) ;

the_content WordPress kancasını kullandık. Geçerli yazının/sayfanın içeriğini görüntüler.

İşte kodunuz function.php dosyasında nasıl göründüğü.

Adım 2

WordPress temanızın style.css dosyasını açın ve daha iyi stil için aşağıdaki kodu girin.

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 ;
}

Aşama 3

Site önbelleğinizi temizlediğinizden emin olun. Sitemde WP Super Cache eklentisi kullanıyorum. WP Super Cache için tüm ayarları optimize etmek istiyorsanız, öğreticiyi izleyin.

4. Adım

Daha önce yüklediyseniz, diğer Sosyal Paylaşım eklentisini Deactivate bırakın ve Delete . That's it .

Sitenizde güzel paylaşım butonları görmelisiniz. Crunchify'daki her gönderinin sonundaki canlı örneğe göz atın.

NOTE: Blogumda ShortURL kullanıyorum. Daha more social sharing buttons sahip olmak istiyorsanız, lütfen öğreticiyi ziyaret edin.

Gönderinin en top of the post Paylaşım düğmesini göstermek istiyorsanız, bu kodu kullanın (yalnızca Adım-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' ) ;

Crunchy Sharing WordPress Eklentimize göz atın:

gevrek paylaşım

%15 İNDİRİM Gevrek Paylaşım Eklentisi. Kodu Kullan: CRUNCHIFY 15