Code

Discussion on Super Sidebar

CreativeTier

CreativeTier supports this item

Supported

40 comments found.

When installing the plugin, Wordpress says there is nothing there to install.

This is a jQuery plugin, not a WordPress plugin. On CodeCanyon, WP plugins are in the “WordPress” section. This project is in the “JavaScript” section.

I can´t make it to work properly.

Please give me some advise.

For example in Facebook Share It only show me the index data, not the selected post of the blog.

link: http://www.jorgeborgognoni.com

Thanks

Hi. I have responded to the email that you have sent.

Like I have mentioned, the site is inaccessible to me, I cannot open it to see the problem.

I have asked in the email if you can send me a screenshot of the problem so that I can understand it better and try to replicate it on my end.

Also, please send me the JS settings that you are currently using.

I’ve send you what you ask for. Please give me a solution or my money back.

I have looked into it and the issue that you are reporting has nothing to do with the sidebar itself.

The way it works is the sidebar takes the URL of the current page and sends it to the different sharing services and they handle the popup window content and functionality.

For example, Facebook: the sidebar takes the URL of the page and sends it to the Facebook sharing service and Facebook handles the content of the popup window based on the URL provided.

The text shown there is the text that the Facebook generates from the URL provided. The sidebar does not have any control over it.

You can go to the Facebook Sharing Debugger page: https://developers.facebook.com/tools/debug/sharing

Input your URL: http://www.jorgeborgognoni.com/articulo.php?id=2

And see the “Link Preview” section, it looks like in the popup window.

And if you make a share post, the link will be to the proper page.

Again, I cannot control the text in the share window, that is something that Facebook generates.

Hello, Thanks for the good work you did on Super Sidebar. I have found working with social media platforms to be fraught with difficulties in the past. Yours was very simple and easy. I appreciate it.

I would like to know if you have any intention to include captcha for the forms/email functions in future updates. If not, can you suggest a simple solution that I might look into?

Thanks much, Jeff

Thank you, I am very happy to hear you like the sidebar and found it easy to work with.

The main focus of the project are the social buttons and they are the ones that I have spent the focus on developing.

The window forms I have added as a quick and useful utility for people that need the basic functionality of forms but I haven’t developed them to the extent of the buttons. For people that need more advanced form functionality, I thought other form specific plugins would be better, either free ones or premium.

I don’t have any plans of adding a captcha option but if people request this option and find it useful, I will make a note of it for a future update.

I know that the Google captcha called reCAPTCHA is probably the most used captcha option but I am have not worked with it and am not sure how easy or difficult it is to implement. Either way, you would need a bit of JavaScript knowledge to integrate it into the sidebar code.

Alternatively, you can search for a free jQuery form plugin that has captcha support and simply add the new HTML form code in the sidebar windows and style them with CSS as you need.

Let me know if you have any questions or need some help with it.

hi. this sharing buttons awoseme. can i add them horizantal under an image or text.

Hi. There is no default example for that but you can do it with a few CSS modifications. However, this works only when not using button labels. As having labels when the buttons are positioned horizontally requires animating the buttons when a label is opened.

A new update was implemented, version 2.1 is live:

  • Added a new setting called “subOpen” to control if subbars are opened on mouseover or on click.
  • Fixed a problem that was causing the old name of the setting “hideUnderWidth” to be used, called “hideUnder”, instead of the new name. Maintained backward compatibility for the old name.

hi, how many files is needed to make the plugin works? thank you

All of the needed files are included in the archive downloaded. The sidebar files include HTML, CSS and JS files.

thank you for your reply, but how many is my question.

At one time we could not agree on the use of your solution in your plugin. There was another wise guy, I want to see what you can do with him :)))))

https://www.webasyst.ru/store/plugin/shop/supersidebar/

Thanks for the report. I will send a DMCA takedown notice.

Hello, I would really like to be helped in implementing the Super Sidebar script, I swear that before contacting, I already tried to make it work in all ways on my page, I really need to have a call to whatsapp, it’s vital in this page, so I ask friends, please help me. My page is made in a landing page builder, so it has a bit dirty code. I already tried the instructions of the guide of yours, when I press F12 / console, I realize that there may be a conflict in jquery, I tried to delete the line but I still continue … if they can look at me I would be very grateful … The page is www.mooglass.com/whatsapp.html Thank you so much!

It is no problem, that is why support exists, to help people solve any issue that they have and make sure everything is functioning well.

I opened the page and looked over the source code (Ctrl+U). There is a problem with the JS build code that you have:

jQuery(".super-sidebar").superSidebar({
    // Main
    position: ["left", "center"],
    offset: [0, 0],
    buttonShape: "round",
    ...
});

You have copied this from the guide. The ”...” is not valid JS code, it is there only in the guide to mean that there are more settings below.

Copy all of the settings from one of the HTML example files and do not use ”...”.

You have also mentioned a conflict with jQuery and this is true. You have jQuery multiple times on the page and this creates a problem:

First time it is added on line 22, then on line 26, the sidebar JS file is added, which is a plugin code to jQuery. Then on the bottom of the page, jQuery is added again on line 551. This overrides the preview code, including the sidebar plugin code that was added and when you try to call the “superSidebar” function, it will give and error saying that the function does not exist.

The fix is simple and we just need to rearrange things around. First of all, remove the jQuery line from the ticker assets code, as it is not needed since you already have jQuery on the page:

<script src="super-sidebar/js/jquery-3.2.1.min.js" type="text/javascript"></script>

Second, take the sidebar JS file and move it and the bottom of the page, after your jQuery file is added:

<script src="super-sidebar/js/jquery.super-sidebar.min.js" type="text/javascript"></script>

I am not sure how your page builder functions and how much control you have over it but try to position these files in order and it should work. After making changes, you can go to the page and press Ctrl+U to view the complete source code of the page and see in what order the files are and also F12 to open the browser Developer tools and see if there are any errors in the console.

Let me know how it goes and I will look over the page again to see if everything is right.

It worked! Thanks a lot for your attention!

Alright, you deserve it 5 stars! :)

Thank you! ;)

I’m getting a “Form processing file not found” error on your CONTACT FORM, right after hitting the SUBMIT button.

Can you send me a link to where I can look over your implementation? You can send it over the contact email from the Guide or Readme if you don’t want to post it here, in a public place.

Regarding the error, what this basically means is that the file that processes the contact form, named “contact.php”, has not been found. Either it has not been uploaded or its path has been changed, in which case the URL needs to be updated in the action attribute of the <form> element.

Is there a way to integrate this plugin into a Wordpress site without any problems?

As this is not a WP plugin, you will need to be familiar with WP and PHP coding in order to add it to a WP site.

What needs to be done is to add the HTML code, CSS and JS files on the page. You can do this through WP hooks, in the theme functions.php file.

Need share buttons for WP to be wrapped in a webviewer.

It appears most don’t work (I tried the ”+” ... error webpage not available etc.) What’s causing this kind of error? Note: the buttons work in mobile browser, but not in webviewer app. Any idea why?

Does your work?

Any solution?

Sorry, but I am not understanding what you are asking.

Did you purchase the project or are you talking about the preview page?

All I wanted is just a simple blog that looks like Instagram with one image and one row of buttons for Like/Share/Comment + whatever else you may invoke … Download media (possible?)

Almost all the share buttons I look at don’t work properly in an app (webviewer).

Hope you look into app. Is there a chance we can work together?

I haven’t worked with Web Viewer, I do not have experience with it. But, from reading the description, it should be able to display a web page as it is in the browser.

charlez

charlez Purchased

Hello, I’d like to avoid using Velocity, any chance you have a version of the script only using Jquery ?

I have added the option. The new files are live on the marketplace, you can download now.

Modifications were made to the “super-sidebar/js/jquery.super-sidebar.min.js” file. You can take this new file and place it in your project. Then, on your HTML page, in the sidebar JS build code, you can add another setting called “animateEngine” which can be set to “velocity” (default) or “jQuery” :

jQuery(".super-sidebar").superSidebar({
    ...
    animateEngine: "jQuery" 
});

If using the “jQuery” option, it is no longer necessary to load the “velocity.min.js” file on the page.

Let me know if everything works well. Also, I would appreciate it if you can leave a star rating to the project, it helps with search results.

charlez

charlez Purchased

That’s awesome, thank you so much, keep up the good work !

charlez

charlez Purchased

I tested it and it works like a charm, great support thank you again

A new update was implemented, version 2.2 is live:

  • Added a new setting called “animateEngine” to be able to control which engine is used for animations, either “velocity” (default, smoother animations) or “jQuery”.
    If using the jQuery option, it is no longer necessary to load the “velocity.min.js” file on the page.

Hi, I have buy this. I checked the guide.html. but i still do not understand how to add to my wordpress theme. do you have that guide? Thanks

thank you. i love the effect but it is really difficulty for me. i have no idea but to get refund. thank you again for your understanding.

If you like the effect, I can make a very basic plugin for WP with an admin page that has a couple of textareas in which you can paste the HTML markup code and JS build code from the sidebar templates.

Ok. If possible please help me.and my email ericqi@live.com thank you.

Hello,

Is it possible to include the social buttons in a specific div of the page?

Thank you
Chris

Yes, to do that, you can modify the CSS position from “fixed” to “absolute”.

In your div, they have to be positioned vertically for the text labels to animate well. If you are using the buttons positioned horizontally, then you have to disable the button labels from the settings.

DorelML

DorelML Purchased

I wish to make the sidebar fixed relative to a parent element (site’s main content).

can you explain exactly how to do it?

-super sidebar data-

Place the “div.super-sidebar” element on your page, where you want to have the sidebar.

In the CSS code, set the position of “div.super-sidebar” to “relative” and change the position of “div.sb-bar” to “absolute”.

div.super-sidebar {
    position: relative;
}
div.sb-bar {
    position: absolute;
}

In the JS build code, set the left and top values of the bar with the “position” setting:

jQuery(".super-sidebar").superSidebar({
    position: [0, 0],
    ...
}
DorelML

DorelML Purchased

Thank you, I have followed your instructions and it works! (but for me it worked using “fixed” instead of “relative” for .super-sidebar).

Hello,

Is there any setting to auto-display the buttons (at the bottom) when accessed on mobile device? thanks

ok. thanks! Please consider adding mobile support

The sidebar is supported on mobile. It just does not have the option that you want, to move position to the bottom of the page.

Yes, sorry. Maybe add that feature :)

Hi,i can not find the icon papular social “LINE” in Asia,can i add it ?

Yes. If the icon is included in the Font Awesome package, you can add its CSS class name. Or you can add it as a .png file.

Very much appreciated… Cheers!!! :)

by
by
by
by
by
by