Hello Guys I want to ask,
How to change the icon share button on the Article page?
I want to change the icon button, if I'm not using "{{share}}" how to create a URL to dynamic by article
Thank you.
Change icon share button in Article page
Hello Mr.Tipene
I just want to change our icon, to a new SVG image, and yes if I use manual documentation say like this
<ul class="share">
<li><a href="[sharing url to Facebook]" class="share-facebook">Facebook</a></li>
<li><a href="[sharing url to Twitter]" class="share-twitter">Twitter</a></li>
<li><a href="[sharing url to LinkedIn]" class="share-linkedin">LinkedIn</a></li>
<li><a href="[sharing url to Google]" class="share-googleplus">Google+</a></li></ul>
can I use code like this, to get the article I want to share? it's right to the URL for [sharing url to Facebook]?
<ul class="share">
<li><a href="https://www.facebook.com/share.php?title={{article.title}}" class="share-facebook">Facebook</a></li>
</ul>can you help me to get [sharing url to Twitter] and [sharing url to LinkedIn]?
Thankyou
Anis
Hi Anis,
Thanks for clarifying!
Probably the easiest way to go about this would be by changing the SVG icon that exists on the current share links, instead of replacing the link all together. Here's an example below that gets the facebook share SVG, and replaces it with a
You can do the same with the Twitter and Linkedin icons by targeting the ".share-twitter" and ".share-linkedin" elements. This code should be placed in the script.js file of your help center code editor.
I hope this helps! Feel free to reach out with any questions.
Tipene
Thanks for clarifying!
Probably the easiest way to go about this would be by changing the SVG icon that exists on the current share links, instead of replacing the link all together. Here's an example below that gets the facebook share SVG, and replaces it with a
path element that you specify:// Gets SVG element
const svgEl = document.querySelector('.share-facebook').children[0];
// Replaces default path element with a path you specify
svgEl.innerHTML = '{your SVG path here}'You can do the same with the Twitter and Linkedin icons by targeting the ".share-twitter" and ".share-linkedin" elements. This code should be placed in the script.js file of your help center code editor.
I hope this helps! Feel free to reach out with any questions.
Tipene
Hello Mr.Tipene
that's nice info, I will try that.
Thank you, sir
Happy to help!
Have a great day :)
Tipene
Have a great day :)
Tipene
Login to the community
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Thanks for reaching out!
While I can't think of a way that this would be possible working directly with the
sharehelper, it is probably something we can achieve using a bit of custom JS. Can you share an example of how you would like this to look. i.e are you wanting to change the actual icon as well as the URL it points to? If so, how would you be looking to have the article determine the way the icon and URL is added to the page? e.g would you like the icon and URL to change based on the article title of some other part of text in the article.Thanks!
Tipene