טעינת כפתורי שיתוף בצורה אסינכרונית בוורדפרס

שיתוף התוכן שלכם ברשתות חברתיות חשוב מהסיבות הברורות. אך המהירות וזמן הטעינה של האתר שלכם חשובה לא פחות. במאמר קצר זה נראה כיצד לטעון כפתורי שיתוף של רשתות חברתיות בצורה אסינכרונית על מנת לשפר את ביצועי אתר הוורדפרס שלכם.

מה זה אומר ״טעינה אסינכרונית״?

בלי להכנס לעומק – טעינה אסינכרונית אומר שכפתורי השיתוף (הסקריפטים) ייטענו באתר תוך כדי שהעמוד הנוכחי באתר שלכם נטען וטעינה זו לא תעכב את הפריסה של העמוד עד שאלו יסיימו להטען. מכאן, שהגולשים באתר שלכם ימתינו פחות זמן בכדי לראות את התוכן באתר הוורדפרס שלכם.

יתרונות:

• שיפור בזמן הטעינה של אתר הוורדפרס שלכם. טעינת האתר לא תתעכב בלהמתין לתגובה של שרתי הרשתות החברתיות.
• האתר שלכם יהיה בעצם ״עצמאי״ ואינו תלוי, כוונתי היא שבמידה והשרתים של פייסבוק או טוויטר עמוסים או לא פעילים מסיבה כזו או אחרת, תוכן האתר שלכם עדיין יוצג לגולשים.
• ישפר את יחס ההמרה ואת הקידום במנועי החיפוש – ידוע כי למהירות בה התוכן מוצג לגולשים ישנה השפעה ישירה על נתונים אלו.

הנה דוגמא כיצד לטעון אסינכרונית כפתורי שיתוף בתבניות וורדפרס. הרשתות החברתיות בהם נתמקד הינם פייסבוק, טוויטר, גוגל+, פינטרסט ולינקדין.

1. צרו קובץ Javascript

לצורך הדוגמא קראו לקובץ share.js ושימו אותו בתיקיית ה js של התבנית שלכם (או כמובן תבנית הבת שלכם). זהו הקוד לקובץ זה:

/* Script for asynchronus load of sharing buttons */
 
 (function(w, d, s) {
 
   function go(){
  	var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
  	if (d.getElementById(id)) {return;}
    	js = d.createElement(s); js.src = url; js.id = id;
    	fjs.parentNode.insertBefore(js, fjs);
  	};
        //Facebook
  	load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk');
        //Google+
  	load('https://apis.google.com/js/plusone.js', 'gplus1js');
        //Twitter
  	load('//platform.twitter.com/widgets.js', 'tweetjs');
        //LinedIN
  	load('//platform.linkedin.com/in.js', 'lnkdjs');
        //Pinterest
  	load('//assets.pinterest.com/js/pinit.js', 'pinitjs');
    }
 	if (w.addEventListener) { w.addEventListener("load", go, false); }
  	else if (w.attachEvent) { w.attachEvent("onload",go); }
 
}(window, document, 'script'));

2. בצעו קריאה ל share.js בתבנית שלכם

הוסיפו את קטע הקוד הבא לקובץ functions.php של התבנית שלכם:

/* Enqueueing the script inside your theme functions.php */
 
function meks_load_scripts(){
 
  if(is_single()){
    wp_enqueue_script( 'savvy_async_share', trailingslashit(get_template_directory_uri()).'/js/share.js', array( 'jquery' ));
  }
 
}
 
add_action('wp_enqueue_scripts', 'meks_load_scripts');

הקוד הבא ייטען את הסקריפטים של הרשתות החברתיות רק בדפי הפוסטים באתר שלכם (single posts). במידה ואתם מעוניינים לטעון אותם גם בעמודים (pages) שנו את is_single() ל is_singular(). אם תרצו לטעון אלו בכל העמודים פשוט הסירו את התנאי.

3. הוסיפו את ה html בתבנית שלכם

זהו בעצם השלב האחרון בו אנו מטמיעים את הכפתורים עצמם בתבנית שלכם, ברגע שהסקריפטים ייטענו אלו ייראו ככפתורי השיתוף. שימו לב כי אתם מוסיפים קוד זה בתוך הלולאה של וורדפרס, תמצאו אותה בקובץ single.php או index.php לדוגמא. הנה דוגמא בסיסית:

<?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<?php the_title(); ?>
 
<?php the_content(); ?>
 
<ul class="savvy_share">
 
  <!-- twitter -->
  <li><a class="twitter-share-button" data-count="vertical" data-via="mekshq" data-url="<?php the_permalink() ?>"></a></li>
 
  <!-- LinkedIN -->
  <li><script type="IN/Share" data-counter="top" data-url="<?php the_permalink() ?>"></script></li>
 
  <!-- facebook like -->
  <li><span class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-href="<?php the_permalink() ?>"></span></li>
 
  <!-- g+ -->
  <li><g:plusone size="tall" data-href="<?php the_permalink() ?>"></g:plusone></li>
 
  <!-- pinterest -->
  <li><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo    urlencode(get_the_title()); ?>" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>
 
</ul>
 
<?php endwhile; ?>
<?php endif; ?>

עד כאן. זוהי הדרך לטעינת כפתורי שיתוף של רשתות חברתיות בצורה אסינכרונית. יישמו דרך זו ובהתאם לפרמטרים שבחרתם לכל אחד מרשתות החברתיות התוצאה הסופית תראה משהו בסגנון הבא:

מקווה שנהניתם ואם ישנות שאלות או מחשבות שתפו אותנו בתגובות!  🙂