How to Display Social Share Icons in Post Excerpts and Archive Pages?

Sparkling
1

To display social share icons on posts, pages or in widgets we are using the shortcode [apss-share counter=‘1’ total_counter=‘1’]

Ideally we would like to display the social share icons below the excerpt on post excerpt and archive pages (see attached screenshot.

On which files (single.php??? archive.php???) and where in the file the shortcode should be inserted?

2

Hi @supertrooper,

Thank you for your question.

You have to add it in the child theme file /template-parts/content.php on line number 52 and 60 below the following code.

the_excerpt();

Best Regards,
Movin

3

Hi Movin

We have copied content.php into the child theme and added the shortcode:

<?php echo do_shortcode("[apss-share counter=‘1’ total_counter=‘1’]"); ?>

You can see the inserted shortcode in the attached content.php screenshot.

Unfortunately the share icon block does not appear in the following pages:

https://focusingonwildlife.com/test-platform6/
https://focusingonwildlife.com/test-platform6/2017/03/

Please advise.

4

Since this fix wasn’t working in the child theme I decided to insert the shortcode directly into the theme file /template-parts/content.php.

This worked perfectly in both the top page with excerpts and also the archive page with excerpts (see attached screenshot). To finalize this issue I have 2 questions:

  1. How can I get the Social Share Icons and the “Read More” button on the same line?

  2. Why doesn’t the shortcode work in the child theme but only in the original theme file?

5

Hi Movin

The mistake I was making was to make the changes to a copy of content.php in the sparkling-child theme folder. After making the changes to a copy of content.php in the sub-folder wp-content/themes/sparkling-child/template-parts/, the Social Share Icons are now displaying below the excerpts in the top and archive pages.

The only issue now is to get the Social Share Icons and the “Read More” button on the same line (see screenshot above).

Hoping you can resolve this issue.

Please advise.

6

Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

7

Hi Movin

You can see the “disaligned” Social Share Icons and the “Read More” button on the link:

https://focusingonwildlife.com/test-platform6/

8

Hey there

in order to make social icons on the same line as read more button use this css code in appearance > customize > additional css:


/*social icon and read more button on the same line*/
.apss-social-share {
   position: absolute;
    display: -webkit-box;
}
9

Hi Movin

This fix worked perfectly.

Many thanks for the great support.

10

You are welcome :slight_smile:

Is there anything else or can o close this ticket?

Regards Colorlib support

11

Thanks for the great support.
Please close the ticket.

12

Thank you, you are welcome :slight_smile:

This case is closed