Like Button and Share Button in the same line

Hi there,

how have the Like and Share buttons been added to the site ? Are they automatically added by those plugins ?

yes, the are added automatically.

Do you know if both plugins provide an option to add them using a Shortcode or a PHP Snippet?
Then we can use a Hook to insert those codes where we want them, and in a way that we can position them inline.

according to https://favoriteposts.com/ they do, [favorite_button]
and the social share buttons do also, I can enable a Custom Positions/Custom Share Buttons Display which provides both, php and shortcode.

OK - thats good.
So try this:

1. Make sure you have the Elements module activated in Appearance > GeneratePress.

2. Create a new Hook Element in Appearance -> Elements:

https://docs.generatepress.com/article/hooks-element-overview/

2.1 In that hook add the following HTML with the shortcodes inside:

<div class="after-content-buttons">
Shortcodes go here
</div>

2.2 Set the Hook to: generate_after_content

2.3 Set the Priority to: 4

2.4 Check the Execute Shortcodes option

2.5 Set the Display Rules > Location to: Posts > All Posts or wherever your require them.

2.6 Publish the Hook

If you can still see your buttons on the posts, send me a link and ill provide the CSS to align them

thank you so far. This seems to work well.
But what doesn't work so far is to put both Shortcodes in the same row.

If I do so, the second one is still in the next one.

Hi Helmut,

Can you provide the link where we can view these two buttons?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hi Fernando, sure: https://schooltools.at/2022/08/06/spielbar-de/

maybe there is no easy way to set two different shortcodes in one row / line.
I was thinking of using additional code so to put it both inline, but that didn't work. I have to say I am really not a expert... ;)

You can try this CSS:

.single-post .after-content-buttons {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 5px;
}

.single-post ul.essb_links_list.essb_force_hide_name.essb_force_hide {
    display:flex;
    flex-wrap: nowrap;
}

.single-post  button.simplefavorite-button{
    margin-right: 5px;
}

.single-post  div.essb_links {
    
    margin: 0;
}

thanks a lot - where do I have to add this code?

You can add it in Appearance > Customize > Additional CSS.