Dynamic share buttons for different social media

Community resources Webflow Tips
1

Hello, my dear friends and colleges! :slight_smile:

Since this question pops up periodically, I decided to put all information together in one post.

For creating sharing buttons/links on dynamic templates, we will use the awesome method described by @Waldo ( FREEBIE: Sharing is Caring :) - Show & Tell - Forum | Webflow ) and a little bit custom code.

STEP 1.

Follow @Waldoā€™s method and create needed buttons in Webflow. Give it classes, style it as you want, use the background image (icon) or words, whatever you need to get finished styled buttons.

In this case, for example, I created class social-share-btn and comboclasses for each social network I want to use: fb, tw, gplus, pin,tmb, email, pinb, lnk, redd

STEP 2.

Next step, use the embed code component and add any of the snippets showed below:

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

FACEBOOK SHARE
<a class="w-inline-block social-share-btn fb" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> </a>

TWITTER SHARE
<a class="w-inline-block social-share-btn tw" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a>

(Text here >>> ā€œ%20Check%20up%20this%20awesome%20contentā€ you can change on whatever you want, just donā€™t forget to change the spaces to ā€œ%20ā€)

GOOGLE+ SHARE
<a class="w-inline-block social-share-btn gplus" href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;"></a>

PINTEREST SHARE
<a class="w-inline-block social-share-btn pin" href="http://pinterest.com/pin/create/button/?url=&description=" target="_blank" title="Pin it" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&description=' + encodeURIComponent(document.title)); return false;"></a>

TUMBLR SHARE
<a class="w-inline-block social-share-btn tmb" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" title="Post to Tumblr" onclick="window.open('http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;"></a>

SHARE VIA E-MAIL
<a class="w-inline-block social-share-btn email" href="mailto:?subject=&body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.URL)); return false;"></a>

PINBOARD SHARE
<a class="w-inline-block social-share-btn pinb" href="https://pinboard.in/popup_login/?url=&title=&description=" target="_blank" title="Save to Pinboard" onclick="window.open('https://pinboard.in/popup_login/?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a>

LINKEDIN SHARE
<a class="w-inline-block social-share-btn lnk" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a>

REDDIT SHARE
<a class="w-inline-block social-share-btn redd" href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;">Reddit</a>

Buttons will share the particular page, where they are, take a title of the page and og image. Can be used on static pages same as on dynamic pages.

If on step 1 you created buttons with images or text inside, then you will have to add that element in this html snippets, between <a> and </a>

Hope this information will be helpful for you, guys. :slight_smile:

Regards,
Anna.

51 Likes
2

Bravo! :smiley: Great job @sabanna

4 Likes
3

Thanks, @Waldo :smile: It was inspired by your work, you know :wink:

2 Likes
4

@sabanna Great share. Been looking for this for a while. Thanks :raised_hands:

1 Like
5

Thanks Sabanna. If I understood well, this solution is not for CMS-driven pages, where not only the share URL is dynamic, but the title, description and thumbnail as well. Unless Iā€™m missing something?

6

Hi, @Zlate.

It is the method for letting users share the PAGE. It will automatically take settings from the meta tags and put in the Title and description.

You can use it with static and CMS pages.

Hope it explains a bit more. If you still have a questions feel free to ask.

Cheers,
Anna

7

Thanks Anna. I tried implementing and to some extent it works, that is, it successfully pulls the dynamic data. However, when I click on each of the share buttons, it opens about 10 new tabs with the share screen of the corresponding social media site.

I also see that the code explained here is different than Waldoā€™s code. Perhaps I should try the other code?

8

I am not sure what behavior you expect from share buttons. If you want to add this buttons inside the dynamic item and you will have 10 of them on one page then, probably, this particular code doesnā€™t fit your needs. As I mentioned, it will share PAGE, where that button is. It will NOT work for sharing only PART OF CONTENT from current page.

Feel free to use different options and choose the one, that will work as you need it to work.

Regards,
Anna

9

Hi, @sabanna , thanks for everything first.

Iā€™ve been working quite hard to get all of this in order. I think, Iā€™ve been doing everything quite right yet. But as soon as I put in the custom code in everything stops working. Even tough I change the class inside the code.

The parent div in step #4 in Waldo instructions is not clear for. I donā€™t get the part of a ā€œparent divā€.

Hereā€™s a couple of screenshot that might help:

  1. I combo classed everything under social share button, but as soon as I delete the Facebook block to embeded it, it deletes all the other buttons
    1366Ɨ768 113 KB

1366Ɨ768 163 KB

And when I put in the code, thereā€™s no icon that reappears on my page.

Please let me know if you can give me a hand.

Justin

10

@sabanna
Hereā€™s my read only link if it can help, thanks. You can go under my Publication Template to see the page.
https://preview.webflow.com/preview/optimamtl?preview=7a0f19e9bafe3673d1a5818c76d2a88b

11

Hello, @justin.forest

I think you get lost in the process of creating buttons :slight_smile:

  1. You should create buttons from regular Webflow link or link-block. By creating this, you are adding CSS code for these buttons in the main CSS file.

  2. Since classes and styles for these buttons been created you can use classnames in the code snippet. But you have to remember, that classnames in the css file will change spaces to dash (ā€œ-ā€) and capital letters to regular. For example, ā€œSocial share buttonā€ will become ā€œsocial-share-buttonā€.

  3. You donā€™t have to apply these classnames to the embed code widget

    But use them ONLY inside the code:

    817Ɨ147 14.8 KB

  4. For being able to see the links correctly in the Designer mode add standard Webflow classes to the code for the share links: w-button if you used buttons element for creating there links, w-inline-block if you used link-blocks

  5. I would also recommend put all embed code elements in separate div to limit their width in the designer mode :slight_smile:

Hope it helps. Feel free to ask if you need more help further.

Cheers,
Anna

12

Hi guys,

First of all, thanks so much for this manual! It helped very very very much! :smiley:

However, I have a little issue:
I implemented the share buttons on a dynamic page. When sharing one of my blog articles, the telephone icon gets shared, instead of my main image (as set in ā€œOpen Graph Image URLā€ settings).

See here: http://www.kpwj.de/neue-erkenntnisse/erkennen-der-verkalkung-von-herzkranzgefaen-kann-den-herzinfarkt-verhindern

Can sb help me out here?

Thanks so much,
Clemens

13

Did you try to run the site through Facebook Share debugger?

14

Thank you so much @sabanna!

Everything is workin! AWESOME!

Have a good one.

1 Like
15

Hey @sabanna I am having issues with the share to email. When I click on it on the active website a blank webpage is opened. Do you know how I can trouble shoot this issue?

16

Hi

It actually should start the email application on the computer/phone/tablet. Also, try to change attribute target from target="_blank" to target="_self"

Cheers,
Anna

1 Like
17

Thank you Sabanna I need it also that clarificationā€¦ since many webflow user donā€™t know anything about css/html and stuff (like me) many of these further clarifications helps a lot. Took me awhile to understand it but now it works great.

1 Like
18

Works greatā€¦ after I figured out my link blocks had to be styled as blocks (@waldo said you could use ā€˜link blocksā€™ without mentioning you have to change the style from default ā€˜inline-blockā€™ to ā€˜blockā€™ )ā€¦
But now my sharing windows open maximizedā€¦

How can I open those sharing windows without maximizing them ?

No one ? :neutral_face:

20

@sabanna - How would I add images to this? I made one button to look exactly how I want itā€¦ however when I go to place I donā€™t see the image I need (twitter icon). Would I just add the image into the CSS itā€™s self form the custom embed?

http://hungry-fan.webflow.io/recipes/bacon-and-cheese-barbecue-meatloaf

Ok EDIT ā€“ I have figured out the image issueā€¦ how do I display the text I want inside the embed though?

21

Inside the embed there is same HTML structure as you would build in Webdlow, but written in code.