• Beranda
  • Artikel
  • Umum
  • Buat Tombol Berbagi Sosial Supercepat tanpa JavaScript dengan CSS sederhana

Buat Tombol Berbagi Sosial Supercepat tanpa JavaScript dengan CSS sederhana

Diterbitkan: 2019-01-23

Dengan senang hati kami mengumumkan plugin baru kami Crunchy Sharing .

Crunchy Sharing – Dengan senang hati kami mengumumkan # WordPress Social Sharing # Plugin baru kami yang super cepat: https://pro.crunchify.com/crunchy-sharing/

Lebih dari 25 opsi berbagi sosial, Dioptimalkan, Tanpa JavaScript, Responsif, Ringan, Tercepat, sesuai GDPR.

Lihat semua tangkapan layar:

  • Plugin Premium Berbagi Renyah Opsi Tombol Posting Normal
  • Opsi Mengambang Berbagi Renyah
Kunjungi Berbagi Renyah

Kami tidak dapat membayangkan sebuah situs tanpa tombol Social Sharing . Itu harus dan mutlak diperlukan. Seperti yang disebutkan dalam judul dalam tutorial ini, kita akan membahas langkah-langkah tentang how to set up Social Sharing buttons di blog Anda:

  • without menggunakan Plugins WordPress apa pun
  • without JavaScripts
  • without dampak performance apa pun

Ini adalah beberapa tutorial lagi yang saya tulis tentang cara mengoptimalkan situs WordPress Anda dengan menghilangkan plugin WordPress. Ini layak untuk diperiksa.

Apakah Anda memiliki pertanyaan di bawah ini, maka Anda berada di tempat yang tepat:

  • Bagaimana Menerapkan Berbagi Sosial
  • Tombol Berbagi Sosial FontAwesome Sederhana Tanpa JavaScript
  • Tombol Berbagi Media Sosial. Tidak ada JavaScript. Tidak ada pelacakan. Sangat cepat.
  • Cara termudah untuk Menawarkan Tautan Berbagi untuk Media Sosial
  • Menambahkan Tombol Berbagi Sosial ke Halaman WordPress mana pun, Tanpa Plugin.
  • Tombol berbagi sosial yang mudah tanpa JavaScript dan pelacakan
  • Tautan Berbagi Sosial DIY: Tambahkan Tombol Berbagi Sosial tanpa Plugin WP

Mari saya mulai dengan menceritakan konsep di balik ini:

Tombol Berbagi Sosial Crunchify termasuk LinkedIn dan WhatsApp

Mengapa menerapkan Tombol Berbagi Sosial Anda sendiri?

  • Tidak semua tetapi sebagian besar plugin berbagi sosial tidak dioptimalkan untuk kebutuhan Anda
  • Mereka mungkin memuat ikon berbagi sosial satu per satu yang meningkatkan permintaan HTTP yang tidak perlu ke server Anda
  • Jika Anda menggunakan tombol berbagi sosial resmi maka itu loads Java Script for each Sharing button yang pada akhirnya memengaruhi kecepatan memuat halaman Anda secara signifikan
  • Jika kecepatan halaman Anda tinggi, situs Anda akan berperingkat tinggi di Google Penelusuran
  • Jika kecepatan halaman Anda tinggi, ada lebih banyak kemungkinan pengguna akan kembali ke situs Anda lebih sering karena ini adalah pengalaman yang lancar bagi mereka

Mari kita periksa semua skrip apa yang dimuat situs Anda untuk 5 plugin berbagi sosial di atas. Jika Anda menambahkan lebih banyak, add an extra script untuk masing-masing.

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>

Tidak no point to load above scripts on each and every page di situs Anda.

Sekarang mari kita mulai: Buat Tombol Sharing Sosial

Langkah 1

Buka file function.php tema Anda dan rekatkan kode di bawah ini. Ini akan menambahkan tombol berbagi di bagian 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' ) ;

Kami telah menggunakan hook the_content WordPress. Ini menampilkan konten posting/halaman saat ini.

Berikut adalah tampilan kode Anda di file functions.php.

Langkah 2

Buka file style.css dari tema WordPress Anda dan letakkan kode di bawah ini untuk penataan yang lebih baik.

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

Langkah-3

Pastikan Anda menghapus cache situs Anda. Saya menggunakan plugin WP Super Cache di situs saya. Jika Anda ingin mengoptimalkan semua pengaturan untuk WP Super Cache, ikuti tutorialnya.

Langkah-4

Deactivate dan Delete plugin Berbagi Sosial lainnya jika Anda sudah menginstalnya sebelumnya. That's it .

Anda akan melihat tombol berbagi yang indah di situs Anda. Lihat contoh langsung di akhir setiap posting di Crunchify.

NOTE: Saya menggunakan ShortURL di blog saya. Jika Anda ingin memiliki more social sharing buttons , silakan kunjungi tutorial.

Jika Anda ingin menampilkan tombol Berbagi di bagian top of the post , gunakan kode ini (Langkah-1 saja):

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

Lihat Plugin WordPress Berbagi Renyah kami:

Berbagi Renyah

15% OFF Plugin Berbagi Renyah. Gunakan Kode: CRUNCHIFY 15