간단한 CSS로 JavaScript 없이 초고속 소셜 공유 버튼 만들기

게시 됨: 2019-01-23

새로운 플러그인 Crunchy Sharing 을 발표하게 된 것을 기쁘게 생각합니다.

Crunchy 공유 – 새로운 초고속 # WordPress Social Sharing # 플러그인 을 발표하게 되어 기쁩니다. https://pro.crunchify.com/crunchy-sharing/

25개 이상의 소셜 공유 옵션, 최적화됨, JavaScript 없음, 반응형, 경량, 가장 빠름, GDPR 준수.

모든 스크린샷 확인:

  • 크런치 공유 프리미엄 플러그인 일반 포스트 버튼 옵션
  • 크런치 공유 플로팅 옵션
크런치 쉐어링 보러가기

Social Sharing 버튼이 없는 사이트는 상상할 수 없습니다. 반드시 필요하고 절대적으로 필요합니다. 이 튜토리얼에서 제목에서 언급했듯이 블로그에서 how to set up Social Sharing buttons 에 대한 단계를 살펴보겠습니다.

  • WordPress Plugins 을 사용하지 without
  • JavaScripts without
  • performance 영향 without

이것은 WordPress 플러그인을 제거하여 WordPress 사이트를 최적화하는 방법에 대해 작성한 몇 가지 추가 자습서입니다. 확인할 가치가 있습니다.

아래 질문 중 하나가 있습니까? 올바른 위치에 있습니다.

  • 소셜 공유 구현 방법
  • JavaScript가 없는 Simple FontAwesome 소셜 공유 버튼
  • 소셜 미디어 공유 버튼. 자바스크립트가 없습니다. 추적이 없습니다. 어마 어마하게 빠른.
  • 소셜 미디어에 대한 공유 링크를 제공하는 가장 간단한 방법
  • 플러그인 없이 모든 WordPress 페이지에 소셜 공유 버튼 추가
  • JavaScript 및 추적 없이 간편한 소셜 공유 버튼
  • DIY 소셜 공유 링크: 플러그인 WP 없이 소셜 공유 버튼 추가

이 뒤에 숨겨진 개념을 말하면서 시작하겠습니다.

LinkedIn 및 WhatsApp을 포함한 Crunchify 소셜 공유 버튼

자신의 소셜 공유 버튼을 구현하는 이유는 무엇입니까?

  • 전부는 아니지만 대부분의 소셜 공유 플러그인이 필요에 맞게 최적화되어 있지 않습니다.
  • 서버에 대한 불필요한 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 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 후크를 사용했습니다. 현재 게시물/페이지의 내용을 표시합니다.

다음은 functions.php 파일에서 코드가 어떻게 보이는지 보여줍니다.

2 단계

WordPress 테마의 style.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 {
     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 합니다. 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' ) ;

Crunchy Sharing WordPress 플러그인을 확인하세요.

크런치 공유

15% OFF 크런치 공유 플러그인. 코드 사용: 크런치파이 15