WooCommerce: Social Media Button Integration on the Product Page

Social share buttons in online shops are becoming increasingly more important. A simple tweet in the vein of “I just bought …” can be the best product marketing you can have. This guide will show you how to incorporate Twitter, Google Plus, Facebook and other buttons in your WooCommerce online shop.

This post focuses on solutions to complement the product pages of your shop with simple means, for example plugins. A privacy-compliant version is also included.

Important: Ideally, you should incorporate the sharing buttons yourself to be able to check the result, and forego some external app, which might put unnecessary load on the performance of WordPress. The solutions below may be an alternative for a quick result – or if you don’t have the necessary know-how.

Integration of Sharing Plugins via Shortcode

There are various plugins for WordPress that will do the social media integration for you. If you want the buttons to show on the product pages of WooCommerce, you will need a solution that can be integrated via shortcode or a similar function. Only then will you be able to decide its exact placement on the page.

One example is the Social Sharing Toolkit. It offers some pretty sophisticated options:

  • Integration via shortcode [social_share/] or via some predefined anchors. (The plugin can now work directly with WooCommerce.)
  • Various design options for buttons (with or without counter, size of the button, etc.).
  • Various sizes for post/product image sharing.
  • The CSS output can be adjusted in the admin area.
  • Social-Links can be set as rel="nofollow" (see here).
  • Xing button available.
  • …. and much more.

The result will look something like this:

The buttons from the Social Sharing Toolkit
The buttons from the Social Sharing Toolkit

Tip: Just like with any solution based on the standard buttons of social networks, the appearance of the various buttons is not really standard. On the other hand, the click rate for the “ugly” designs provided is often better than for attractive buttons you design yourself. In any case, you should test both alternatives.

This post will tell you how to integrate the shortcode of the Social Sharing Toolkit – or any other plugin – in WooCommerce.

Jetpack Social Share

The popular add-on Jetpack for WordPress comes with an integrated social sharing function that can be displayed directly on WooCommerce product pages. For those, who don’t want to install the quite large Jetpack, the plugin Jetpack (JP) Sharing may be a better option – it only contains the social media module.

It offers, however, not a very user-friendly approach. The user must first click a pretty much nondescript “Share” button, before the actual social media buttons are offered:

The Jetpack Sharing buttons
The Jetpack Sharing buttons

The basic plugin also doesn’t allow individual placement – the button appears below the detailed product description. The text for “Recommend Product” (see screenshot above), can at least be customized. You should keep a close eye on whether your customers actually notice and use the function.

The advantage of this solution: It allows the integration of smaller, or German language social networks and other services by simply adding buttons and icons you define yourself.

Special WooCommerce Plugins

The WooCommerce Facebook Like Share Button is a solution designed specifically for the popular shopping add-on. However, it only supports Facebook. Other networks are integrated in a paid premium plugin (WooCommerce Social Buttons PRO, but we have not tested it ourselves).

For those of you, who only want to address a Facebook target group, “WooCommerce Facebook Like Share Button” may be a good choice, but in that case, a manual integration would be advisable, even if the Facebook button of the plugin is customizable.

Integration of the “WooCommerce Facebook Like Share Button”

Important: Anyone, who is interested in the paid plugin should first put the free version through its paces. There seem to be problems with some individual WooCommerce themes in terms of the correct display or applying some of the configurable button features.

Other add-ons for WooCommerce, which should make an interlinking with social networks easier, include:

Privacy-compliant social media buttons

The standard buttons of Twitter, Facebook, Google Plus, etc. transmit a whole host of user information to the relevant companies to e.g. create personalized advertising. That is why they are becoming increasingly controversial in terms of data protection.

“When the “Share” button is loading, it already transmits personal data, like the IP address or locally stored cookies to the social media service. That happens even if the website visitor doesn’t even have an account with Facebook, Google, or Twitter, or doesn’t want to use the “Share” function at all“, writes heise.de in this post.

An alternative are the so-called two-click solutions, like the WordPress plugin 2 Click Social Media Buttons (find out more about the background from the developer here).

The individual social buttons are only loaded once the user has clicked them once. One click to load, and one to share – which is why it is called a “two click solution”. “2 Click Social Media Buttons” can be very easily integrated into the description of a WooCommerce product via shortcode [twoclick_buttons], allowing you to decide exactly where you want to place it. An automatic integration is also available: simply deactivate the option “Do not display in custom post type product”.

The result:

The “2-Click Social Media Buttons” are only activated after being clicked once

Heise.de has also published a new privacy-compliant solution by the name of Shariff; you can read all about it here. It works with a single click, offers some noticeable buttons, but is not as easy to install as a WordPress plugin.

Tip: Two still fairly new add-ons for WordPress that are based on Shariff are available here and here. Their download numbers are still pretty low, which means it is advisable to keep an eye on things to see which one becomes more popular, or is being maintained regularly.

WooCommerce Themes with Integrated Sharing Function

Some WooCommerce themes come with their own sharing buttons, just like the theme Hamburg shown in the image for this post. The advantage: The buttons are integrated seamlessly in the design in most cases. When choosing a theme, you should, however, make sure that the buttons can be manipulated, or that new ones can be added.

More approaches for the integration of the sharing function can be found in this forum post on wordpress.org.

Do you know a different approach to integrating the buttons in a WooCommerce or WordPress shop? Do your customers really use the recommend function? We look forward to your feedback in the comments section.

Post Sharing

Author Avatar

Editor at MarketPress. Passionate blogger, corporate blog expert and book author (e.g. "Blog Boosting"). Co-organizer of WP Camp Berlin.

Also Interesting

New Plugin: Slack Connector - Connect WordPress, WooCommerce and Slack

by Michael Firnkes

Initially we merely wanted to optimize our own Slack-processes. With automated notifications from our MarkettPress shop, the blog and our forums. The resul ...

Read more

Role Based Prices for WooCommerce is available again: Different prices for different customer groups

by Michael Firnkes

You want different prices for different customers and users of your online shop? E.g. for subscribers or wholesaler? Or do you need bulk prices? A lot of o ...

Read more

WooCommerce Weekly Review #7: Woo vs Magento, shop security and customer confidence

by Michael Firnkes

What is a WooCommerce shop in practice? And how do you protect it against external attacks? This and more in our Weekly Review. WooCommerce vs Magento: ...

Read more

WooCommerce Weekly Review #6: Translations, WordCamp Switzerland & avoiding legal warnings

by Michael Firnkes

WooCommerce was a hot topic at WordCamp in Switzerland. Progress is being made with the system translations and there are lots of useful new extensions. Th ...

Read more