Floating share icons

Hi there,

are you already using a social share plugin ?

No I am not.

1. Install this Plugin:

https://wordpress.org/plugins/gp-social-share-svg/

In the plugins settings you can

a) set the colors
b) delete the code of the icons you do not need
c) in the Custom Settings disable the: Disable Hook Location

2. Create a New Hook Element:

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

2.1 In the hook text area add:

<div class="floating-container">
[gp-social]
</div>

2.2 Set the Hook to: before_entry_title
2.3 Check Execute Shortcodes
2.4 Set the Display Rules > Location to: All Posts
2.5 Publish the hook element

3. Add this CSS to your Customizer > Additional CSS

@media (min-width: 840px) {

    .floating-container {
        display: block;
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 80px;
        height: 0;
    }

    #gp-social-share {
        top: 1em;
        flex-direction: column;
        left: -50px !important;

    }
}

Once that's done, share a link to your site as it may require tweaking for your sites layout

Hey, firstly thanks a lot for detailed guide.
So I did everything mentioned, rather than all posts, I made it on single post.
but nothing is appearing.
I have put the link of single post in sensitive part. (hope you wont be adding link or screenshot public)

Hi Adarsha,

I'm not seeing the code (hook) has been added to the post.

Make sure cache has been cleared after the hook is published.

And can you take a screenshot of the hook? Including location/ hook name/ the code.

I have attached the screenshots

Change the Hook to be generate_before_content as the entry_title hook only exists if the default Theme title is displayed.

Done, still does not seem to work.

Are you using a Block Element - Content template for your Posts ?

Yes I am. It's pulling in content dynamically.

OK - when you do that you no longer have the theme templates and its hooks.
So edit the content template and add the HTML:

<div class="floating-container">
[gp-social]
</div>

in the content template using a HTML block.
You can position it where you want it displayed on mobile / small screens.

Hey, how can I add this?
What you mean by content template? I can't edit it. it pulls content dynamically.
How can I add html?

I actually wanted it this way, if its possible.
https://prnt.sc/qstgib

I asked here:

https://generatepress.com/forums/topic/floating-share-icons/#post-2183260

And you said Yes.
Do you have a Block Element - Content Template for your site ? If so can you share a screenshot of the Block Element ?

Attached a screenshot.