Jump to content

Looking for a way to insert code into blog post excerpts

Go to solution Solved by tuanphan,

Recommended Posts

As a style blogger, I love the idea of quick shoppable links, so I want to find a way to insert code after my blog post excerpts, OR ideally, be able to just paste my code (it's a javascript code) directly into the excerpt itself in order to display a "shop the post" widget carousel of affiliate products from my LTK. (I pasted the code into one of my blog post excerpts here for reference: https://www.neutrallynicole.com/blog-ltk — obviously it shows up as text but I would like it to show the actual widget) I've attached screenshots of what I have now vs. what I would like to to look like using custom code. My site is currently on 7.0 but I will be switching to 7.1 within the next month.

I see a lot of bloggers on WP that have this sort of plugin and I can't find a way to replicate it for Squarespace so I would love to find someone who is capable of creating this sort of function for me (I will pay you of course!). Thanks so much in advance! 🙂 

Screenshot 2024-02-09 at 9.23.53 AM.png

Screenshot 2024-02-09 at 9.24.55 AM.png

Edited by NicoleN
Link to comment
  • Replies 8
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

On 2/11/2024 at 7:16 AM, tuanphan said:

Can you paste widget code here + share link to your site?

Sure!

This is the link to my site: https://www.neutrallynicole.com. I was testing the idea on a separate non-linked blog here: https://www.neutrallynicole.com/blog-ltk

Here is the widget code:

<div class="shopthepost-widget" data-widget-id="5042831"><script type="text/javascript">!function(w,i,d,g,e,t){d.getElementById(i)||(element=d.createElement(t),element.id=i,element.src="https://widgets.rewardstyle.com"+e,d.body.appendChild(element)),w.hasOwnProperty(g)===!0&&"complete"===d.readyState&&w[g].init()}(window,"shopthepost-script",document,"__stp","/js/shopthepost.js","script")</script><div class="rs-adblock"><img src="https://assets.rewardstyle.com/production/35d334331b834e6e41e4f03813372a832b67c146/images/search/350.gif" onerror='this.parentNode.innerHTML="Disable your ad blocking software to view this content."' style="width: 15px; height: 15px"><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>

Link to comment

First, to make it works, you can use this code to bottom of Code Injection > Footer

<script>
$(document).ready(function(){
  $(".summary-excerpt.summary-excerpt-only p").each(function(){
    $(this).html($(this).text());
  });
});
</script>

To make it show more images, try this code to Custom CSS box

/* Slide image in excerpt */
.stp-product {
    width: 80px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/23/2024 at 11:33 PM, tuanphan said:

First, to make it works, you can use this code to bottom of Code Injection > Footer

<script>
$(document).ready(function(){
  $(".summary-excerpt.summary-excerpt-only p").each(function(){
    $(this).html($(this).text());
  });
});
</script>

To make it show more images, try this code to Custom CSS box

/* Slide image in excerpt */
.stp-product {
    width: 80px !important;
}

 

The code worked for 7.0, but is there a way to make this work for 7.1? I'm going to switch my site to 7.1 next month and didn't realize that the code wouldn't work for the new version.

Here's the link to a new 7.1 demo site where I tried to test it: https://primrose-raccoon-9ycp.squarespace.com/?password=demo

Apologies!

Link to comment
On 3/2/2024 at 12:09 AM, tuanphan said:

Add this line to top of Code Injection Footer code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Perfect! Thanks again Tuan! You're the best! 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.