Custom Code

Browse coded solutions using simple css and javascript

1.0. Coded Solutions

1.1. Shorten Long Text

If you are finding that the some bodies of text (eg. Captions) are longer than desired, you can add a simple bit of custom css to limit the number of lines and help maintain constency across the posts. You can add this CSS directly into your custom code section.

<style>
/* FeedSpring Short Text CSS */
.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;  /* Ensures text wraps and doesn't stay in a single line */
}
</style>

1.2. Add an expand / show-more button

Not all reviews are made the same, some are just a few words and others might be a paragraph. With the following script, you can add a button to your google review post that lets the user expand the content making it more readable.

This script enhances the feed's posts by adding a "Read More" button for posts with overflowing content, allowing users to expand and collapse the content dynamically.

<style>
.your-text-class {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
</style>

<script>
document.addEventListener('feedspring:render-complete', () => {
  const posts = document.querySelectorAll('[feedspring="post"]')
  const selectorReadMoreButton = '.your-show-more-button'

  const buttonExpandText = 'Hide'

  posts.forEach((post) => {
    const review = post.querySelector('[feed-field="review"]')
      if (review && review.scrollHeight > review.clientHeight) {
        const button = post.querySelector(selectorReadMoreButton)

        if (button) {
          button.style.setProperty('display', '-webkit-box')

          button.addEventListener('click', () => {
            if (review.scrollHeight > review.clientHeight) {
              review.style.setProperty('-webkit-line-clamp', 'inherit')
              button.setAttribute('text', button.innerText)
              button.innerText = buttonExpandText
            } else {
              review.style.removeProperty('-webkit-line-clamp')
              button.innerText = button.getAttribute('text')
            }
          })
        }
     }
  })
}, { once: true })
</script>