Add Social Sharing Buttons to Top of Post as Well as Bottom of Post

[jeremiahzac]

Hi Folks,

I’m so glad to have discovered the code for adding social media sharing buttons to my blog posts. As of right now, I have this code pasted into my functions.php file of my child theme:

function x_add_social_sharing() {
if ( is_single() ) {
echo do_shortcode(’[x_share title=“Share this Post” facebook=“true” twitter=“true” google_plus=“true” linkedin=“true” pinterest=“true” reddit=“true” email=“true”]’);
}
}
add_action(‘x_before_the_content_end’, ‘x_add_social_sharing’);

And the bottom of my blog post looks like this:

Is there a way to also have the social share buttons appear at the top of the blog post just before the main content, somewhere around here:

I imagine it’s just a variation of the code I already have in my functions.php file.

I appreciate it much!!

Jeremy

[friech]

Hi Jeremy,

Thank you for writing in, yes you’re right you can use a variation of that PHP code.

e.g.

/*add social share buttons before posts content*/
function x_prepend_social_sharing() {
if ( is_single() ) {
echo do_shortcode('[x_share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"]');
}
}
add_action('x_before_the_content_begin', 'x_prepend_social_sharing');

More details about Actions and Filters here.

Hope it helps,
Cheers!

[jeremiahzac]

Thanks, it worked wonderfully!

And thanks for the quick reply!

Jeremy

[ruenel]

Hey Jeremy,

You’re most welcome!
It’s good to know that @Friech were able to help you out.

Cheers.

[jeremiahzac]

I have one more question if you don’t mind.

Do you know of any custom CSS that could reduce this space between the social sharing buttons and the top of the main content:

Thanks again

[friech]

Hi Jeremy,

To reduce that space, please add this to Theme Option > CSS

.single-post .x-entry-share,
.single-post .entry-content {
	margin-bottom: 0;
	margin-top: 0;
}

Now the remaining space is the first section’s top padding.

• 

Please edit your posts and adjust the top padding of the first section accordingly.

Hope it helps,
Cheers!

[jeremiahzac]

Thank you. Is there a custom CSS that will adjust the top padding across all blog posts globally?

[rad]

Hi Jeremy,

There is, but that means overriding the padding in all sections which makes the setting within the builder useless. It’s not advisable if you require different padding on other sections.

But here it s

.x-section {
padding-top: 0px !important;
} 

Thanks!