Implement JS widget

[Syswatch]

Hello,

Can anyone tell my how I can implement this JS script to my shop ?

http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html

 

Im using last version of PS.

 

Thanks...

[NemoPS]

WHere do you want to add the widget?

For the head part, look into header.tpl of your theme's folder, inside the >head> portion. the widget can be added anywhere, you can user header.tpl itself right after the opening body tag if it's supposed to be on every page with absolute positioning

[vekia]

if you arent familiar with code modifications, you can use free extension like contentbox or html box free

just install this addon, select "header" hook and to the right hand side block paste your code

voila

[NemoPS]

@vekia It seems he needs to add the code to 2 locations, so I guess the free version of the module doesn't allow that, correct?

[vekia]

guide says that we have to include jquery library. so i think that it's not necessary because jquery is already included with core functions so we have to use only this:
 

<!--Floating Facebook Widget by www.TheBlogWidgets.com START-->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><!--Brought to you by www.TheBlogWidgets.com--><div class="theblogwidgets" style="">
<!--Brought to you by http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html-->'>http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--><div>'>http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html-->'>http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--><div>
<!-- http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html-->'>http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftheblogwidgets&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by www.TheBlogWidgets.com--></iframe><!--Brought to you by www.TheBlogWidgets.com--><span><!--Brought to you by www.TheBlogWidgets.com--><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://morganandmen.com">Morgan&Men SEO</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html">Widget</a></center>
</span></div>
</div>
<!--Floating Facebook Widget by www.TheBlogWidgets.com END-->

one module, one position will be enough

[NemoPS]

Aw, it's true I didn't even read what had to be included

[Syswatch]

Thanks guys... Just got it working with the free edition og HTMLbox..