Docs

[Daniel]

Hello,

I’ve followed the info on these two support threads on adding a social share feature to the bottom of all posts, but not any pages, successfully:

https://community.theme.co/forums/topic/social-sharing-for-posts-and-pages/page/2/
https://community.theme.co/forums/topic/share-buttons-on-all-blog-post-formats/page/2/

However, I’ve found that using the functions.php method of adding the below code to the child theme’s functions.php file only shows the code on the individual post page…and not on the post list (this is an “archive” page, correct?) page, even though the customizer is set to show all post content.

Functions.php code:

add_action('x_before_the_content_end', function() {

	if(is_singular( 'post' ) || is_post_type_archive() ){
		echo do_shortcode('[share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" email="true"]');
	}
});

Alternatively, adding the below code to a custom content.php file in the child theme does show the share buttons on the post list page, as well as on the individual posts.

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

However, when the share function is used on the post list page, it previews and links back to the post list page and not the individual posts…despite the shortcode actually being located on the individual posts.

So using the functions.php method results in:

Post list page: no share buttons
Individual Post A: share buttons that link to A
Individual Post B: share buttons that link to B

Using the content.php method results in:

Post list page: share buttons shown at bottom of each individual post, but all link to post list page
Individual Post A: share buttons that link to A
Individual Post B: share buttons that link to B

Does that make sense?

Is there a way to have share icons on both the individual posts (that link, correctly to the individual posts) as well as the icons on the post list page (where the ‘full contents’ are displayed of individual posts) where each set of icons links to the individual posts (and not to the post list page)?

Thanks.

[Rad]

Hi there,

Thanks for writing in.

The code is meant for single post only, please change it to this

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

function sharing_buttons( $content ) {

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

}

There are many places to apply it, and it depends on your requirement. What you copied is just for global single page.

Hope this helps.

[Daniel]

Hi Rad,

Thanks for the reply and code!

It works to display the share buttons on the single post pages and excerpt/post list, but the URL issue remains.

To just use a specific example, clicking the icon to share on Facebook from an individual post page will result in a “snippet” of that specific post’s content, image, plus a direct link to the post.

But clicking the facebook icon on a post from the post list page (i.e., sharing from the ‘excerpt’ part of this function) does not result in a snippet of the individual post the ‘excerpt’ is for. Instead, it generates a snippet/image/link to the blog post list page itself (i.e. the blog’s description).

Here is a link to both examples so you can see it in the real world.

Post list page:
https://oztylerdistillery.com/updates/
Individual post:
https://oztylerdistillery.com/new-beer-well/

I think the first link (post list page) share icons should operate like the second link (individual post) so that people are always sharing and linking to the specific post, not the blog post list. Is this possible?

Thanks.

[Rad]

Hi there,

I checked the coding and it’s really intended that way for blog home page (one sharing only). The solution is adding custom code, please change the above code to this

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_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\" {$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>" : '';

  $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;

}

Hope this helps.

[Daniel]

Hello,

This is almost exactly what I needed and is definitely a huge help. Thank you!

The only part missing now is preventing the buttons from showing on Pages. Previously I could use

if(is_singular( 'post' ) || is_post_type_archive() )

before the do_shortcode line. However, now that seems to stop the (full) post content from being shown on the archive pages. What would be the proper way of preventing this function from running on anything other than the individual posts and their content displayed on the post list/archive page?

Thanks!

[Rad]

Hi there,

Sure, you can change this code,

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"]');

}

to this

function sharing_buttons( $content ) {

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

}

Cheers!

[Daniel]

Works perfectly.

Thanks very much for your help! Well beyond any other theme’s support and the main reason I keep buying X.

[Prasant Rai]

Your satisfaction is a great compliment for us. Feel free to ask us again. Have a great day! 🙂

[necxelos]

I found this topic by sheer luck and it may just be what I’m looking for. I have several important questions though (they are 100% on topic, so please don’t move it to new one – explanation on the bottom):

a) How to move social share buttons (created using the blog/archive wall of code version here) to other place in post? I mean for example above featured image or between featured image and post title?

b) I test (on the Daniel’s site which he linked here) that the sharing buttons indeed share exact post they are connected to instead of whole blog/archive page. This is as intended…
BUT
The link snippet in Browser (details inside screenshot I provide) suggest otherwise. Is it possible to fix that to show proper link that’s gonna be shared too?

c) Can we get rid of “Share This Post” text completely (to make space used a bit smaller – and button sumbols are iconic enough for everyone to know those are sharing buttons anyway).

d) Can we use our own images (jpgs) instead of currently used Font Awesome Icons for sharing symbols? I aim for a bit of artistic look on my site so I’d like to use my own (a bit deformed) symbols instead.

And one last request if I may. Could You please make this topic sticky (after answering my questions – to make it as complete knowledge base on the subject as possible)?

Issues with social sharing are probably the most commonly asked on Your entire forums, but for some reason all other topics I encountered are either incomplete, outdated or question isn’t really answered (providing code for single-post pages only, when user clearly asks for blog/archive pages code are the most common mistakes).

Please don’t consider this a QQ, I completely understand answering gazilion questions a day, may be tiresome. That’s why creating some kind of FAQ out of sticky forum questions (the ones with best/most detailed answers) or even a customization guide would save You guys lot of time, work (and stress) and save us (customers) a lot of searching and asking (and stress too) 🙂

Thank You and good day to You all 🙂

[Daniel]

Hello nexcelos,

Your point B is incorrect. While hovering over a sharing button from the archive page does display the URL of the archive page, when you actually click on the share button, the correct link is used in the sharing popup. This is tru for both clicking within the archive page or on the individual post page.

C) This text is part of the functions.php code:

share_custom title="Share this Post"

I’m sure you could remove it (or just put empty quote marks) and it would work fine.

I don’t know on the icon images, but I assume you could trace the functions and find where the images are pulled from. Then just upload new icons in the same folder location, but starting in your child theme’s base (you are making changes like this in a child theme, correct?).

[necxelos]

Hello Daniel

b) My point B is 100% correct. I never said wrong link is used. I said wrong link is presented in a browser snippet and it might create some confusion for the end user. Please read carefully, thank You 🙂

For better understanding I created comparison screenshot of the exact same post from Your site (one side of the screen is blog view, the other is single post view).

c) Sadly removing it does nothing (“Share this Post” text is a default and set like that somewhere else). So does leaving it completely empty (also takes default value from somewhere else).

d) As for Icon Images as I said, the icons used are Font Awesome Icons (which means they can’t be pulled out, they are basically a Font, not single images). If it was as easy as changing and image to another image I would never bother asking 🙂

Let’s wait for the X(Theme)-Men, I have faith in them 🙂

[Daniel]

Hmm. Odd, because I got it to work with:

share_custom title=" "

Note the space inside the quotes.

[necxelos]

There’s still empty line above Your buttons (In Your example with just space being there – You can easily locate it using FireBug), although I must admit it’s slightly thiner with just space being there, not letters.

Now if You don’t mind I’ll repost my questions to be on top (bottom technically, but whatever) and let’s wait for the X(Theme)-Men 🙂

[EDIT] Aaaand, I can’t do that (anti – double posting algorithm). Let’s hope they notice the right post…

Good Night to You all 🙂

[Rupok]

Hey Daniel,

If you need our assistance; would you summarize the current issue as we are a bit confused where you are stuck right now.

Cheers!

[necxelos]

It wasn’t Daniel. I added my own issues with the exact code provided by Rad. Please refer to this post (in this topic):

#1141990

Better screenshot is provided in post:

#1142106

Thank You 🙂

[Author]

Posts