قم بإنشاء أزرار مشاركة اجتماعية فائقة السرعة بدون JavaScript باستخدام CSS بسيط

نشرت: 2019-01-23

يسعدنا أن نعلن عن برنامجنا المساعد الجديد Crunchy Sharing .

مشاركة مقرمشة - يسعدنا أن نعلن عن علامتنا التجارية الجديدة بسرعة فائقة # المشاركة الاجتماعية # WordPress # البرنامج المساعد : https://pro.crunchify.com/crunchy-sharing/

أكثر من 25 خيارًا للمشاركة الاجتماعية ، محسّن ، بدون جافا سكريبت ، متجاوب ، خفيف الوزن ، أسرع ، متوافق مع إجمالي الناتج المحلي.

تحقق من جميع لقطات الشاشة:

  • Crunchy Sharing Premium Plugin عادي خيارات أزرار المشاركة
  • خيارات عائمة تقاسم المقرمش
قم بزيارة Crunchy Sharing

لا يمكننا تخيل موقع بدون زر Social Sharing . إنه ضروري ومطلوب تمامًا. كما يذكر العنوان في هذا البرنامج التعليمي ، سنتطرق إلى خطوات حول how to set up Social Sharing buttons على مدونتك:

  • without استخدام أي Plugins WordPress
  • without أي JavaScripts
  • without أي تأثير على performance

هذا عدد من البرامج التعليمية التي كتبتها حول كيفية تحسين موقع WordPress الخاص بك عن طريق التخلص من مكون WordPress الإضافي. الأمر يستحق التدقيق.

هل لديك أي من الأسئلة أدناه ، فأنت في المكان الصحيح:

  • كيفية تنفيذ المشاركة الاجتماعية
  • أزرار مشاركة اجتماعية بسيطة FontAwesome بدون جافا سكريبت
  • أزرار مشاركة الوسائط الاجتماعية. لا يوجد جافا سكريبت. لا تتبع. سريع جدا.
  • أبسط طريقة لتقديم روابط مشاركة لوسائل التواصل الاجتماعي
  • إضافة أزرار المشاركة الاجتماعية إلى أي صفحة WordPress ، بدون مكون إضافي.
  • أزرار مشاركة اجتماعية سهلة بدون جافا سكريبت وتتبع
  • روابط المشاركة الاجتماعية DIY: أضف أزرار المشاركة الاجتماعية بدون WP Plugin

اسمحوا لي أن أبدأ بإخبار المفهوم الكامن وراء هذا:

زر Crunchify للمشاركة الاجتماعية بما في ذلك LinkedIn و WhatsApp

لماذا تنفذ زر المشاركة الاجتماعية الخاص بك؟

  • لم يتم تحسين جميع المكونات الإضافية للمشاركة الاجتماعية ما عدا معظمها لتلبية احتياجاتك
  • قد يقومون بتحميل رموز المشاركة الاجتماعية بشكل فردي مما زاد من طلبات 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 hook. يعرض محتويات المنشور / الصفحة الحالية.

إليك كيف تبدو التعليمات البرمجية الخاصة بك في ملف jobs.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 إذا كنت قد قمت بتثبيته من قبل. 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٪ على البرنامج المساعد Crunchy Sharing. استخدم الكود: CRUNCHIFY 15