Okay
  Public Ticket #2035805
Share to LinkedIn and Whatsapp
Closed

Comments

  • Daniel started the conversation
    June 4, 2019 at 3:08pm

    Is it possible to add share buttons to events LinkedIn and Whatsapp?

  •  877
    Zhivko replied
    June 9, 2019 at 1:16pm

    It's possible to add additional share buttons via filter add in your theme functions.php file. Example:

    // Style for the linkedin button
    // this css can be inserted in the Custom Style tab of the calendar fonts & colors settings
    add_action('wp_head', function() {
        ?>
        <style>
            .stec-layout-single-share .fa-linkedin {
                background: #4875B4;
            }
            .stec-layout-single-share .fa-linkedin:hover {
                background: #4878DD;
            }
        </style>
        <?php
});
add_filter('stec-share-links', function($links) {
    global $post;
    // Placeholder holder for js event permalink
        $event_permalink = "#stec_replace_event_single_url";
    // Obtain event permalink for single pages
        if ($post && $post->post_type === 'stec_event') {
            $event           = new Stachethemes\Stec\Event_Post(get_the_ID());
            $event_permalink = $event->get_permalink(get_query_var('stec_repeat_offset'));
        }
    // LinkedIn Share URL
        $share_href = "https://www.linkedin.com/shareArticle?mini=true&url=" . $event_permalink;
    // Insert linkedin to the share buttons
        $links['linkedin'] = '<a target="_BLANK" href="' . $share_href . '"><i class="fab fa-linkedin"></i></a>';
    // Return share links
        return $links;
    });

    Stachethemes Developer

  • Daniel replied
    July 2, 2019 at 3:38pm

    Hello, I have added the code snippet but my button is white... What should I do?


  •  877
    Zhivko replied
    July 4, 2019 at 1:13pm

    Whatsapp has been added in the newest version by default.

    For linkedin try adding this additional css:

    .stec-layout-event-inner-intro-share .fa-linkedin {
        background: #4875B4;
    }
    .stec-layout-event-inner-intro-share .fa-linkedin:hover {
        background: #4878DD;
    }

    Stachethemes Developer

  • Daniel replied
    July 5, 2019 at 1:32am

    I tried and still having trouble. The PHP you sent has css in it, should i remove those lines? If so, what would the code be for the functions.php?


    Heres the code you sent:


    // Style for the linkedin button
// this css can be inserted in the Custom Style tab of the calendar fonts & colors settings
add_action('wp_head', function() {
    ?>
    <style>
        .stec-layout-single-share .fa-linkedin {
            background: #4875B4;
        }
        .stec-layout-single-share .fa-linkedin:hover {
            background: #4878DD;
        }
    </style>
    <?php
});
add_filter('stec-share-links', function($links) {
    global $post;
    // Placeholder holder for js event permalink
    $event_permalink = "#stec_replace_event_single_url";
    // Obtain event permalink for single pages
    if ($post && $post->post_type === 'stec_event') {
        $event           = new Stachethemes\Stec\Event_Post(get_the_ID());
        $event_permalink = $event->get_permalink(get_query_var('stec_repeat_offset'));
    }
    // LinkedIn Share URL
    $share_href = "https://www.linkedin.com/shareArticle?mini=true&url=" . $event_permalink;
    // Insert linkedin to the share buttons
    $links['linkedin'] = '<a target="_BLANK" href="' . $share_href . '"><i class="fab fa-linkedin"></i></a>';
    // Return share links
    return $links;
});


  •  877
    Zhivko replied
    July 5, 2019 at 5:00pm

    Remove everything I've sent you earlier and place this code in functions.php at the bottom:

    add_action('wp_head', function() {
        ?>
        <style>
            .stec-layout-event-inner-intro-share .fa-linkedin,
            .stec-layout-single-share .fa-linkedin { background: #4875B4;}
            .stec-layout-event-inner-intro-share .fa-linkedin:hover,
            .stec-layout-single-share .fa-linkedin:hover { background: #4878DD;}
        </style>
        <?php
});
    add_filter('stec-share-links', function($links, $link) {
        $links['linkedin'] = '<a target="_BLANK" href="//linkedin.com/shareArticle?mini=true&url=' . $link . '"><i class="fab fa-linkedin"></i></a>';
        return $links;
    }, 10, 2);

    Stachethemes Developer

  • Daniel replied
    July 22, 2019 at 3:24pm

    Ok, works great.

    How can I hide Viber? And is it possible to place LinkedIn after twitter?

  •  877
    Zhivko replied
    July 25, 2019 at 8:47am

    Replace:

    add_filter('stec-share-links', function($links, $link) {
    $links['linkedin'] = '<a target="_BLANK" href="//linkedin.com/shareArticle?mini=true&url=' . $link . '"><i class="fab fa-linkedin"></i></a>';
    return $links;
}, 10, 2);


    with:


    add_filter('stec-share-links', function($links, $link) {
        $links['viber'] = null;
        $index = array_search("twitter", array_keys($links));
        array_splice($links, $index + 1, 0, '<a target="_BLANK" href="//linkedin.com/shareArticle?mini=true&url=' . $link . '"><i class="fab fa-linkedin"></i></a>');
        return $links;
    }, 10, 2);

    Stachethemes Developer