シンプルなCSSでJavaScriptなしの超高速ソーシャル共有ボタンを作成

公開: 2019-01-23

新しいプラグインCrunchySharingを発表できることをうれしく思います。

Crunchy Sharing –新しい超高速＃WordPress Social Sharing ＃プラグインを発表できることをうれしく思います：https ： //pro.crunchify.com/crunchy-sharing/

25以上のソーシャル共有オプション、最適化、JavaScriptなし、レスポンシブ、軽量、最速、GDPR準拠。

すべてのスクリーンショットをチェックアウトします。

  • カリカリ共有プレミアムプラグイン通常の投稿ボタンオプション
  • カリカリ共有フローティングオプション
CrunchySharingにアクセス

Social Sharingボタンのないサイトを想像することはできません。 それは絶対に必要であり、絶対に必要です。 このチュートリアルでタイトルに記載されているように、ブログでhow to set up Social Sharing buttonsの手順を説明します。

  • WordPress Pluginsを使用without
  • JavaScripts without
  • performanceに影響を与えるwithout

これは、WordPressプラグインを削除してWordPressサイトを最適化する方法について私が書いたチュートリアルです。 確認する価値があります。

以下の質問のいずれかがありますか、それならあなたは正しい場所にいます：

  • ソーシャルシェアリングを実装する方法
  • JavaScriptなしのシンプルなFontAwesomeソーシャル共有ボタン
  • ソーシャルメディア共有ボタン。 JavaScriptはありません。 全く追跡しません。 超早い。
  • ソーシャルメディアの共有リンクを提供する最も簡単な方法
  • プラグインなしで、任意のWordPressページにソーシャル共有ボタンを追加します。
  • JavaScriptと追跡なしの簡単なソーシャル共有ボタン
  • DIYソーシャル共有リンク：プラグインWPなしでソーシャル共有ボタンを追加

この背後にある概念を説明することから始めましょう：

LinkedInとWhatsAppを含むソーシャル共有ボタンをCrunchify

なぜ独自のソーシャル共有ボタンを実装するのですか？

  • すべてではありませんが、ほとんどのソーシャル共有プラグインはニーズに合わせて最適化されていません
  • ソーシャル共有アイコンを個別にロードする可能性があり、サーバーへの不要なHTTPリクエストが増加します
  • 公式のソーシャル共有ボタンを使用している場合はloads Java Script for each Sharing button最終的にページの読み込み速度に大きく影響します。
  • あなたのページ速度が速い場合、あなたのサイトはグーグル検索で上位にランクされます
  • ページの速度が速いと、ユーザーにとってスムーズなエクスペリエンスであるため、ユーザーがより頻繁にサイトに戻る可能性が高くなります。

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フックを使用しました。 現在の投稿/ページの内容が表示されます。

これは、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スーパーキャッシュプラグインを使用しています。 WPスーパーキャッシュのすべての設定を最適化する場合は、チュートリアルに従ってください。

ステップ-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 SharingWordPressプラグインをチェックしてください：

カリカリ共有

カリカリ共有プラグインが15％オフ。 使用コード： CRUNCHIFY 15