To add share buttons to Divi blog posts, you can use the the_content filter hook along with the add_filter() function. Within the filter callback function, you can generate the HTML markup for the share buttons using the appropriate social media sharing URLs.
Here’s an example code snippet that adds share buttons for Facebook, Twitter, and LinkedIn to Divi blog posts:
function wpsnippets_add_share_buttons( $content ) {
// Check if we are on a single blog post
if ( is_single() ) {
// Get the current post URL
$post_url = urlencode( get_permalink() );
// Generate the share button HTML markup
$share_buttons = '
<div class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=' . $post_url . '" target="_blank" rel="nofollow">
Share on Facebook
</a>
<a href="https://twitter.com/intent/tweet?url=' . $post_url . '" target="_blank" rel="nofollow">
Share on Twitter
</a>
<a href="https://www.linkedin.com/shareArticle?url=' . $post_url . '" target="_blank" rel="nofollow">
Share on LinkedIn
</a>
</div>
';
// Append the share buttons to the post content
$content .= $share_buttons;
}
return $content;
}
add_filter( 'the_content', 'wpsnippets_add_share_buttons' );
You can add this code to your theme’s functions.php file or in a custom plugin. The wpsnippets_add_share_buttons function checks if the current page is a single blog post using the is_single() function. If it is, it generates the HTML markup for the share buttons, including the post URL as a parameter in the social media sharing URLs. Finally, it appends the share buttons to the post content using the .= concatenation operator.
Feel free to modify the HTML markup and add more social media sharing options as needed.
Examples
Example 1: Adding Share Buttons to Divi Blog Posts
This use case demonstrates how to add share buttons to Divi blog posts using custom code. The code example below adds share buttons to the bottom of each blog post using the the_content filter hook.
function wpsnippets_add_share_buttons( $content ) {
if ( is_singular( 'post' ) ) {
$share_buttons = '<div class="share-buttons">';
// Add Facebook share button
$share_buttons .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . get_permalink() . '" target="_blank" rel="nofollow"><i class="fab fa-facebook"></i></a>';
// Add Twitter share button
$share_buttons .= '<a href="https://twitter.com/intent/tweet?url=' . get_permalink() . '&text=' . get_the_title() . '" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a>';
// Add LinkedIn share button
$share_buttons .= '<a href="https://www.linkedin.com/shareArticle?url=' . get_permalink() . '&title=' . get_the_title() . '" target="_blank" rel="nofollow"><i class="fab fa-linkedin"></i></a>';
$share_buttons .= '</div>';
$content .= $share_buttons;
}
return $content;
}
add_filter( 'the_content', 'wpsnippets_add_share_buttons' );
The code above adds share buttons to the bottom of each blog post by hooking into the the_content filter. It checks if the current post is a singular post and then generates HTML markup for Facebook, Twitter, and LinkedIn share buttons. The generated share buttons are appended to the post content using the $content parameter.
Example 2: Customizing Share Button Styles
This use case demonstrates how to customize the styles of the share buttons added to Divi blog posts. The code example below modifies the CSS classes and styles of the share buttons.
function wpsnippets_customize_share_button_styles() {
echo '<style>
.share-buttons {
display: flex;
justify-content: center;
margin-top: 20px;
}
.share-buttons a {
display: inline-block;
margin-right: 10px;
color: #ffffff;
background-color: #333333;
padding: 10px;
border-radius: 5px;
text-decoration: none;
}
.share-buttons a:hover {
background-color: #555555;
}
</style>';
}
add_action( 'wp_head', 'wpsnippets_customize_share_button_styles' );
The code above adds custom CSS styles for the share buttons. It uses the wp_head action hook to output the styles within the <head> section of the page. The styles target the .share-buttons container, the individual share button links, and the hover state of the buttons.
Example 3: Adding Share Buttons to Custom Post Types
This use case demonstrates how to add share buttons to custom post types in Divi. The code example below extends the previous code to include share buttons for a custom post type called “portfolio”.
function wpsnippets_add_share_buttons_to_portfolio( $content ) {
if ( is_singular( 'portfolio' ) ) {
$share_buttons = '<div class="share-buttons">';
// Add Facebook share button
$share_buttons .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . get_permalink() . '" target="_blank" rel="nofollow"><i class="fab fa-facebook"></i></a>';
// Add Twitter share button
$share_buttons .= '<a href="https://twitter.com/intent/tweet?url=' . get_permalink() . '&text=' . get_the_title() . '" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a>';
// Add LinkedIn share button
$share_buttons .= '<a href="https://www.linkedin.com/shareArticle?url=' . get_permalink() . '&title=' . get_the_title() . '" target="_blank" rel="nofollow"><i class="fab fa-linkedin"></i></a>';
$share_buttons .= '</div>';
$content .= $share_buttons;
}
return $content;
}
add_filter( 'the_content', 'wpsnippets_add_share_buttons_to_portfolio' );
The code above extends the previous code by adding share buttons to the custom post type “portfolio”. It uses the is_singular() function to check if the current post is of the “portfolio” post type. If it is, the share buttons are added to the post content as before.