Social Shares on pages
-
New to Customizr and very impressed. Faced with the challenge of adding Social Share icons to every page below the page content (except front page and contact page), I found a pretty simple solution using the extensive hooks available. It works well, but would appreciate improvements/comments. Thanks and great community!
To my child theme functions.php I added:
// Add social shares after the container add_action( '__after_main_container' , 'add_social_shares' ); function add_social_shares() { // If we're on the home page or contact page, do nothing if ( is_front_page() || is_page( 'contact-us' ) ) return; ?> <div class="share-social-block"> <span style="font-size: 14px; font-style: italic;">Share it on</span> <!-- Add Social Share icons --> <a class="social-icon icon-facebook" style="text-decoration:none;" title="Share this on Facebook" href="https://www.facebook.com/share.php?u=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=1,resizable=1,width=900,height=500');return false;"></a> <a class="social-icon icon-google" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>" style="text-decoration:none;" title="Share this on Google+"" ></a> <a class="social-icon icon-twitter" onclick="javascript:window.open(this.href,'', 'menubar=1,resizable=1,width=600,height=400');return false;" href="https://twitter.com/intent/tweet?text=My+New+Shiny+Website&url=<?php echo get_permalink(); ?>" style="text-decoration:none;" title="Share this on Twitter" ></a> </div> <?php }
To my child theme CSS I added:
.share-social-block { float: right; } .share-social-block a::before { font-family: genericons; font-variant: normal; font-weight: 400; line-height: 1; text-transform: none; } .share-social-block a { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #5a5a5a; display: inline; font-size: 1.4em !important; height: inherit; line-height: inherit; margin: 0; opacity: 0.8; padding-right: 13px; position: relative; text-decoration: none; text-shadow: none; top: 2px; vertical-align: inherit; width: inherit; }
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The topic ‘Social Shares on pages’ is closed to new replies.