Dynamic Share and Link Buttons

API & Custom Code Show & Tell
9

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:

<nav class="menu"> <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open">
<label class="menu-open-button" for="menu-open">
<span class="lines line-1"></span>
<span class="lines line-2"></span>
<span class="share"><i class="fa fa-share-alt"></i></span>
</label>


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

(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;"><i class="fa fa-twitter"></i></a>


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


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


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


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