Dynamic share buttons for different social media

I don’t follow - sorry. I have it now. I added this:

<a href="" class="social-share-btn" onclick="return tweet()"> <p class="social-share-twitter-text">Share On Twitter!</a>

Should the text not live inside of a

tag?

paragraph tag* sorry it didn’t show that.

Ok, now it is my turn to apologize :smiley:

I can’t get what the issue, text is there

haha god that is ugly… lmao i just fixed that :))… I was curious if it’s perfectly fine to have the the text live within a <p> tag?

Also - you said there was a way to have your button be shown in the designer instead of seeing this?

Hey No problem! point is we got it to work… thank you Anna! as always… you’re awesome.

1 Like

actually… You can! Add class w-inline-block to the anchor

Awesome Sauce! Would that be in webflow or in the Embed itsself?

inside the embed:

a href=“” class="social-share-btn w-inline-block " …

I tried that… didn’t work :frowning:

Guys, I really really need your help please!!! My share button just does not want to work. I followed the instructions of above, but clicking on it does not do anything, although Facebook should open to share. Please help me!

Screenshot 1

Screenshot 2

Screenshot 3

Thanks a lot, @sabana. Super useful!

Hi @sabanna, @Waldo, @AlexManyeki, @PixelGeek
could you please explain why you should not place the class on the HTML custom code element?
When I leave it without a class I don’t see them in the designer and in the site.
When I use only w-inline-block, all 3 buttons looks like grey cubes in the designer and in the site.
When I give each button its classes (w-inline-block, social-share-btn and fb/tw/lnk) it works sometimes, but sometimes I see only 1 or two buttons out of 3 and the text is not delivered to twitter. It opens the twitter window empty.

https://preview.webflow.com/preview/proof-7c19bb?preview=f6e7969d662abf6b71a2df8a37f8ee17

Is it possible to integrate all social media buttons at one go or is there a limit to it.

1 Like

Hello Sabanna,

Every share button working fine except twitter, it does not post image with the article.

Could you please explain what can be the issue with this?

Regards,
Zaheen

Hey @sabanna, is there a way to prevent it from opening as a new tab? Instead I would love to have it open as a new window like other sites do it.

1 Like

The links should already open in a new window. If you have an issue with one of your sites, please provide additional information.

Hi Sam, I figured what went wrong and corrected it. Just some other questions, any way to extend this to Messenger “Send” or WeChat perhaps?

1 Like

Dont forget to add class w-inline-block for be able to see your share buttons in the designer mode.

Do I have to create this class? Does webflow automatically recognizes it? It won’t appear in the Class Selector field. If I have to create it what are it’s characteristics.

I am using above code to share post in Facebook but when i given title and description in share button. than it is not taking that , it is showing some unknown description, can u please explain how to meta tag add here

thank you

Why aren’t these just provided as widgets? It would seem the simplest answer for users. We haven’t had any component additions in ages!

3 Likes