Jetpack is an amazing plugin with many useful features. This post covers how to add and style simple social sharing buttons in WordPress using Jetpack.

Add and Style Sharing Buttons in WordPress Using Jetpack

Installing Jetpack

Install the Jetpack plugin and activate it if you have not.

Install Jetpack

Go to Jetpack – Settings, and enable that feature.

Enable Sharing

Now, go to Settings – Sharing to add the social media buttons that you want. Please choose the “text only” option.

Jetpack Sharing Settings

The buttons should now appear under your blog posts.

Styling

To delete the grey divider line, please add this to your custom css:

div.sharedaddy h3.sd-title:before {
border-top: none;
}

If the sharing buttons are too close to your last sentence in your blog post, you can add some space between it; adjust the number in bold according to your needs:

div.sharedaddy {
margin-top: 15px;
}

To align the buttons and title to the center:

div.sharedaddy {
text-align: center !important;
}

Because your theme might already have your H3 styled nicely, we would tell Jetpack to use what our theme has instead; adjust the number in bold according to your needs:

div.sharedaddy h3.sd-title {
font-size: inherit;
font-weight: 600;
}

This is a code to change your buttons into simple rectangles and adjust the colour, size etc.; you can adjust the numbers according to your needs:

.sd-social-text .sd-content ul li a.sd-button {
border-radius: 0;
color: #fff !important;
background: #ffbeb5 !important;
padding: 5px 35px !important;
font-size: 16px;
font-weight: 600;
box-shadow: none;
border: 0;
}

This code will let you change how the buttons look like when you hover over them:

.sd-social-text .sd-content ul li a.sd-button:hover {
background: #eee !important;
border: 0 !important;
color: #000 !important;
box-shadow: none;
}

These are all that I used, and I’m quite satisfied with what I have.

Jetpack Buttons Examples

If you’re interested, this is the code that I’m using right now for this blog:

div.sharedaddy {
text-align: center !important;
margin-top: 15px;
}

div.sharedaddy h3.sd-title:before {
    border-top: none;
}
div.sharedaddy h3.sd-title {
    font-size: inherit;
    font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}

.sd-social-text .sd-content ul li a.sd-button {
border-radius: 0;
color: #fff !important;
background: #ffbeb5 !important;
padding: 5px 35px !important;
font-size: 16px;
font-weight: 600;
box-shadow: none;
border: 0;
}

.sd-social-text .sd-content ul li a.sd-button:hover {
background: #eee !important;
border: 0 !important;
color: #000 !important;
box-shadow: none;
}

Hope this helps!