How to add javascript to html sidebar component

Joey Champion Posted in General Discussion 2 years ago

I need some help please.
My website, www.odd.news aggrigates news stories from around the world.

I need to add this code to the html sidebar...

<div id="flockler-embed-18619d2d4e00e945f20bf416d33fe5bb"></div>
<script src="https://plugins.flockler.com/embed/185f01457e00f798c663ff6ed8cede9a/18619d2d4e00e945f20bf416d33fe5bb" async></script>

I don't know how to do it because everytime I add it ,the javascript gets removed from the html sidebar component.
I installed the custom js/css component but I am clueless as to how to use it with the required code that I listed above.

Please help.
Thanks.

Replies
German Michael Zülsdorff Replied 2 years ago

Yes,
it would be ideal if they'd offer a way to customize the layout of your incoming ads in advance. Because otherwise your site would need to do some complex postprocessing to make them fit.

us Tom Raycove Replied 2 years ago

Thank you for your reply Michael

Do you think its simply a matter of resizing the ad images and excluding the width/height tags from their script?

German Michael Zülsdorff Replied 2 years ago

Tom,
the problem I see is their usage of fixed image dimensions. Especially the width would most likely exceed the available space of the sidebar and the middle column.

<img src="https://serve.disruptedlogic.com/www/images/8b20aace5b50f40da7466dc54dfc94a3.jpg" alt="" title="" width="506" height="405" border="0">

us Tom Raycove Replied 2 years ago

p.s. You can see the ad banners (all 3 types) working here: https://serve.disruptedlogic.com/test.html
This shows the Revive server is working.

us Tom Raycove Replied 2 years ago

Hello - I am new to the forum. I have been reading everything I can find and doing my best to learn.
Joey's post is of interest and I was able to apply and replicate with success. However, my goal is to use the Revive Ad Server to send ads to the HTMLSiderbar. I have tried to do so but have not had any luck. I am using the current install package of OSSN along with HTMLSidebar and CustomsCSS/JS.

Revive gives me 3 choices for code insertions. #1 - Asynchronous JS Tag, #2 Javascript Tag, and #3 iFrame Tag.
I have tried combinations and variations of all 3 and have had no luck. Here are the 3 sets of codes:

1-Asyncrhonous:

<!-- Revive Adserver Asynchronous JS Tag - Generated with Revive Adserver v5.4.1 -->
<ins data-revive-zoneid="1" data-revive-id="173a5546de793b59e08d31acb0c3dae5"></ins>
<script async src="//serve.disruptedlogic.com/www/delivery/asyncjs.php"></script>

2 - Javascript

<!-- Revive Adserver Javascript Tag - Generated with Revive Adserver v5.4.1 -->
<script type='text/javascript'><!--//<![CDATA[
   var m3_u = (location.protocol=='https:'?'https://serve.disruptedlogic.com/www/delivery/ajs.php':'http://serve.disruptedlogic.com/www/delivery/ajs.php');
   var m3_r = Math.floor(Math.random()*99999999999);
   if (!document.MAX_used) document.MAX_used = ',';
   document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
   document.write ("?zoneid=1");
   document.write ('&cb=' + m3_r);
   if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
   document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
   document.write ("&loc=" + escape(window.location));
   if (document.referrer) document.write ("&referer=" + escape(document.referrer));
   if (document.context) document.write ("&context=" + escape(document.context));
   document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='https://serve.disruptedlogic.com/www/delivery/ck.php?n=a067b463&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='https://serve.disruptedlogic.com/www/delivery/avw.php?zoneid=1&cb=INSERT_RANDOM_NUMBER_HERE&n=a067b463' border='0' alt='' /></a></noscript>

3-iFrame

<!-- Revive Adserver iFrame Tag - Generated with Revive Adserver v5.4.1 -->
<iframe id='a5a3aa7d' name='a5a3aa7d' src='https://serve.disruptedlogic.com/www/delivery/afr.php?zoneid=1&cb=INSERT_RANDOM_NUMBER_HERE' frameborder='0' scrolling='no' width='506' height='405' allow='autoplay'><a href='https://serve.disruptedlogic.com/www/delivery/ck.php?n=a132b8e4&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='https://serve.disruptedlogic.com/www/delivery/avw.php?zoneid=1&cb=INSERT_RANDOM_NUMBER_HERE&n=a132b8e4' border='0' alt='' /></a></iframe>

Thank you very much in advance for any help or suggestions on how to get this to work. I am not a programmer, but will give it an honest try. If we are able to get this working, I'd be very happy to post a video tutorial so that others may follow.
Tom

in Tom Ingram Replied 2 years ago

This article is really amazing. Thanks for the sharing.

eTenet Portal

us Joey Champion Replied 2 years ago

EXTRORDINARY!!!Wow, sir, you are AMAZING!
It works. Not just well, but beautifully.
Thank you, thank you.
You are exceptional!enter image description here

German Michael Zülsdorff Replied 2 years ago

Oh yes, so let me try to explain this oddity. :)

Flockly wants you to add a unique anchor, in your case
<div id="flockler-embed-18619d2d4e00e945f20bf416d33fe5bb"></div>
somewhere inside of your html. Then, the script is searching for that anchor in order to insert the content below later on.

The HtmlSidebar component adds the anchor in the right sidebar correctly, but in fact it adds a duplicate on top of the newsfeed to be used in mobile view whenever the Center right column on smartphones option is enabled. Thus, it's there, but programmed to be invisible by a css rule on large displays.

Nevertheless the script finds this anchor, and because it's sequentially the first one when the page gets rendered, Flocky places the content below the newsfeed anchor and not the sidebar anchor.

Actually, the HtmlSidebar component isn't prepared to handle special cases like that, it was simply meant to display some html - either in the right or in the middle column. Hence, to make Flockly work, we need to replace the former script by this one:

$(window).on('load', function () {
  if (window.innerWidth >=992) {
    $('.newsfeed-middle-top #flockler-embed-18619d2d4e00e945f20bf416d33fe5bb').remove();
  }
  var tag = document.createElement("script");
  tag.src = "https://plugins.flockler.com/embed/185f01457e00f798c663ff6ed8cede9a/18619d2d4e00e945f20bf416d33fe5bb";
  document.getElementsByTagName("head")[0].appendChild(tag);
});

Window.onload waits until the page is rendered completely, then the window width gets calculated, and if larger than 992 pixel the anchor in the middle column will be removed. Now that there's only one remaining anchor in the right column, the script can address it correctly.

us Joey Champion Replied 2 years ago

Ok, your right Z-man... what you instructed does work. Only on mobile devices or screens that are vertical. It displays just above the newsfeed fine. On pc's and widescreens, nothing is displayed. Odd, but I can live with that.
Thank you.

us Joey Champion Replied 2 years ago

Thank Z-man. I did exactly as you stated. It will not load. I also disabled and then enabled cache. Its still blank.