Wordpress Social Media Sharing not working

Question

I am trying to add buttons to my site to share a product on social media. I have added the PHP code but when you click on facebook, it takes you to a page witha share button and the URL, but the button doesn't do anything.

I need it to look like the normal facebook sharing interface where you can add a message about it etc.

Please see the pic attached. The website is - https://ffe-dev.flowersforeveryone.co.za/product/sunflower-and-rose-bouquet/ (social media buttons are under the "add to cart" button.

The PHP code is -

global $wp;
$current_url = home_url( add_query_arg( array(), $wp->request ) );

// add action with variabile in url to share
add_action('woocommerce_after_add_to_cart_button','my_social_btn');
function my_social_btn() {
  echo '<div class="my-custom-social">
  <div class = "facebook-icon"> <a href="https://www.facebook.com/sharer/sharer.php?u='.$current_url.'" target="_blank" class="social fb"><i class="fa fa-facebook-f"></i></a> </div>
  <div class = "twitter-icon"> <a href="https://twitter.com/intent/tweet?url='.$current_url.'" target="_blank" class="social tw"><i class="fa fa-twitter"></i></a> </div>
 <div class = "pinterest-icon"><a href="
https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url='.$current_url.'" target="_blank" class="social tw"><i class="fa fa-pinterest"></i></a> </div>

 </div>
';
}

Can someone please tell me what i'm doing wrong. Thanks

Answer 1

add global $wp & $current_url in function. As it is outside function you are not getting value of $current_url to share article.

// add action with variabile in url to share
add_action('woocommerce_after_add_to_cart_button', 'my_social_btn');
function my_social_btn() {
    global $wp;

    $current_url = home_url(add_query_arg(array(), $wp->request));

    echo '<div class="my-custom-social">
  <div class = "facebook-icon"> <a href="https://www.facebook.com/sharer/?u=' . $current_url . '" target="_blank" class="social fb"><i class="fa fa-facebook-f"></i></a> </div>
  <div class = "twitter-icon"> <a href="https://twitter.com/intent/tweet?url=' . $current_url . '" target="_blank" class="social tw"><i class="fa fa-twitter"></i></a> </div>
 <div class = "pinterest-icon"><a href="
https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url=' . $current_url . '" target="_blank" class="social tw"><i class="fa fa-pinterest"></i></a> </div>

 </div>
';
}

Answer 2

add_action('woocommerce_after_add_to_cart_button','my_social_btn');
function my_social_btn() {

global $wp;
$current_url = home_url( add_query_arg( array(), $wp->request ) );

  echo '<div class="my-custom-social">
  <div class = "facebook-icon"> <a 
href="https://www.facebook.com/sharer/sharer.php?u='.$current_url.'" 
target="_blank" class="social fb"><i class="fa fa-facebook-f"></i>hjgj</a> 
</div>
 <div class = "twitter-icon"> <a href="https://twitter.com/intent/tweet?url='.$current_url.'" target="_blank" class="social tw"><i class="fa fa-twitter"> 
</i>ghjg</a> </div>
 <div class = "pinterest-icon"><a href="https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url='.$current_url.'" target="_blank" class="social tw"><i class="fa fa-pinterest"></i>ghj</a> </div>

</div>
';
}

Answer 3

Why not use a plugin like Easy Social Share Buttons for WordPress

https://codecanyon.net/item/easy-social-share-buttons-for-wordpress/6394476

Answer 4

you can use this :

/*
 * Facebook, Twitter , Google+ and Pinterest social share buttons For Woocommerce Product
 *
 */
function my_social_btn() {

    global $post;

    // Get the post's URL that will be shared
    $post_url   = urlencode( esc_url( get_permalink($post->ID) ) );

    // Get the post's title
    $post_title = urlencode( $post->post_title );

    // Compose the share links for Facebook, Twitter and Google+
    $facebook_link    = sprintf( 'https://www.facebook.com/sharer/sharer.php?u=%1$s', $post_url );
    $twitter_link     = sprintf( 'https://twitter.com/intent/tweet?text=%2$s&url=%1$s', $post_url, $post_title );
    $google_plus_link = sprintf( 'https://plus.google.com/share?url=%1$s', $post_url );
    $pinterest_link   = sprintf( 'https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url=%1$s', $post_url );

    // Wrap the buttons
    $output = '<div id="share-buttons">';

        // Add the links inside the wrapper
        $output .= '<a target="_blank" href="' . $facebook_link . '" class="share-button facebook"><i class="fa fa-facebook-f"></i></a>';
        $output .= '<a target="_blank" href="' . $twitter_link . '" class="share-button twitter"><i class="fa fa-twitter"></i></a>';
        $output .= '<a target="_blank" href="' . $google_plus_link . '" class="share-button google-plus"><i class="fa fa-google-plus"></i>+</a>';
        $output .= '<a target="_blank" href="' . $pinterest_link . '" class="share-button pinterest"><i class="fa fa-pinterest"></i></a>';

    $output .= '</div>';

    // Return the buttons and the original content
    echo $output;

}
add_action ('woocommerce_after_add_to_cart_form', 'my_social_btn');