Add Social Sharing buttons in WordPress & WooCommerce
In today’s digital age, sharing content on social media is a crucial part of driving traffic and engaging with your audience. Adding social sharing buttons to your WordPress website can make it easier for visitors to share your content with their networks. In this step-by-step guide, we will walk you through the process of adding social media sharing icons to your WordPress site using a custom code snippet.
Steps to add Social Sharing buttons in wordpress without plugin
- Take a full backup of your website or atleast of functions.php file.
- If you are not comfortable editing functions.php file then install this free plugin and add the snippet by using a single plugin.
- Use a child theme to make customizations. If you have not yet created the child theme then go to this article to create one (without plugin). Or Use this free plugin to create a child theme (you can delete the plugin after creating child theme, but do not delete the parent theme).
Video Tutorial [Hindi Language]
Step 1: Access functions.php file
Click on the Appearance > Theme File Edito > Theme Functions (functions.php).
Step 2: Add below code at the end of functions.php file.
Click on ‘Copy Code‘ button to copy the code and then paste it into the functions.php file.
// Add Social Media Sharing Icons in wordpress and woocommerce
function enqueue_font_awesome() {
echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">';
}
add_action('wp_head', 'enqueue_font_awesome');
add_action('admin_head', 'enqueue_font_awesome');
function wpamit_add_social_sharing_buttons($content) {
$enable_mobile_sharing = get_option('enable_mobile_sharing', true);
$is_mobile = wp_is_mobile();
if ($is_mobile) {
$placement = get_option('social_sharing_placement_mobile', 'sticky_bottom_right');
$icon_size = get_option('mobile_icon_size', '30');
} else {
$placement = get_option('social_sharing_placement_desktop', 'sticky_bottom_right');
$icon_size = get_option('desktop_icon_size', '30');
}
if (is_single() && ($enable_mobile_sharing || !$is_mobile)) {
$post_url = urlencode(get_permalink());
$post_title = urlencode(get_the_title());
$social_buttons = '<div class="social-sharing ' . esc_attr($placement) . '" style="z-index:999; align-items:center;">';
if (get_option('facebook_enabled', true)) {
$social_buttons .= '<a href="' . esc_url("https://www.facebook.com/sharer/sharer.php?u=$post_url") . '" target="_blank" rel="nofollow" style="margin:5px; height:' . esc_attr($icon_size) . 'px;">' .
'<i class="fab fa-facebook" style="font-size: ' . esc_attr($icon_size) . 'px; color: #1778f2;"></i>' .
'</a>';
}
if (get_option('twitter_enabled', true)) {
$social_buttons .= '<a href="' . esc_url("https://twitter.com/intent/tweet?url=$post_url&text=$post_title") . '" target="_blank" rel="nofollow" style="margin:5px; height:' . esc_attr($twitter_size) . 'px;">' .
'<i class="fab fa-twitter" style="font-size: ' . esc_attr($icon_size) . 'px; color: #1da1f2;"></i>' .
'</a>';
}
if (get_option('instagram_enabled', true)) {
$social_buttons .= '<a href="' . esc_url("https://www.instagram.com/?url=$post_url") . '" target="_blank" rel="nofollow" style="margin:5px; height:' . esc_attr($instagram_size) . 'px;">' .
'<i class="fab fa-instagram" style="font-size: ' . esc_attr($icon_size) . 'px; color: #E1306C;"></i>' .
'</a>';
}
if (get_option('whatsapp_enabled', true)) {
$social_buttons .= '<a href="' . esc_url("https://wa.me/?text=$post_title%20$post_url") . '" target="_blank" rel="nofollow" style="margin:5px; height:' . esc_attr($whatsapp_size) . 'px;">' .
'<i class="fab fa-whatsapp" style="font-size: ' . esc_attr($icon_size) . 'px; color: #4dc247;"></i>' .
'</a>';
}
if (get_option('linkedin_enabled', true)) {
$social_buttons .= '<a href="' . esc_url("https://www.linkedin.com/shareArticle?url=$post_url&title=$post_title") . '" target="_blank" rel="nofollow" style="margin:5px; height:' . esc_attr($linkedin_size) . 'px;">' .
'<i class="fab fa-linkedin" style="font-size: ' . esc_attr($icon_size) . 'px; color: #0d66c2;"></i>' .
'</a>';
}
if (get_option('pinterest_enabled', true)) {
$social_buttons .= '<a href="' . esc_url("https://pinterest.com/pin/create/button/?url=$post_url&media=" . urlencode(get_the_post_thumbnail_url()) . "&description=$post_title") . '" target="_blank" rel="nofollow" style="margin:5px; height:' . esc_attr($pinterest_size) . 'px;">' .
'<i class="fab fa-pinterest" style="font-size: ' . esc_attr($icon_size) . 'px; color: #e60122;"></i>' .
'</a>';
}
$social_buttons .= '</div>';
$content = $social_buttons . $content;
}
return $content;
}
add_filter('the_content', 'wpamit_add_social_sharing_buttons');
function add_social_sharing_menu() {
add_menu_page(
'Social Sharing Settings',
'Social Sharing',
'manage_options',
'social-sharing-settings',
'social_sharing_settings_page',
'dashicons-share',
30
);
}
add_action('admin_menu', 'add_social_sharing_menu');
function social_sharing_settings_page() {
?>
<div class="wrap">
<h2>Social Sharing Settings</h2>
<form method="post" action="options.php">
<?php settings_fields('social-sharing-settings-group'); ?>
<?php do_settings_sections('social-sharing-settings-group'); ?>
<table class="form-table">
<tr>
<th scope="col">Social Media</th>
<th scope="col">Enable/Disable</th>
</tr>
<?php
$social_media = [
'facebook' => ['name' => 'Facebook', 'icon' => 'fab fa-facebook',],
'twitter' => ['name' => 'Twitter', 'icon' => 'fab fa-twitter'],
'instagram' => ['name' => 'Instagram', 'icon' => 'fab fa-instagram'],
'whatsapp' => ['name' => 'WhatsApp', 'icon' => 'fab fa-whatsapp'],
'linkedin' => ['name' => 'LinkedIn', 'icon' => 'fab fa-linkedin'],
'pinterest' => ['name' => 'Pinterest', 'icon' => 'fab fa-pinterest'],
];
foreach ($social_media as $key => $data) :
?>
<tr>
<td>
<i class="<?php echo esc_attr($data['icon']); ?>"></i> <?php echo esc_html($data['name']); ?>
</td>
<td>
<label>
<input type="checkbox" name="<?php echo esc_attr($key . '_enabled'); ?>" <?php checked(get_option($key . '_enabled'), 'on'); ?> />
Enable
</label>
</td>
</tr>
<?php endforeach; ?>
<tr>
<th scope="row">Icon Sizes (in pixels)</th>
<td>
<div class="icon-size-fields">
<div class="icon-size-field">
<label for="desktop_icon_size">Desktop Size:</label>
<input type="text" id="desktop_icon_size" name="desktop_icon_size" value="<?php echo esc_attr(get_option('desktop_icon_size', '')); ?>" placeholder="Desktop Size" />
</div>
<div class="icon-size-field">
<label for="mobile_icon_size">Mobile Size:</label>
<input type="text" id="mobile_icon_size" name="mobile_icon_size" value="<?php echo esc_attr(get_option('mobile_icon_size', '')); ?>" placeholder="Mobile Size" />
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Desktop Placement</th>
<td>
<select name="social_sharing_placement_desktop">
<option value="sticky_right" <?php selected(get_option('social_sharing_placement_desktop'), 'sticky_right'); ?>>Sticky Right</option>
<option value="sticky_left" <?php selected(get_option('social_sharing_placement_desktop'), 'sticky_left'); ?>>Sticky Left</option>
<option value="sticky_bottom" <?php selected(get_option('social_sharing_placement_desktop'), 'sticky_bottom'); ?>>Sticky Bottom</option>
<option value="sticky_bottom_left" <?php selected(get_option('social_sharing_placement_desktop'), 'sticky_bottom_left'); ?>>Sticky Bottom Left</option>
<option value="sticky_bottom_right" <?php selected(get_option('social_sharing_placement_desktop'), 'sticky_bottom_right'); ?>>Sticky Bottom Right</option>
<option value="with_content" <?php selected(get_option('social_sharing_placement_desktop'), 'with_content'); ?>>With Content</option>
</select>
</td>
</tr>
<tr>
<th scope="row">Mobile Placement</th>
<td>
<select name="social_sharing_placement_mobile">
<option value="sticky_right" <?php selected(get_option('social_sharing_placement_mobile'), 'sticky_right'); ?>>Sticky Right</option>
<option value="sticky_left" <?php selected(get_option('social_sharing_placement_mobile'), 'sticky_left'); ?>>Sticky Left</option>
<option value="sticky_bottom" <?php selected(get_option('social_sharing_placement_mobile'), 'sticky_bottom'); ?>>Sticky Bottom</option>
<option value="sticky_bottom_left" <?php selected(get_option('social_sharing_placement_mobile'), 'sticky_bottom_left'); ?>>Sticky Bottom Left</option>
<option value="sticky_bottom_right" <?php selected(get_option('social_sharing_placement_mobile'), 'sticky_bottom_right'); ?>>Sticky Bottom Right</option>
<option value="with_content" <?php selected(get_option('social_sharing_placement_mobile'), 'with_content'); ?>>With Content</option>
</select>
</td>
</tr>
<tr>
<th scope="row">Enable Sharing Icons on Mobile</th>
<td>
<input type="checkbox" name="enable_mobile_sharing" <?php checked(get_option('enable_mobile_sharing'), 'on'); ?> />
</td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<style>
.icon-size-fields {
display: flex;
flex-direction: column;
}
.icon-size-field {
margin-bottom: 10px;
}
.icon-size-field label {
display: block;
}
@media (min-width: 768px) {
.form-table {
width: 30%;
}
.wrap {
margin: 30px 20px 0px 30px;
}
}
@media (max-width: 768px) {
.wrap {
margin-left:15px;
}
}
</style>
<?php
}
// Register and initialize settings
function social_sharing_settings_init() {
$settings = [
'desktop_icon_size',
'mobile_icon_size',
'social_sharing_placement_desktop',
'social_sharing_placement_mobile',
'enable_mobile_sharing',
'facebook_enabled',
'twitter_enabled',
'instagram_enabled',
'whatsapp_enabled',
'linkedin_enabled',
'pinterest_enabled',
];
foreach ($settings as $setting) {
register_setting('social-sharing-settings-group', $setting);
}
}
add_action('admin_init', 'social_sharing_settings_init');
function add_social_sharing_placement_styles() {
$enable_mobile_sharing = get_option('enable_mobile_sharing', true);
$is_mobile = wp_is_mobile();
if ($is_mobile) {
$placement = get_option('social_sharing_placement_mobile', 'sticky_left');
} else {
$placement = get_option('social_sharing_placement_desktop', 'sticky_left');
}
$styles = '';
switch ($placement) {
case 'sticky_right':
$styles .= '
.social-sharing.sticky_right {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end;
background: #fff;
margin: 10px;
padding: 5px 8px;
box-shadow: 0px 2px 5px 0px rgba(213,217,217,.5);
}';
break;
case 'sticky_left':
$styles .= '
.social-sharing.sticky_left {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fff;
margin: 10px;
padding: 5px 8px;
box-shadow: 0px 2px 5px 0px rgba(213,217,217,.5);
}';
break;
case 'sticky_bottom':
$styles .= '
.social-sharing.sticky_bottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
justify-content: center;
align-items: center;
background: #fff;
margin: 10px;
padding: 5px 8px;
box-shadow: 0px 2px 5px 0px rgba(213,217,217,.5);
}';
break;
case 'sticky_bottom_left':
$styles .= '
.social-sharing.sticky_bottom_left {
position: fixed;
bottom: 0;
left: 0;
transform: translateY(0%);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
background: #fff;
margin: 10px;
padding: 5px 8px;
box-shadow: 0px 2px 5px 0px rgba(213,217,217,.5);
}';
break;
case 'sticky_bottom_right':
$styles .= '
.social-sharing.sticky_bottom_right {
position: fixed;
bottom: 0;
right: 0;
transform: translateY(0%);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
background: #fff;
margin: 10px;
padding: 5px 8px;
box-shadow: 0px 2px 5px 0px rgba(213,217,217,.5);
}';
break;
case 'with_content':
$styles .= '
.social-sharing.with_content {
display: inline-flex;
justify-content: center;
align-items: center;
}';
break;
}
echo '<style>' . $styles . '</style>';
}
add_action('wp_head', 'add_social_sharing_placement_styles');
add_action('admin_post_save_social_sharing_settings', 'save_social_sharing_settings');
function save_social_sharing_settings() {
if (!current_user_can('manage_options')) {
return;
}
if (!isset($_POST['social_sharing_nonce']) || !wp_verify_nonce($_POST['social_sharing_nonce'], 'social_sharing_settings_nonce')) {
return;
}
$options = [
'facebook_enabled' => 'intval',
'facebook_size' => 'sanitize_text_field',
'twitter_enabled' => 'intval',
'twitter_size' => 'sanitize_text_field',
'instagram_enabled' => 'intval',
'instagram_size' => 'sanitize_text_field',
'whatsapp_enabled' => 'intval',
'whatsapp_size' => 'sanitize_text_field',
'pinterest_enabled' => 'intval',
'pinterest_size' => 'sanitize_text_field',
'social_sharing_placement_desktop' => 'sanitize_text_field',
'social_sharing_placement_mobile' => 'sanitize_text_field',
'enable_mobile_sharing' => 'intval',
];
foreach ($options as $option_name => $sanitize_callback) {
if (isset($_POST[$option_name])) {
$option_value = call_user_func($sanitize_callback, $_POST[$option_name]);
update_option($option_name, $option_value);
} else {
}
}
wp_redirect(admin_url('admin.php?page=social-sharing-settings&status=success'));
exit;
}Edit in the code: If you want to place the social media icons on both before and after content then change the line $content = $social_buttons . $content; to $content = $social_buttons . $content . $social_buttons;
If you want to place the social media icons before content then change line to $content = $social_buttons . $content;
To display social media after content then change line to $content = $content . $social_buttons;
Lets understand the Code
Code Overview:
- Enqueue Font Awesome: This function adds the Font Awesome stylesheet to your WordPress theme, granting access to a vast collection of social media icons.
- Add Social Sharing Buttons: This function dynamically injects social sharing buttons to your WordPress posts. It takes into account user-defined settings, device type, and post-specific information.
- Create a Social Sharing Settings Page: To empower users with customization options, a settings page is added to the WordPress admin panel menu with the name ‘Social Sharing‘. It offers control over enabling/disabling sharing on specific social platforms, adjusting icon sizes, and choosing icons placements.
- Social Sharing Settings Page Content: This section defines the structure of the settings page. It’s where users can configure their sharing preferences.
- Register and Initialize Settings: To store and retrieve social sharing settings, this function registers and initializes the options, making them accessible in the admin panel.
- Add CSS Styles for Placement Options: Custom CSS styles are included in the code to ensure the icons appear correctly in the chosen positions.
Utilizing the Added Functionalities in the WordPress Admin Area
The code provided adds several essential functionalities to the WordPress admin area, allowing you to configure and control social media sharing options. Here’s a step-by-step guide on how to make the most of these added features:
Accessing Social Sharing Settings:
- Log in to your WordPress admin panel.
- In the left-hand menu, you will now find a “Social Sharing” option. Click on it to access the social sharing settings.
Understand and Configuring Social sharing settings:
Above is an annotated screenshot of the ‘Social Sharing Settings’ page in your WordPress admin area. Each numbered section corresponds to a specific aspect of configuring social media sharing on your website. Let’s walk through each of these sections for a detailed understanding of how to customize your social sharing options:
1) Social Media List: Inside the “Social Sharing Settings” page, you’ll find a list of social media platforms, such as Facebook, Twitter, Instagram, WhatsApp, LinkedIn, and Pinterest.
2) Enabling or Disabling Platforms: For each social media platform, you can enable or disable sharing by ticking or unticking the respective checkbox. To allow sharing on a platform, check the box; to disable it, leave the box unchecked.
3) Customizing Icon Sizes: You can adjust the size of the social sharing icons for both desktop and mobile devices. Find the input fields labeled “Desktop Size” and “Mobile Size” under the “Icon Sizes (in pixels)” section. Enter the desired icon size in pixels for each platform. This allows you to have consistent or varying icon sizes based on device type.
4) Choosing Button Placement: Determine where the social sharing icons should appear on your website. There are various placement options available for both desktop and mobile devices, such as “Sticky Right,” “Sticky Left,” “Sticky Bottom,” and others. Use the dropdown menus labeled “Desktop Placement” and “Mobile Placement” to select your preferred placement for each device type.
5) Enabling Mobile Sharing Icons: Decide whether you want to enable sharing icons on mobile devices. If you wish to enable mobile sharing, check the box labeled “Enable Sharing Icons on Mobile.” If you prefer not to display sharing icons on mobile, leave this box unchecked.
6) Saving Your Configuration: After making changes to your social sharing settings, scroll down to the bottom of the page. Click the “Save Changes” button to save your configuration.
By following these steps, you can effectively manage and customize the social media sharing options on your WordPress website. This allows you to tailor the sharing experience to match your site’s design and audience preferences, ultimately enhancing your content’s reach and engagement.
Once you’ve integrated this code and customized the settings according to your preferences, users visiting your WordPress site will have easy access to social media sharing buttons. These buttons will encourage them to share your valuable content with their networks, helping you expand your online reach and engagement.