[Resolved] Floating share icons

Home Forums Support [Resolved] Floating share icons

Home Forums Support Floating share icons

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #2182026
    Adarsha

    Hey.
    I stumbled upon a support thread here (https://generatepress.com/forums/topic/floating-social-share-buttons/) which had this screenshot, https://prnt.sc/qstgib .
    I want to create a similar social share icons next to my post on left side. Can you please guide me?
    I don’t understand the things mentioned in that thread.

    Thanks.

    #2182052
    David
    Staff
    Customer Support

    Hi there,

    are you already using a social share plugin ?

    #2182058
    Adarsha

    No I am not.

    #2182316
    David
    Staff
    Customer Support

    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

    #2182551
    Adarsha

    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)

    #2182575
    Ying
    Staff
    Customer Support

    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.

    #2183003
    Adarsha

    I have attached the screenshots

    #2183212
    David
    Staff
    Customer Support

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

    #2183238
    Adarsha

    Done, still does not seem to work.

    #2183260
    David
    Staff
    Customer Support

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

    #2183364
    Adarsha

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

    #2183406
    David
    Staff
    Customer Support

    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.

    #2183635
    Adarsha

    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

    #2183674
    David
    Staff
    Customer Support

    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 ?

    #2183722
    Adarsha

    Attached a screenshot.

Viewing 15 posts - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.