- This topic has 29 replies, 4 voices, and was last updated 1 year, 11 months ago by Fernando.
-
AuthorPosts
-
April 8, 2022 at 6:09 am #2182026Adarsha
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.
April 8, 2022 at 6:46 am #2182052DavidStaffCustomer SupportHi there,
are you already using a social share plugin ?
April 8, 2022 at 6:47 am #2182058AdarshaNo I am not.
April 8, 2022 at 8:10 am #2182316DavidStaffCustomer Support1. 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 Location2. 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 element3. 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
April 8, 2022 at 12:56 pm #2182551AdarshaHey, 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)April 8, 2022 at 1:21 pm #2182575YingStaffCustomer SupportHi 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.
April 9, 2022 at 6:22 am #2183003AdarshaI have attached the screenshots
April 9, 2022 at 8:05 am #2183212DavidStaffCustomer SupportChange the Hook to be
generate_before_content
as theentry_title
hook only exists if the default Theme title is displayed.April 9, 2022 at 8:37 am #2183238AdarshaDone, still does not seem to work.
April 9, 2022 at 9:07 am #2183260DavidStaffCustomer SupportAre you using a Block Element – Content template for your Posts ?
April 9, 2022 at 12:54 pm #2183364AdarshaYes I am. It’s pulling in content dynamically.
April 9, 2022 at 1:50 pm #2183406DavidStaffCustomer SupportOK – 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.April 10, 2022 at 3:43 am #2183635AdarshaHey, 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/qstgibApril 10, 2022 at 4:34 am #2183674DavidStaffCustomer SupportI 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 ?April 10, 2022 at 5:32 am #2183722AdarshaAttached a screenshot.
-
AuthorPosts
- You must be logged in to reply to this topic.