Add Social Media Sharing Buttons to WordPress Easily
How to add social media buttons to wordpress;
Best wordpress plugin for social sharing;
Add social share buttons wordpress;
Wordpress social media sharing plugin;
Customize social share buttons wordpress;
Wordpress add social media icons;
Social media share buttons for wordpress site;
Wordpress social sharing options;
Integrate social media buttons wordpress;
Wordpress social media plugin setup;
Explanation
To add social media sharing buttons to your WordPress site, this code does the trick by using Font Awesome icons. Here's how it works:
- Loading Icons: The code first loads Font Awesome, which provides the icons for the social media buttons.
- Displaying Buttons: It adds buttons for Facebook, Twitter, LinkedIn, and email at the end of each blog post. These buttons allow visitors to share your content easily.
- Styling: The buttons are styled to look neat and have a hover effect that changes their color, making them more interactive.
These buttons will only appear on individual post pages, not on the homepage or archive pages. The links are set to open in a new tab, ensuring users stay on your site while sharing.
Code
<?php
// Function to enqueue necessary styles and scripts for social media buttons
function wp_dudecom_enqueue_social_media_scripts() {
// Enqueue Font Awesome for social media icons
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_social_media_scripts');
// Function to display social media sharing buttons
function wp_dudecom_display_social_share_buttons($content) {
if (is_single()) {
$social_buttons = '<div class="wp-dudecom-social-share">';
$social_buttons .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . get_permalink() . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>';
$social_buttons .= '<a href="https://twitter.com/intent/tweet?url=' . get_permalink() . '&text=' . get_the_title() . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>';
$social_buttons .= '<a href="https://www.linkedin.com/shareArticle?mini=true&url=' . get_permalink() . '&title=' . get_the_title() . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>';
$social_buttons .= '<a href="mailto:?subject=' . get_the_title() . '&body=' . get_permalink() . '" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a>';
$social_buttons .= '</div>';
$content .= $social_buttons;
}
return $content;
}
add_filter('the_content', 'wp_dudecom_display_social_share_buttons');
// Function to add custom styles for social media buttons
function wp_dudecom_social_share_styles() {
echo '<style>
.wp-dudecom-social-share {
margin-top: 20px;
display: flex;
gap: 10px;
}
.wp-dudecom-social-share a {
text-decoration: none;
color: #333;
font-size: 20px;
transition: color 0.3s;
}
.wp-dudecom-social-share a:hover {
color: #0073aa;
}
</style>';
}
add_action('wp_head', 'wp_dudecom_social_share_styles');
?>Instructions
To add social media sharing buttons to your WordPress site, follow these steps:
File Location: Add the code to your theme's functions.php file or a custom plugin file.
Prerequisites: Ensure you have access to your WordPress theme files or a custom plugin where you can add PHP code.
Implementation Steps:
- Access your WordPress Dashboard: Log in to your WordPress admin panel.
- Navigate to Theme Editor: Go to Appearance > Theme Editor. If you prefer using a plugin, navigate to Plugins > Add New and install a plugin like "Code Snippets" to safely add custom code.
- Open functions.php: In the Theme Editor, locate and open the
functions.phpfile from the list on the right. If using a plugin, add a new snippet. - Paste the Code: Copy the provided code and paste it at the end of the
functions.phpfile or in the new snippet. - Save Changes: Click Update File to save your changes. If using a plugin, save the snippet.
- Verify Implementation: Visit a single post on your site to ensure the social media buttons appear at the end of the content.
If you encounter any issues or need further customization, consider reaching out to wp-dude.com for professional assistance with WordPress implementations and advanced functionalities.