สร้างปุ่มแบ่งปันทางสังคมที่เร็วมากโดยไม่ต้องใช้ JavaScript ด้วย CSS . แบบง่าย

เผยแพร่แล้ว: 2019-01-23

เรายินดีที่จะประกาศปลั๊กอินใหม่ล่าสุดของเรา Crunchy Sharing

Crunchy Sharing – เรามีความยินดีที่จะประกาศแบรนด์ใหม่ของเราเร็วสุด # WordPress Social Sharing # Plugin : https://pro.crunchify.com/crunchy-sharing/

ตัวเลือกการแบ่งปันทางโซเชียลมากกว่า 25 แบบ, ปรับให้เหมาะสม, ไม่มี JavaScript, ตอบสนอง, น้ำหนักเบา, เร็วที่สุด, สอดคล้องกับ GDPR

ชำระเงินภาพหน้าจอทั้งหมด:

  • Crunchy Sharing Premium Plugin ตัวเลือกปุ่มโพสต์ปกติ
  • ตัวเลือกการแบ่งปันแบบลอยตัว
เยี่ยมชมการแบ่งปันกรุบกรอบ

เราไม่สามารถจินตนาการถึงไซต์ที่ไม่มีปุ่ม Social Sharing จำเป็นและจำเป็นอย่างยิ่ง ตามที่กล่าวถึงในบทช่วยสอนนี้ เราจะพูดถึงขั้นตอนใน how to set up Social Sharing buttons บนบล็อกของคุณ:

  • without ใช้ Plugins WordPress
  • without JavaScripts ใดๆ
  • without กระทบต่อ performance

นี่เป็นบทช่วยสอนเพิ่มเติมสองสามข้อที่ฉันเขียนเกี่ยวกับวิธีเพิ่มประสิทธิภาพไซต์ WordPress ของคุณโดยกำจัดปลั๊กอิน WordPress มันคุ้มค่าที่จะตรวจสอบ

คุณมีคำถามด้านล่างหรือไม่ แสดงว่าคุณมาถูกที่แล้ว:

  • วิธีการใช้การแบ่งปันทางสังคม
  • Simple FontAwesome Social Sharing Buttons โดยไม่ต้องใช้ JavaScript
  • ปุ่มแชร์โซเชียลมีเดีย ไม่มีจาวาสคริปต์ ไม่มีการติดตาม. เร็วมาก.
  • วิธีที่ง่ายที่สุดในการเสนอลิงก์การแชร์สำหรับโซเชียลมีเดีย
  • การเพิ่มปุ่มแบ่งปันทางสังคมไปยังหน้า WordPress ใด ๆ ไม่มีปลั๊กอิน
  • ปุ่มแชร์โซเชียลง่ายๆ โดยไม่ต้องใช้ JavaScript และการติดตาม
  • ลิงก์การแชร์โซเชียล DIY: เพิ่มปุ่มแชร์โซเชียลโดยไม่ต้องใช้ปลั๊กอิน WP

ให้ฉันเริ่มต้นด้วยการบอกแนวคิดเบื้องหลังสิ่งนี้:

กระทืบปุ่ม Social Sharing รวมถึง LinkedIn และ WhatsApp

ทำไมต้องใช้ปุ่มแบ่งปันทางสังคมของคุณเอง?

  • ไม่ใช่ทั้งหมดแต่ปลั๊กอินการแบ่งปันทางสังคมส่วนใหญ่ไม่ได้รับการปรับให้เหมาะกับความต้องการของคุณ
  • พวกเขาอาจโหลดไอคอนการแบ่งปันทางสังคมทีละรายการซึ่งเพิ่มคำขอ HTTP ที่ไม่จำเป็นไปยังเซิร์ฟเวอร์ของคุณ
  • หากคุณกำลังใช้ปุ่มแบ่งปันทางสังคมอย่างเป็นทางการ มันจะ loads Java Script for each Sharing button ซึ่งท้ายที่สุดแล้วจะส่งผลต่อความเร็วในการโหลดหน้าเว็บของคุณอย่างมาก
  • หากความเร็วหน้าเว็บของคุณสูง เว็บไซต์ของคุณจะมีอันดับสูงใน Google Search
  • หากความเร็วหน้าเว็บของคุณสูง มีโอกาสมากขึ้นที่ผู้ใช้จะกลับมาที่ไซต์ของคุณบ่อยขึ้นเนื่องจากเป็นประสบการณ์ที่ราบรื่นสำหรับพวกเขา

มาดูกันว่าสคริปต์ทั้งหมดที่ไซต์ของคุณโหลดสำหรับปลั๊กอินการแบ่งปันทางสังคม 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 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>

no point to load above scripts on each and every page ในไซต์ของคุณ

มาเริ่มกันเลย: สร้างปุ่ม Sharing ทางสังคม

ขั้นตอนที่ 1

ไปที่ไฟล์ function.php ของธีมของคุณแล้ววางโค้ดด้านล่าง การดำเนินการนี้จะเพิ่มปุ่มแชร์ที่ 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' ) ;

เราใช้ the_content WordPress hook จะแสดงเนื้อหาของโพสต์/หน้าปัจจุบัน

นี่คือลักษณะของโค้ดของคุณในไฟล์ functions.php

ขั้นตอนที่ 2

เปิด style.css ของธีม WordPress ของคุณและใส่โค้ดด้านล่างเพื่อให้จัดสไตล์ได้ดีขึ้น

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

ขั้นตอนที่ 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 เท่านั้น):

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

ชำระเงินปลั๊กอิน WordPress การแบ่งปันกรุบกรอบของเรา:

การแบ่งปันกรุบกรอบ

15% OFF ปลั๊กอินการแบ่งปันกรุบกรอบ ใช้รหัส: CRUNCHIFY 15