Navigation
Archive / Entry/Social Share on Post and Post Archive with correct link (Page 2)
This is archived content. Visit our new forum.

Tagged: 

1 2
  • Author
    Posts
  • August 23, 2016 at 10:46 pm #1144165
    Lely
    Moderator

    Hi There,

    a.) To add social share buttons between featured image and post title, please add the following code instead on your child theme’s functions.php file:

    add_action('x_before_view_integrity__content-post-header', 'sharing_buttons', 99999);

function sharing_buttons( $content ) {

echo do_shortcode('[share_custom title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" email="true"]');

}

    b.) Update Rad’s custom share to this:

    add_shortcode( 'share_custom', 'share_custom' );

function share_custom ( $atts ) {

 extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'title'       => '',
    'share_title' => '',
    'facebook'    => '',
    'twitter'     => '',
    'google_plus' => '',
    'linkedin'    => '',
    'pinterest'   => '',
    'reddit'      => '',
    'email'       => '',
    'email_subject' => ''
  ), $atts, 'x_share' ) );

  $share_url        = urlencode( get_permalink() );
  $share_url2       = get_permalink();

  $share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( get_the_title() );

  $share_source     = urlencode( get_bloginfo( 'name' ) );
  $share_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
  $share_image      = ( function_exists( 'x_get_featured_image_with_fallback_url' ) ) ? urlencode( x_get_featured_image_with_fallback_url() ) : urlencode( $share_image_info[0] );

  if ( $linkedin    == 'true' ) {
    $share_content    = urlencode( cs_get_raw_excerpt() );
  }

  $tooltip_attr = cs_generate_data_attributes_extra( 'tooltip', 'hover', 'bottom' );

  $id          = ( $id          != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class       = ( $class       != ''     ) ? 'x-entry-share ' . esc_attr( $class ) : 'x-entry-share';
  $style       = ( $style       != ''     ) ? 'style="' . $style . '"' : '';
  $title       = ( $title       != ''     ) ? $title : __( 'Share this Post', 'cornerstone' );
  $facebook    = ( $facebook    == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i></a>" : '';
  $twitter     = ( $twitter     == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Twitter', 'cornerstone' ) . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i></a>" : '';
  $google_plus = ( $google_plus == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Google+', 'cornerstone' ) . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i></a>" : '';
  $linkedin    = ( $linkedin    == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on LinkedIn', 'cornerstone' ) . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&url={$share_url}&title={$share_title}&summary={$share_content}&source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin-square\" data-x-icon=\"\"></i></a>" : '';
  $pinterest   = ( $pinterest   == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Pinterest', 'cornerstone' ) . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&media={$share_image}&description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest-square\" data-x-icon=\"\"></i></a>" : '';
  $reddit      = ( $reddit      == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Reddit', 'cornerstone' ) . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit-square\" data-x-icon=\"\"></i></a>" : '';
  $email_subject = ( $email_subject != '' ) ? esc_attr( $email_subject ) : __( 'Hey, thought you might enjoy this! Check it out when you have a chance:', 'cornerstone' );
  $mail_to     = esc_url( "mailto:?subject=" . get_the_title() . "&body=" . $email_subject . " " . get_permalink() . "" );
  $email       = ( $email       == 'true' ) ? "<a href=\"{$mail_to}\" {$tooltip_attr} class=\"x-share email\" title=\"" . __( 'Share via Email', 'cornerstone' ) . "\"><span><i class=\"x-icon-envelope-square\" data-x-icon=\"\"></i></span></a>" : '';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . '<p>' . $title . '</p>'
            . '<div class="x-share-options">'
              . $facebook . $twitter . $google_plus . $linkedin . $pinterest . $reddit . $email
            . '</div>'
          . '</div>';

  return $output;

}

    c.) Please add the following custom CSS on Appearance > Customize > Custom > Edit Global CSS:

    .blog .x-entry-share >p {
    display: none;
}

    .blog selector will make the Share this Post text hidden on blog index page only

    d.) From Rad’s reply here:#1013539
    Look for the following lines:

      $facebook    = ( $facebook    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i></a>" : '';
  $twitter     = ( $twitter     == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Twitter', 'cornerstone' ) . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i></a>" : '';
  $google_plus = ( $google_plus == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Google+', 'cornerstone' ) . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i></a>" : '';
  $linkedin    = ( $linkedin    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on LinkedIn', 'cornerstone' ) . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&url={$share_url}&title={$share_title}&summary={$share_content}&source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin-square\" data-x-icon=\"\"></i></a>" : '';
  $pinterest   = ( $pinterest   == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Pinterest', 'cornerstone' ) . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&media={$share_image}&description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest-square\" data-x-icon=\"\"></i></a>" : '';
  $reddit      = ( $reddit      == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Reddit', 'cornerstone' ) . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit-square\" data-x-icon=\"\"></i></a>" : '';
  $email_subject = ( $email_subject != '' ) ? esc_attr( $email_subject ) : __( 'Hey, thought you might enjoy this! Check it out when you have a chance:', 'cornerstone' );
  $mail_to     = esc_url( "mailto:?subject=" . get_the_title() . "&body=" . $email_subject . " " . get_permalink() . "" );
  $email       = ( $email       == 'true' ) ? "<a href=\"{$mail_to}\" {$tooltip_attr} class=\"x-share email\" title=\"" . __( 'Share via Email', 'cornerstone' ) . "\"><span><i class=\"x-icon-envelope-square\" data-x-icon=\"\"></i></span></a>" : '';

    Each of those social buttons have icons like this:
    <i class=\"x-icon-envelope-square\" data-x-icon=\"\"></i>
    Replace those icons with your own image.
    See this image shortcode:http://demo.theme.co/integrity-1/shortcodes/images/

    Hope this helps.

    August 24, 2016 at 1:39 pm #1145168
    necxelos
    Participant

    Ok, my code looks like this now:

    add_action('the_content', 'sharing_buttons', 99999);
add_action('the_excerpt', 'sharing_buttons', 99999);

function sharing_buttons( $content ) {

return $content.do_shortcode('[share_custom title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" email="true"]');

}
add_shortcode( 'share_custom', 'share_custom' );

function share_custom ( $atts ) {

 extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'title'       => '',
    'share_title' => '',
    'facebook'    => '',
    'twitter'     => '',
    'google_plus' => '',
    'linkedin'    => '',
    'pinterest'   => '',
    'reddit'      => '',
    'email'       => '',
    'email_subject' => ''
  ), $atts, 'x_share' ) );

  $share_url        = urlencode( get_permalink() );
  $share_url2       = get_permalink();

  $share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( get_the_title() );

  $share_source     = urlencode( get_bloginfo( 'name' ) );
  $share_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
  $share_image      = ( function_exists( 'x_get_featured_image_with_fallback_url' ) ) ? urlencode( x_get_featured_image_with_fallback_url() ) : urlencode( $share_image_info[0] );

  if ( $linkedin    == 'true' ) {
    $share_content    = urlencode( cs_get_raw_excerpt() );
  }

  $tooltip_attr = cs_generate_data_attributes_extra( 'tooltip', 'hover', 'bottom' );

  $id          = ( $id          != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class       = ( $class       != ''     ) ? 'x-entry-share ' . esc_attr( $class ) : 'x-entry-share';
  $style       = ( $style       != ''     ) ? 'style="' . $style . '"' : '';
  $title       = ( $title       != ''     ) ? $title : __( 'Share this Post', 'cornerstone' );
  $facebook    = ( $facebook    == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i></a>" : '';
  $twitter     = ( $twitter     == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Twitter', 'cornerstone' ) . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i></a>" : '';
  $google_plus = ( $google_plus == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Google+', 'cornerstone' ) . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i></a>" : '';
  $linkedin    = ( $linkedin    == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on LinkedIn', 'cornerstone' ) . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&url={$share_url}&title={$share_title}&summary={$share_content}&source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin-square\" data-x-icon=\"\"></i></a>" : '';
  $pinterest   = ( $pinterest   == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Pinterest', 'cornerstone' ) . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&media={$share_image}&description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest-square\" data-x-icon=\"\"></i></a>" : '';
  $reddit      = ( $reddit      == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Reddit', 'cornerstone' ) . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit-square\" data-x-icon=\"\"></i></a>" : '';
  $email_subject = ( $email_subject != '' ) ? esc_attr( $email_subject ) : __( 'Hey, thought you might enjoy this! Check it out when you have a chance:', 'cornerstone' );
  $mail_to     = esc_url( "mailto:?subject=" . get_the_title() . "&body=" . $email_subject . " " . get_permalink() . "" );
  $email       = ( $email       == 'true' ) ? "<a href=\"{$mail_to}\" {$tooltip_attr} class=\"x-share email\" title=\"" . __( 'Share via Email', 'cornerstone' ) . "\"><span><i class=\"x-icon-envelope-square\" data-x-icon=\"\"></i></span></a>" : '';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . '<p>' . $title . '</p>'
            . '<div class="x-share-options">'
              . $facebook . $twitter . $google_plus . $linkedin . $pinterest . $reddit . $email
            . '</div>'
          . '</div>';

  return $output;

}

    b) The most important part – works like a charm. Both the link that is actually shared and the link presented in browser snippet are correct. Awesome, great thanks 🙂

    d) This one is complicated. First of all what I see is:

    
<i class=\"x-icon-envelope-square\" data-x-icon=\"    SQUARE WITH 4 UNREADABLE LETTERS IN IT    \"></i>

    …and that’s the case for the forums here, my code editor of choice (notepad++) and FireBug. On site icon looks as it should though.

    Then either I’m doing something wrong or I didn’t understand what You’re saying but using the shortcode way don’t work for me (I did it like this):

    
$facebook    = ( $facebook    == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><?php do_shortcode('[image type="rounded" src="http://localhost/myimagepath/image.jpg" alt="Text"]')?></a>" : '';

    …but normal html image loading do work for me (I did it like this):

    
$facebook    = ( $facebook    == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><img src=\"http://localhost/myimagepath/image.jpg\"></a>" : '';

    So my d) subquestions would be:
    – How to do it properly using shortcode? Because I assume using IMG is far more limited…
    – How to see the actual icon being used instead of this SQUARE thingy?

    a) How to incorporate this code for different placement of social buttons into existing code above without breaking it?

    c) Works like a charm, both text and line it was in are gone, thank You 🙂

    August 24, 2016 at 6:18 pm #1145511
    Jade
    Moderator

    Hi there,

    D.

    $facebook = ( $facebook == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><img src=\"http://localhost/myimagepath/image.jpg\"></a>" : '';

    Using the code above should be fine. The shortcode to load the image is just another option but both works the same way which is to display the image.

    If you want to be able to display the actual icons instead of the square versions, you will need to replace the values in the class and data-x-icon attributes like:

    <i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i> to <i class=\"x-icon-fa-facebook-f\" data-x-icon=\"\"></i>

    You can refer to the classes values here: http://fontawesome.io/icons/ and the data icon value in the Unicode value of the icon when you select a specific one.

    Let us know if you need further clarification.

    August 24, 2016 at 7:54 pm #1145661
    necxelos
    Participant

    a)How to incorporate this code from Lely for different placement of social buttons into existing code (from Rad, with Lely’s additions) without breaking it?

    d)
    – Out of curiosity (because it haunts me now): how would I incorporate image shortcode there? I tried so many ways now and it just refuses to work…

    – I managed to edit this part, and it seems to be working (on my site):
    <i class=\"arrow-circle-o-left\" data-x-icon=\"\">
    And forum posts automatically switch Icon Code for a Square, which makes showing example with readable Icon Code impossible here. Joke is on me, good one 🙂

    August 25, 2016 at 12:18 am #1146099
    Lely
    Moderator

    Hi There,

    From your final code as you shared here #1145168:
    For example, let’s update FB icon with image. Check this line of code for Facebook:
    $facebook = ( $facebook == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i></a>" : '';

    Using normal image element we can update to this:

    $facebook = ( $facebook == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><img src=\"http://sites.com/image-url.jpg\"></a>" : '';

    Using X image shortcode:

    $facebook = ( $facebook == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\">'.do_shortcode("[x_image src=\"http://sites.com/image-url.jpg\"]").'</a>" : '';

    Using actual icons:

    $facebook = ( $facebook == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"fa fa-facebook-square\" aria-hidden=\"true\"></i></a>" : '';

    Hope this helps.

    August 25, 2016 at 9:28 am #1146649
    necxelos
    Participant

    a) Please don’t avoid this one, thank You 🙂 How to incorporate code for placing social buttons somewhere else (for example between featured image and title – in both excerpt and single article of course) into Rad’s code that generates properly working social buttons?

    d) I’ll focus on the shortcode version only because everything else works. So in the shortcode version I only get “.do_shortcode(‘[x_image src=”http://sites.com/image-url.jpg”%5D&#8217;).” text on my front-end instead of an image. Of course I changed URL to real one and changed ” to ‘ in shortcode to avoid the error.

    August 25, 2016 at 4:55 pm #1147275
    Rad
    Moderator

    Hi there,

    a) What you need is just this line and place it anywhere on the templates.

    <?php echo do_shortcode('[share_custom title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" email="true"]'); ?>

    Example, between featured image and title.

    1. Edit the content.php and all other post format templates templates (eg. content-audio.php, content-gallery.php, and more ) from \wp-content\themes\x\framework\views\{SELECTED STACK}\
    2. You can copy them to your child theme (eg. \wp-content\themes\x-child\framework\views\{SELECTED STACK}\ )
    3. Then add the sharing code like this,

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-featured">
    <?php x_featured_image(); ?>
  </div>

<!-- AFTER FEATURED IMAGE -->

<?php echo do_shortcode('[share_custom title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" email="true"]'); ?>

<!-- BEFORE TITLE -->

  <div class="entry-wrap">
    <?php x_get_view( 'integrity', '_content', 'post-header' ); ?>
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
  <?php x_get_view( 'integrity', '_content', 'post-footer' ); ?>
</article>

    d) How about just standard HTML image? do_shortcode() requires processing power, for efficiency and performance, it should be used only when really needed. But if you insist, please try cs_image instead of x_image.

    Thanks!

    August 25, 2016 at 7:42 pm #1147377
    necxelos
    Participant

    a) It works, but:
    – If I will only use blog posts (AKA articles) I only need to input this code inside content.php and leave other content-ish files alone, right?
    – I’ve got 2 social bars now. At the bottom (old) and (new one) between my featured image and article title. I assume that I need to comment those 2 lines from functions.php code:

    //add_action('the_content', 'sharing_buttons', 99999);
//add_action('the_excerpt', 'sharing_buttons', 99999);

    Correct?

    d) I will stick to HTML IMG on my site as You suggest.

    The shortcode is just a riddle that keeps me sleepless, because it should work but it doesn’t. Neither of: image x_image or cs_image seem to work btw. with same effect: text of a shortcode appearing insetad of an image. It’s just like shortcode is unrecognized while inside this part of code.

    Thanks again for Your patience, You and Lely are the best 🙂

    August 25, 2016 at 10:49 pm #1147713
    Paul R
    Moderator

    Hi,

    a) You can add a conditional statement to your code to enable it only in posts page.

    eg.

    
function sharing_buttons( $content ) {
       if(is_singular('post')) {
               return $content.do_shortcode('[share_custom title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" email="true"]');
       }
}

    d) Make sure to wrap your code in php tags <?php ?>.

    eg.

    
<?php echo do_shortcode('[x_image src="http://sites.com/image-url.jpg"]'); ?>

    Hope that helps.

    August 26, 2016 at 7:09 pm #1148925
    necxelos
    Participant

    a) No, no, no, You got me completely wrong. Let me rephrase this one (didn’t think my english is THAT rusty):

    You said that to place Social Sharing Buttons somewhere else then at the end of a post I need to use provided shortcode in-between certain div’s in content files (content.php, content-gallery.php, etc.).

    I said that I only plan to use posts/articles (plural) which means I won’t need Portfolio, Gallery, etc. But I still need those buttons visible both on single article page and excerpt pages (AKA blog and archive). So again: in this situation I only need to place the shortcode inside content.php file and not inside any other content-ish files right? Or do I need to edit all those content-ish files anyway?

    d) I did wrap that up inside php brackets, exactly as in Your last post (using either cs_image, x_image or just image). If that’s any indication for You, when I inspect this part (the div this code reside in) using FireBug this whole php-do-shortcode part is greyed out. I start to think this shortcode is only meant to be used inside articles/posts (where it works properly)…

    August 26, 2016 at 11:14 pm #1149266
    Rad
    Moderator

    Hi there,

    a) Yes, add the code to content.php and remove the code that hooks the sharing button to the_content and the_excerpt. And you can edit other content templates if you wish.

    b) It can be used anywhere, would you mind providing a screenshot of how you added it? Or maybe provide the exact file where it’s added.

    Thanks!

    August 27, 2016 at 8:37 am #1149625
    necxelos
    Participant

    a) Awesome, thanks 🙂

    d) Your code with shortcode edition is the only thing I got there for now. Here’s all of it (whole functions.php):

    <?php
// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================
// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================
// Enqueue Parent Stylesheet
// =============================================================================
add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );
// Additional Functions
// =============================================================================
//add_action('the_content', 'sharing_buttons', 99999);
//add_action('the_excerpt', 'sharing_buttons', 99999);
function sharing_buttons( $content ) {
return $content.do_shortcode('[share_custom title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"');
}
add_shortcode( 'share_custom', 'share_custom' );
function share_custom ( $atts ) {
extract( shortcode_atts( array(
'id'          => '',
'class'       => '',
'style'       => '',
'title'       => '',
'share_title' => '',
'facebook'    => '',
'twitter'     => '',
'google_plus' => '',
'linkedin'    => '',
'pinterest'   => '',
'reddit'      => '',
'email'       => '',
'email_subject' => ''
), $atts, 'x_share' ) );
$share_url        = urlencode( get_permalink() );
$share_url2       = get_permalink();
$share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( get_the_title() );
$share_source     = urlencode( get_bloginfo( 'name' ) );
$share_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
$share_image      = ( function_exists( 'x_get_featured_image_with_fallback_url' ) ) ? urlencode( x_get_featured_image_with_fallback_url() ) : urlencode( $share_image_info[0] );
if ( $linkedin    == 'true' ) {
$share_content    = urlencode( cs_get_raw_excerpt() );
}
$tooltip_attr = cs_generate_data_attributes_extra( 'tooltip', 'hover', 'bottom' );
$id          = ( $id          != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class       = ( $class       != ''     ) ? 'x-entry-share ' . esc_attr( $class ) : 'x-entry-share';
$style       = ( $style       != ''     ) ? 'style="' . $style . '"' : '';
$title       = ( $title       != ''     ) ? $title : __( 'Share this Post', 'cornerstone' );
$facebook    = ( $facebook    == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><?php echo do_shortcode('[x_image src=\"http://sites.com/image-url.jpg\"]'); ?></a>" : '';
$twitter     = ( $twitter     == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Twitter', 'cornerstone' ) . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i></a>" : '';
$google_plus = ( $google_plus == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Google+', 'cornerstone' ) . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i></a>" : '';
$linkedin    = ( $linkedin    == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on LinkedIn', 'cornerstone' ) . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&url={$share_url}&title={$share_title}&summary={$share_content}&source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin-square\" data-x-icon=\"\"></i></a>" : '';
$pinterest   = ( $pinterest   == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Pinterest', 'cornerstone' ) . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&media={$share_image}&description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest-square\" data-x-icon=\"\"></i></a>" : '';
$reddit      = ( $reddit      == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Reddit', 'cornerstone' ) . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit-square\" data-x-icon=\"\"></i></a>" : '';
$email_subject = ( $email_subject != '' ) ? esc_attr( $email_subject ) : __( 'Hey, thought you might enjoy this! Check it out when you have a chance:', 'cornerstone' );
$mail_to     = esc_url( "mailto:?subject=" . get_the_title() . "&body=" . $email_subject . " " . get_permalink() . "" );
$email       = ( $email       == 'true' ) ? "<a href=\"{$mail_to}\" {$tooltip_attr} class=\"x-share email\" title=\"" . __( 'Share via Email', 'cornerstone' ) . "\"><span><i class=\"x-icon-envelope-square\" data-x-icon=\"\"></i></span></a>" : '';
$output = "<div {$id} class=\"{$class}\" {$style}>"
. '<p>' . $title . '</p>'
. '<div class="x-share-options">'
. $facebook . $twitter . $google_plus . $linkedin . $pinterest . $reddit . $email
. '</div>'
. '</div>';
return $output;
}

    Of course I use my localhost image URL (which I tested and it works elsewhere on the site), not the fake one here.

    August 27, 2016 at 2:52 pm #1149867
    Rad
    Moderator

    Hi there,

    Please change this line,

    $facebook = ( $facebook == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><?php echo do_shortcode('[x_image src=\"http://sites.com/image-url.jpg\"]'); ?></a>" : '';

    to this

    $facebook = ( $facebook == 'true' ) ? "<a href=\"{$share_url2}\" {$tooltip_attr} class=\"x-share\" title=\"" . __( 'Share on Facebook', 'cornerstone' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\">".do_shortcode('[x_image src=\"http://sites.com/image-url.jpg\"]')."</a>" : '';

    Thanks!

    August 27, 2016 at 3:25 pm #1149891
    necxelos
    Participant

    YES!! I will sleep again 🙂

    This time I got “broken image” icon so I knew that shortcode itself is finally working, just something else was wrong. So after few trial/error cycles I stripped this part of Your code:
    ".do_shortcode('[x_image src=\"http://sites.com/image-url.jpg\"]')."</a>" : '';
    to this:
    ".do_shortcode('[x_image src="http://sites.com/image-url.jpg"]')."</a>" : '';
    And it totally works now 🙂

    Awesome thanks Rad, I hate when something doesn’t work for unknown reason, and now it no longer haunts me 🙂

    August 27, 2016 at 10:41 pm #1150147
    Rue Nel
    Moderator

    Hello There,

    You’re welcome! We’re happy to help you out.
    If you need anything else we can help you with, don’t hesitate to open another thread.

    Best Regards.

  • Author
    Posts
1 2
  • <script> jQuery(function($){ $("#no-reply-1011339 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>