Streaming live at 10am (PST)

Dynamic share buttons for different social media


#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 ( http://forum.webflow.com/t/freebie-sharing-is-caring/20487 ) 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" title="Pin it" target="_blank" href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;); e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;); e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;); e.setAttribute(&apos;src&apos;,&apos; http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'></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.


Social Media Share Buttons Dynamic Pages
Dynamic Page Sharing on Whatsapp
Social sharing buttons + CMS?
FREEBIE: Sharing is Caring :)
Dynamic Mailto link
Social Media Content Bank, Greatest Hits Vol. 2
Twitter Share - Dynamic URL
Sharing buttons of the current page (for blog)
Need help with social media share button styling
Social Media Content Bank
Open Graph troubles
Dynamic Page Sharing on Whatsapp
#2

Bravo! :smiley: Great job @sabanna


#3

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


#4

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


#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

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:

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?
https://developers.facebook.com/tools/debug/sharing/


#14

Thank you so much @sabanna!

Everything is workin! AWESOME!

Have a good one.


#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


#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.


#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.