Dynamic Share and Link Buttons

SamStuber64840 · February 24, 2018, 11:13pm

Figured out how to add share buttons to dynamic pages and make the social share menu animated!

Garmar81222 · July 17, 2020, 7:13am

Hi thanks for sharing this.

I believe onClick is not whitelisted by knack because it's prone to script attacks.

SimonPosne75593 · July 17, 2018, 10:37am

Hi Sam

Thank you for your help. I actually prefer the good old simple icons which don't float. So am not using the CSS. Thanks.

What I did find however is that when i test the icons in the live app, they are not all behaving the same way as expected. for example, only twitter and email icons include the url of the page, and therefore hyperlink it correctly. But the FB, G+, and LI icons only link the live app url, not the page url. Not sure about Reddit because I am not registered with them. Do you know why this is?

Simon

SamStuber64840 · July 12, 2018, 2:15am

Hey Simon,

To change where the icons are located after you click the share button, I would try modifying the 'transition-duration' and the 'webkit-transition-duration' numbers on each of the nth-child code blocks. How I usually figure out these things is to adjust numbers and see what it does and then go from there.

I've bolded an example of the numbers I'm referring to in the code above. Hope this helps!

.menu-open:checked ~ .w-inline-block:nth-child(3) {
transition-duration: 180ms;
-webkit-transition-duration: 180ms;
-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
transform: translate3d(0.08361px, -104.99997px, 0);}

SimonPosne75593 · July 10, 2018, 11:07am

Hi Sam. This is great. However, after applying your solution, the social media icons appeared vertically and in round circles. Would you know what i need to do to have them in a simple horizontal strip?

BrockMassi21234 · June 21, 2018, 4:24am

Thank you for sharing this...

NickLowrie12740 · May 16, 2018, 3:53pm

This is great! Thank you for sharing.

I know this might be a bit old for a response, but I am looking to create a mailto that will make a new email for the user with a link to the page and the subject would be a field from Knack. Any chance this is possible?

RogerKyle61123 · March 1, 2018, 11:02am

This is really nice. Thanks for sharing!

SamStuber64840 · February 25, 2018, 9:27pm

I'm sharing this with everyone just in case others are looking for a way to share their dynamic pages using various means of social media (Facebook, Linkedin, email, Reddit, Twitter, and Google Plus). I spend a while trying to figure this out and noticed other people had asked in previous comments. I also made my social media menu animated.

You can see an example by going to the below page and clicking one of the students personal pages that displays in the table:

https://scholarsshop.knack.com/scholarsshop#donate-to-students/

Step 1: Added a rich text field to the page that I wanted users to share via social media. Then I added the following code to the HTML:

(In the twitter code below, I customized the words that were shared by editing the words between the '%20'. the '%20' are used as spaces.)
<a class="w-inline-block social-share-btn tw" href="https://twitter.com/intent/tweet?" target="" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20This%20student%20needs%20your%20help.%20DONATE%20TODAY!%20' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a>

</nav>

Step 2: I formatted and animated the html and social share buttons in CSS. The following is the code I used in my css:

/*SHARE ON SOCIAL MEDIA MENU*/
/*Format Social Sharing Menu*/
/*format Facebook Icon*/
a.w-inline-block.social-share-btn.fb {
background-color: #3B5998 !important;
color: white !important;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
margin-right: 40px;}
a.w-inline-block.social-share-btn.fb:hover {
background-color: white !important;
color: #3B5998 !important;}

/*format Twitter Icon*/
a.w-inline-block.social-share-btn.tw {
background-color: #55ACEE !important;
color: white !important;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
margin-right: 40px;}
a.w-inline-block.social-share-btn.tw:hover {
background-color: white !important;
color: #55ACEE !important;}

/*format Google Icon*/
a.w-inline-block.social-share-btn.gplus {
background-color: #dd4b39 !important;
color: white !important;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
margin-right: 40px;}
a.w-inline-block.social-share-btn.gplus:hover {
background-color: white !important;
color: #dd4b39 !important;}

/*format Email Icon*/
a.w-inline-block.social-share-btn.email {
background-color: #430297 !important;
color: white !important;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
margin-right: 40px;}
a.w-inline-block.social-share-btn.email:hover {
background-color: white !important;
color: #430297 !important;}

/*format Reddit Icon*/
a.w-inline-block.social-share-btn.redd {
background-color: #ff5700 !important;
color: white !important;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
margin-right: 40px;}
a.w-inline-block.social-share-btn.redd:hover {
background-color: white !important;
color: #ff5700 !important;}

/*Format LinkedIn Button*/
a.w-inline-block.social-share-btn.lnk {
background-color: #0077b5 !important;
color: white !important;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
margin-right: 40px;}
a.w-inline-block.social-share-btn.lnk:hover {
background-color: white !important;
color: #0077b5 !important;}

/*remove random writing after social icons*/
#kn-scene_560 li.kn-link.kn-link-1,#kn-scene_560 li.kn-link.kn-link-2, #kn-scene_560 li.kn-link.kn-link-3, #kn-scene_560 li.kn-link.kn-link-4, #kn-scene_560 li.kn-link.kn-link-5 {
font-size: 0;}

/*format hover over social icons*/
.fa:hover {
opacity: 0.9;}

/*Animate Social Sharing Menu*/
.w-inline-block,
.menu-open-button {
background: #EEEEEE;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: #FFFFFF;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;}

.menu-open {
display: none;}

.lines {
width: 25px;
height: 3px;
background: #596778;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;}

.line-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
visibility: hidden;}

.line-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: hidden;}

.menu-open:checked + .menu-open-button .line-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
visibility: visible;}

.menu-open:checked + .menu-open-button .line-2 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
visibility: visible;}

.fa-share-alt {
visibility: visible;
color: #f7df59;}

.menu-open:checked + .menu-open-button .fa-share-alt {
visibility: hidden;}

.menu {
margin: auto;
position: inherit;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 80px;
height: 80px;
text-align: center;
box-sizing: border-box;
font-size: 26px;}

/* .menu-item {
transition: all 0.1s ease 0s;
} */

.w-inline-block:hover {
background: #EEEEEE;
color: #3290B1;}

.w-inline-block:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;}

.w-inline-block:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;}

.w-inline-block:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;}

.w-inline-block:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;}

.w-inline-block:nth-child(7) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;}

.w-inline-block:nth-child(8) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;}

.w-inline-block:nth-child(9) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;}

.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);}

.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);}

.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);}

.menu-open:checked ~ .w-inline-block {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);}

.menu-open:checked ~ .w-inline-block:nth-child(3) {
transition-duration: 180ms;
-webkit-transition-duration: 180ms;
-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
transform: translate3d(0.08361px, -104.99997px, 0);}

.menu-open:checked ~ .w-inline-block:nth-child(4) {
transition-duration: 280ms;
-webkit-transition-duration: 280ms;
-webkit-transform: translate3d(90.9466px, -52.47586px, 0);
transform: translate3d(90.9466px, -52.47586px, 0);}

.menu-open:checked ~ .w-inline-block:nth-child(5) {
transition-duration: 380ms;
-webkit-transition-duration: 380ms;
-webkit-transform: translate3d(90.9466px, 52.47586px, 0);
transform: translate3d(90.9466px, 52.47586px, 0);}

.menu-open:checked ~ .w-inline-block:nth-child(6) {
transition-duration: 480ms;
-webkit-transition-duration: 480ms;
-webkit-transform: translate3d(0.08361px, 104.99997px, 0);
transform: translate3d(0.08361px, 104.99997px, 0);}

.menu-open:checked ~ .w-inline-block:nth-child(7) {
transition-duration: 580ms;
-webkit-transition-duration: 580ms;
-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
transform: translate3d(-90.86291px, 52.62064px, 0);}

.menu-open:checked ~ .w-inline-block:nth-child(8) {
transition-duration: 680ms;
-webkit-transition-duration: 680ms;
-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
transform: translate3d(-91.03006px, -52.33095px, 0);}

.menu-open:checked ~ .w-inline-block:nth-child(9) {
transition-duration: 780ms;
-webkit-transition-duration: 780ms;
-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
transform: translate3d(-0.25084px, -104.9997px, 0);}

Topic		Replies	Views
Styling Knack Apps - Part 2 Show & Tell	9	2071	February 24, 2022
Knack code change for Current User API & Custom Code	2	44	April 3, 2025
CSS and Javascript snippets Show & Tell	2	425	May 2, 2018
Using Images as clickable links Feature Requests	2	387	May 3, 2017
How do I add link buttons? Ask Developers	4	604	December 27, 2014

Dynamic Share and Link Buttons

Related topics