Skip to content

Instantly share code, notes, and snippets.

@jaredatch
Last active October 9, 2015 17:26
Show Gist options
  • Select an option

  • Save jaredatch/f4afc21741258ce9db0b to your computer and use it in GitHub Desktop.

Select an option

Save jaredatch/f4afc21741258ce9db0b to your computer and use it in GitHub Desktop.
Mobile sharing icons that dock to the bottom of the device
<?php
/**
* Mobile share buttons
*
* @since 1.0.0
*/
function ja_share_buttons_mobile() {
if ( !is_front_page() && ( is_page() || is_singular( 'post' ) ) ) :
$msg = get_the_title() . ' ' . get_permalink();
$title = get_the_title();
echo '<div class="share-buttons-mobile">';
ea_share()->link( 'facebook' );
ea_share()->link( 'twitter' );
ea_share()->link( 'pinterest' );
echo '<a class="email" href="mailto:?subject=' . $title . '&amp;body=' . $msg . '"><i class="fa fa-envelope"></i></a>';
//echo '<a class="sms" href="sms:;body=' . $msg . '"><i class="fa fa-mobile"></i></a>';
//echo '<a class="sms sms-share" data-msg="' . esc_attr( get_the_title() . ' ' . get_permalink() ) . '"><i class="fa fa-mobile"></i></a>';
echo '</div>';
endif;
}
add_action( 'genesis_after', 'ja_share_buttons_mobile', 20 );
/* Mobile share buttons
---------------------------------------------------------------------------------------------------- */
.share-buttons-mobile {
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
border-top: 1px solid #eee;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.12);
text-align: center;
height: 54px;
padding: 2px;
display: none;
}
.share-buttons-mobile a {
display: inline-block;
/*width: 18%;*/
width: 23%;
text-align: center;
background-color: #bbb;
margin: 0 2px;
border-radius: 4px;
color: #fff;
font-size: 24px;
height: 50px;
line-height: 50px;
}
.share-buttons-mobile a.facebook {
background-color: #3b5998;
}
.share-buttons-mobile a.twitter {
background-color: #55acee;
}
.share-buttons-mobile a.pinterest {
background-color: #bd081c;
}
.share-buttons-mobile a.email {
background-color: #999;
}
.share-buttons-mobile .ea-share-count,
.share-buttons-mobile .ea-share-count-label {
display: none;
}
@media only screen and (max-width: 600px) {
.share-buttons-mobile {
display: block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment