Can you put your excerpt under your Blog Post Page Title?

Site URL: https://www.rendyreviews.com/movie-reviews/mortal-kombat-review

Hi,

I wanted to know if there's a way I can inject CSS to put like an excerpt under the blog post title before it proceeds my reviews in order to make it look professional. 

Make it look like similar to this in some way.

On 5/6/2021 at 9:31 AM, Rendy said:

Site URL: https://www.rendyreviews.com/movie-reviews/mortal-kombat-review

Hi,

I wanted to know if there's a way I can inject CSS to put like an excerpt under the blog post title before it proceeds my reviews in order to make it look professional. 

Make it look like similar to this in some way.

You can take advantage of the meta tag to get the excerpt content, paste this into Settings->Advanced->Code Injection

<script>
document.addEventListener('DOMContentLoaded', function() {
    var element = document.querySelector('.BlogItem-title');
  	if (!element) {
    	return;
    }
    var newElement = document.createElement('h2');
    newElement.style.order = 2;
    newElement.className = "BlogItem-excerpt";
    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");
    var elementParent = element.parentNode;

    elementParent.insertBefore(newElement, element.nextSibling);
});
</script>

Target it as class name BlogItem-excerpt to style it. Btw, you made a great job with the blog, I hardly notice it was created in Squarespace

On 5/9/2021 at 11:03 PM, bangank36 said:

<script> document.addEventListener('DOMContentLoaded', function() { var element = document.querySelector('.BlogItem-title'); if (!element) { return; } var newElement = document.createElement('h2'); newElement.style.order = 2; newElement.className = "BlogItem-excerpt"; newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content"); var elementParent = element.parentNode; elementParent.insertBefore(newElement, element.nextSibling); }); </script>

Oh my gosh, thank you.

Now additional question. Is there a way I can also add my share code to the under the header/excerpt instead of having to inject it into my reviews via the code block.

This is the code:

Thank you.

<!-- ShareThis BEGIN --><div class="sharethis-inline-share-buttons"></div><!-- ShareThis END -->

Hey @Beyondspace -- I can't get this code to work on 7.1 / Fluid Engine. I've tried in Header and Footer Code Injection - still no luck. Do you have an update?

Site URL: systms.club/article/quadrant-method

On 2/23/2023 at 1:56 AM, 99saintclaire said:

- I can't get this code to work on 7.1 / Fluid Engine. I've tried in Header and Footer Code Injection - still no luck. Do you have an update?

Site URL: systms.club/article/quadrant-method

Try this code with new class name

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var element = document.querySelector('.blog-item-title');
  	if (!element) {
    	return;
    }
    var newElement = document.createElement('h2');
    newElement.style.order = 2;
    newElement.className = "blog-item-excerpt";
    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");
    var elementParent = element.parentNode;

    elementParent.insertBefore(newElement, element.nextSibling);
});
</script>

@Beyondspace : @tuanphan : Hello!  Thank You for providing an answer to this question.  I am implementing it on a client site.  I hope you don't mind a follow-up question as I am far from a Javascript expert.  It looks like the script is pulling the excerpt content but not the formatting.  For example, in the screenshots below when I place a line break in the excerpt, the line break is not pulled over with the script.  All the text is captured in HTML on the same line.  How would I amend the script for line breaks to be captured?

There also appears to be a character count restriction.  Can that be lifted?

Any help you can provided would be appreciated! 😃

SCREENSHOT 1 : Excerpt

SCREENSHOT 2 : HTML with script executed

On 2/26/2023 at 2:15 AM, tuanphan said:

Try this code with new class name

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var element = document.querySelector('.blog-item-title');
  	if (!element) {
    	return;
    }
    var newElement = document.createElement('h2');
    newElement.style.order = 2;
    newElement.className = "blog-item-excerpt";
    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");
    var elementParent = element.parentNode;

    elementParent.insertBefore(newElement, element.nextSibling);
});
</script>

 

Hey @tuanphan is it possible to style the font colour & size of the excerpt showing on blog post page from this? I am using Will Myers code (https://www.will-myers.com/articles/blog-post-banner-image-update) to display the featured image on blog post page, now with the excerpt on top I need to change the font colour to white for legibility:

On 12/19/2023 at 5:02 PM, Rickshaw said:

Hey @tuanphan is it possible to style the font colour & size of the excerpt showing on blog post page from this? I am using Will Myers code (https://www.will-myers.com/articles/blog-post-banner-image-update) to display the featured image on blog post page, now with the excerpt on top I need to change the font colour to white for legibility:

 

Can you share link to a blog? I can check easier

@tuanphan I've used this code to add the excerpt as birth/death dates (thank you!), but when I add SEO descriptions to the blog posts, it's overwriting the blog excerpt with the meta description:

https://www.theartistlives.org/artists/alan-borror

Is there any way I can differentiate? I want the excerpt to show just the dates from the excerpt, but I want to add a totally different SEO description.

On 4/18/2024 at 9:01 PM, AC-TAL said:

@tuanphan I've used this code to add the excerpt as birth/death dates (thank you!), but when I add SEO descriptions to the blog posts, it's overwriting the blog excerpt with the meta description:

https://www.theartistlives.org/artists/alan-borror

Is there any way I can differentiate? I want the excerpt to show just the dates from the excerpt, but I want to add a totally different SEO description.

I see some code in this thread. Which code did you use?

And you mean this text?

On 4/20/2024 at 10:14 AM, tuanphan said:

I see some code in this thread. Which code did you use?

And you mean this text?

 

@tuanphan Yes, in the blog post settings the excerpt reads "1934 - 2022", and the SEO description reads "Test".

I used this code:

Quote

 <script> document.addEventListener('DOMContentLoaded', function() {

    var element = document.querySelector('.blog-item-title');

   if (!element) {

     return;

    }

    var newElement = document.createElement('h4');

    newElement.style.order = 2;

    newElement.className = "blog-item-excerpt";

    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");

    var elementParent = element.parentNode;

 

    elementParent.insertBefore(newElement, element.nextSibling);

});

</script>

On 4/20/2024 at 7:51 PM, AC-TAL said:

@tuanphan Yes, I'm the settings the excerpt reads "1934 - 2022", and the SEO description reads "Test".

I used this code:

 

Currently, we do not have the excerpt information with the above codes. It is required to have the custom code to achieve it

1 hour ago, Beyondspace said:

Currently, we do not have the excerpt information with the above codes. It is required to have the custom code to achieve it

I'm sorry, I don't understand what you need from me here.

@tuanphan Sorry to be a pest. Please could you help me on this one? 🙂 I don't know how to ensure that what pulls through is the Excerpt instead of the SEO Description so I don't want to add any SEO yet.

On 4/21/2024 at 3:43 PM, Beyondspace said:

Currently, we do not have the excerpt information with the above codes. It is required to have the custom code to achieve it

@Beyondspace Do you have any advice?

Hi. I am in the same situation as @AC-TAL. I am using the code from Will Myers (https://www.will-myers.com/articles/adding-a-banner-image-to-a-blog-in-squarespace-71), but after adding the SEO description to my blog post, the excerpt is no longer used.

@Beyondspace you said

Quote

Currently, we do not have the excerpt information with the above codes. It is required to have the custom code to achieve it

I have tried injecting the custom code mentioned above before Will's one, but it does not work either. It only pulls the SEO description and not the excerpt.
Is there some documentation that can help me get this data from the DOM? Thank you in advance.

For reference, here is the link to the blog post:

https://www.christinemthomas.com/blog/debunking-diet-myths

Excerpt: Ever wondered why most diets fail? Discover the top 5 reasons diets don’t work and the myths that might be holding you back.

SEO Description: Explore the top 5 reasons why most diets fail and uncover the myths that keep you stuck in a cycle of dieting. Learn how common diet misconceptions impact our weight loss journey and discover practical insights for sustainable health. Read my latest blog post and get exclusive updates on my upcoming book, ‘The Elephant in the Room: Why Women Are Worth More Than They Weigh'.

Thanks.