My embedded Social Media Feed stopped working all of a sudden

Design help Custom code
1

I’ve used Juicer, a third-party social media feed, to display my company’s Instagram and Facebook feeds. I had this as an embed code. It’s worked perfectly for months. But all of a sudden on Friday, the feed stopped displaying. I contacted Juicer support and they say nothing is wrong with the actual code or anything on their end. I was wondering if something was updated on Webflow’s side last week that could’ve caused this?

The embed code is below. And this is the site that’s supposed to have the feed: www.ncounter.com (the feed is supposed to show up in the orange “Stay Connected!” section underneath the Facebook and Instagram icons.

https://preview.webflow.com/preview/ncounter-website?preview=81edb35ee758a2c2ead0993ad3c82318

<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="juicer-feed" data-feed-id="ncounteraz"></ul>

<style>

.juicer-feed h1.referral {
display: none;
}

.juicer-feed a.j-read-more {
color: #cb5828;
}

.juicer-feed.modern li.feed-item {
  background: white;
  border: 0px solid #FFFFFF;
}

.juicer-feed.modern .j-message {
  color: black;
  font-family: 'Gotham', sans-serif; 
}

.j-poster h3 { color: white; }

.juicer-feed.modern .j-poster {
  padding: 14px 0 12px;
  display: none;
}

.juicer-feed.modern .j-text {
  padding: 15px 15px;
}

ul.juicer-feed .j-meta a {
  font-size: 12px;
  font-weight: bold;
  color: #cb5828;
}

ul.juicer-feed .j-meta .comment {
  display: none;

}

.juicer-feed .j-meta {
  border-top: 0px solid #FFFFFF;
  padding-top: 0px;
  
}

ul.juicer-feed .j-paginate {
   display: none;
}

.juicer-feed .j-meta a.j-social {
font-weight: normal;
}
</style>
2

I saw on the console that I’m getting this error “Uncaught ReferenceError: Backbone is not defined at embed.js:5". Does that have to do with Juicer’s code or is it one Webflow’s end?

56%20AM
56%20AM1182×83 11.2 KB

3

Hi @kbarrett

Can you share your site’s preview link - you can find it in project settings along the top. One reason may be a change in how Webflow deal with custom code, as this has helped resolve a number of issues recently with custom code/embed:

4

Here’s the read-only link: https://preview.webflow.com/preview/ncounter-website?preview=81edb35ee758a2c2ead0993ad3c82318

7

So… might have found the solution, but still don’t know what the problem was. I recently added a line of code in the header of my entire site that had a Mailchimp pop-up signup form. I just now removed it and the social media feed is showing up now. I don’t understand why it wouldn’t allow the html embed code to display.

8

Hmm, all I can think of is some code clashing/cancelling the other out. Are you able to use the mailchimp code elsewhere, like an on-page embed?

9

What is the exact code you removed?

10

Yes I moved the code to an HTML embed on the homepage for now. The reason I had it in the header of the entire site was so it would pop-up after 20 seconds no matter what page you’re on in the site. I really wanted no less than 20 seconds so it wouldn’t be intrusive, but putting it on only one page wouldn’t work if the user left that page before 20 seconds. Right now it is just on the homepage and will pop-up after 5 seconds, which is alright, but I’d rather have 20 seconds.

I got it from mailchimp’s pop-up form embed code. Here:
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us14.list-manage.com","uuid":"231cc328764995318d7d8c2b8","lid":"cbf18f73d4"}) })</script>

So it seems that ^this code right here, when placed in the header of the entire site, will cancel out the code for my social media feed.

11

I noticed your social share code requires jQuery, it might be due to the recent jQuery upgrade to 3.3.1 on Webflow, which your third-party script might not support.

12

That’s a good thought, but when I contacted Juicer customer support they suggested changing the javascript file to their “no jquery” one, but it still didn’t work. It’s working now after I removed the mailchimp script from the header, so it seems that Juicer’s jquery is working fine.

13

So I found a solution. I placed BOTH javascript codes in the header of the entire site, and had just the UL code that is the actual social media feed in the HTML embed on the homepage. They both worked the way I wanted them to!

1 Like
15

Hey,
Don’t worry, there might be any technical glitch out there. I was also been through the same issue and got stuck but I found a third party tool Tagembed , it is a social media aggregator named as Tagembed, which resolved my issue. It is coding-free and responsive and you can use it free for any of your website. You can fetch all social media feeds on website with this.

3 Likes
16

Yeah, it worked for me.
Thank you @Caroline_Forbes for the easiest solution.