• 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)
  • Hi fwunder,
    giving it a look (I meant I haven’t tested it, but I trust you it works), I think (for what is worth) it’s very good ??
    Can I see it in your page? Do you have any link? I’m just wondering if all the rules for .share-social-block a are needed.
    The only thing I can suggest to improve it is to remove the inline style here:
    <span style="font-size: 14px; font-style: italic;">Share it on</span>
    And port it to your child-theme style.css, assigning a class or/and an id to that span.

    Thread Starter fwunder

    (@fwunder)

    Thanks d4z_c0nf. The site is under development (password) right now, so no link. Soon. Development is going fast with Customizr.

    Thanks for the rules comment. Yeah, sloppy copy/pasting coding. I just grabbed the block from .social-block a in tc_common.css. Cleaned up a bit:

    .share-social-block a {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        font-size: 1.4em !important;
        padding-right: 13px;
        width: inherit;
    }

    I used similar method here on a twenty twelve child. Customizr made it simple with its action hooks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Social Shares on pages’ is closed to new replies.