דף הבית » טריקים וטיפים

להוסיף כפתור לייק וכפתור +1 לאתר וורדפרס

כפתורי "גוגל +1" הם התשובה לכפתורי "פייסבוק לייק". תחרות חדשה בין שני ענקים בעשור השני של המאה ה-21. זה נחמד שיש תחרות, אבל השאלה היא איך זה ישפיע על אתרי האינטרנט ואיך אתרים מבוססי וורדפרס משלבים את הכפתורים האלה באתר? בפוסט זה נלמד איך עושים זאת.

הקרב על כפתורי הדירוג והשליטה על האינטרנט

הקרב על כפתורי הדירוג והשליטה על האינטרנט

קצת רקע

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

גוגל מתבססת על תוכן "מחוץ לאתר" שנמצא באתרים חיצוניים. בעוד פייסבוק מתבססת על תוכן גולשים "בתוך האתר". כפתורי הלייק של פייסבוק הוציאו אותה מחוץ לאתר שלה אל הרשת וזה הופך אותה לאיום על גוגל. עם בעבר גוגל הייתה הגורם העיקרי שהשפיע על דפוסי העבודה של בעלי האתרים כתוצאה ממהפכת ה-SEO שהוכתבה בצורה אלגנטית מאוד, אז כפתורי הלייק של פייסבוק יצרו מהפכה חדשה – מהפכת הדירוג של האתרים על ידי אנשים שאנחנו מכירים.

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

הוספת כפתורים לאתרי וורדפרס

כדי להוסיף כפתורי דירוג חברתיים לכל פוסט, יש להוסיף את הקוד הבא לקובץ functions.php בערכת העיצוב שלכם:

הוספת כפתורי פייסבוק לייק

function add_facebook_like( $content ) {
    $content .= '<iframe src="http://www.facebook.com/plugins/like.php?href=';
    $content .= urlencode( get_permalink( $post->ID ) );
    $content .= '&amp;layout=button_count&amp;width=100&amp;height=21&amp;action=like&amp;send=false&amp;show_faces=false&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>';
    return $content;
}
add_filter( 'the_content', 'add_facebook_like' );

כדי לבצע התאמות בקוד לחצו כאן.

הוספת כפתורי גוגל +1

function enqueue_google_plusone_script() {
    wp_enqueue_script( 'google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}
add_action( 'wp_enqueue_scripts', 'enqueue_google_plusone_script' );

function add_google_plusone( $content ) {
    $content .= '<div class="google_plusone"><g:plusone href="';
    $content .= get_permalink();
    $content .= '"></g:plusone></div>';
    return $content;
}
add_filter( 'the_content', 'add_google_plusone' );

כדי לבצע התאמות בקוד לחצו כאן.

מאת רמי

אחראי על אתר וורדפרס בעברית ועל תרגום ושחרור גרסאות וורדפרס בעברית. מפתח ליבה, בכל גרסה החל מגרסה 2.8, מפתח מוביל בגרסה 4.4 ובגרסה 4.6. מספק שירותי פיתוח אתרים, פיתוח תוספי וורדפרס לסטרטאפים ופיתוח כלים למפתחי וורדפרס - GenerateWP.com.

23 תגובות »

  • יאיר כותב :

    האם זה מחליף התקנת תוסף?

  • רמי כותב :

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

  • רופא שיניים כותב :

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

  • ליאור כותב :

    שלום,

    דיי חדש בנושא…

    איפה אני מוצא בבקשה את קובץ ה functions.php ?

    אני משתמש בערכת עיצוב Greyzed by
    by The Forge Web Creations

    וכשאני נכנס לחלונית של עריכת CSS מקבל רק שורה ארוכה של קוד (שאין לי ממש מושג בו 😉

    עזרה?

    תודה רבה

  • ליאור כותב :

    נראה לי שענו לי כבר אבל זה נמחק או משהו 🙂

  • רמי כותב :

    עניתי, פרצו לאתר, שחזרנו, והגיבוי ששוחזר היה לפני שעניתי.

  • ליאור כותב :

    הבנתי, אז תודה, אבל תוכל לחזור על התשובה בבקשה?

  • רמי כותב :

    בתפריט הימני לך ל "עיצוב->לערוך". ואז למעלה בצד שמאל יש לך בחירת תבנית – בחר את התבנית שלך. אחרי שבחרת תבנית, מופיעה רשימת קבצים לעריכה בצד שמאל. אתה בוחר את הקובץ functions.php ומתחיל לערוך אותו.

  • ליאור כותב :

    אין לי את זה "עיצוב->לערוך",יש לי "ניהול ערכת עיצוב" ושם Custom Design וגם הרבה דברים שאני קורא עליהם חסרים לי
    כמו התקנת תוספות/פלאגינים וכו'
    יכול להיות שאני משתמש בגרסה ישנה/שונה של וורדפרס?

  • רמי כותב :

    כן, גרסה ישנה. שדרג את המערכת.

  • ליאור כותב :

    איך בבקשה?

  • ליאור כותב :

    רמי אנא עזרתך…
    אם תוכל לרשום לי בבקשה למייל גם. תודה רבה

  • מיכל כותב :

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

    תודה

  • רמי כותב :

    היי מיכל, כמו שכתוב בפוסט – "יש להוסיף את הקוד הבא לקובץ functions.php בערכת העיצוב שלכם".

  • מיכל כותב :

    כניראה שלא הבנת את שאלתי, הקוד מורכב מ- 1 2 3, היכן להכניס את הקוד למטה ? למעלה ? באמצע ? בין השורה כך וכך ? לא ציינת

  • רמי כותב :

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

  • מיכל כותב :

    תודה רבה, אך אם לא מופיע לי the_content, מצרפת את הקוד של הקובץ

    'Homepage-left',
    'before_widget' => ",
    'after_widget' => ",
    'before_title' => ",
    'after_title' => ",
    ));

    register_sidebar(array(
    'name' => 'Homepage-middle ',
    'before_widget' => ",
    'after_widget' => ",
    'before_title' => ",
    'after_title' => ",
    ));

    register_sidebar(array(
    'name' => 'Homepage-right ',
    'before_widget' => ' ',
    'after_widget' => ",
    'before_title' => ",
    'after_title' => ",
    ));

    /* תבנית מוגנת בזכויות יוצרים. התבנית תורגמה על ידי יוסי ג'אנה */

    /* SIDEBARS */
    if ( function_exists('register_sidebar') )

    register_sidebar(array(
    'name' => 'Sidebar',
    'before_widget' => ",
    'after_widget' => ",
    'before_title' => ",
    'after_title' => ",

    ));

    register_sidebar(array(
    'name' => 'Footer',
    'before_widget' => ",
    'after_widget' => ",
    'before_title' => ",
    'after_title' => ",
    ));

    /* CUSTOM MENUS */

    register_nav_menus( array(
    'primary' => __( 'Primary Navigation', " ),
    ) );

    function fallbackmenu(){ ?>

    גש לפנל ניהול > מראה האתר > תפריטים כדי לנהל אותם. הסתבכת? הסבר לשימוש בתבנית

    <?php }

    /* CUSTOM EXCERPTS */

    function wpe_excerptlength_slide($length) {
    return 25;
    }
    function wpe_excerptlength_index($length) {
    return 70;
    }

    function wpe_excerpt($length_callback='', $more_callback='') {
    global $post;
    if(function_exists($length_callback)){
    add_filter('excerpt_length', $length_callback);
    }
    if(function_exists($more_callback)){
    add_filter('excerpt_more', $more_callback);
    }
    $output = get_the_excerpt();
    $output = apply_filters('wptexturize', $output);
    $output = apply_filters('convert_chars', $output);
    $output = ''.$output.";
    echo $output;
    }

    function new_excerpt_more($more) {
    return 'ID) . '">' . '   קרא עוד …' . '';
    }
    add_filter('excerpt_more', 'new_excerpt_more');

    /* SHORT TITLES */

    function short_title($after = ", $length) {
    $mytitle = explode(' ', get_the_title(), $length);
    if (count($mytitle)>=$length) {
    array_pop($mytitle);
    $mytitle = implode(" ",$mytitle). $after;
    } else {
    $mytitle = implode(" ",$mytitle);
    }
    return $mytitle;
    }

    /* FEATURED THUMBNAILS */

    if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
    add_theme_support( 'post-thumbnails' );

    }

    /* GET THUMBNAIL URL */

    function get_image_url(){
    $image_id = get_post_thumbnail_id();
    $image_url = wp_get_attachment_image_src($image_id,'large');
    $image_url = $image_url[0];
    echo $image_url;
    }

    /* PAGE NAVIGATION */

    function getpagenavi(){
    ?>

  • צבי כותב :

    הפלוס 1 מתאים גם לגוגל סייטס?
    (ידוע לי שקיימת אופמציה להוסיף לחצן פלוס בתפריט סייטס עצמו, אבל אני מעדיף עיצוב שונה)

  • ניר כותב :

    מאמר מצוין.
    ניסיתי ובשניות הרכבתי את הכפתורים בהתאם להנחיותיך.
    האם ניתן להציב את שני הכפתורים זה לצד זה, במקום האחד מתחת לשני?
    ושאלה נוספת – האם ניתן להוסיף גם כפתור "ציוץ" של טוויטר?
    תודה מראש.

  • רמי כותב :

    ניר,
    אפשר להציב אותם אחד ליד השני אבל זה כבר ענייני CSS.
    לעניין טוויטר, אפשר להוסיף כפתור "ציוץ", לא התעמקתי ב-API שלהם.

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

  • ניר כותב :

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

  • טל כותב :

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

  • שימי כותב :

    אני בונה אתר וורדפרס ואני לא מצליח להכניס קוד של גוגל פלוס ושל פייסבוק (זה אתר שנבנה בחינם על מערכת בנית אתרים חינמית של וורד פרס)
    תודה רבה

הוסף תגובה !

נא לא לשאול שאלות שלא קשורות לפוסט, זהו לא פורום תמיכה. לבעיות אישיות ונושאים מורכבים אפשר ליצור איתי קשר.

תגיות HTML מורשות לשימוש:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>