65 comments found.
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. 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.
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.
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.
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.
Hi. Couple of questions:
I notice that the sudebar moves with scrolling page a littke. Possible for conpketely stationary ?
Also wondered if support click to minimize ? What i mean is click will expand say the social ucons. Click on the same button should bring them back in. Like FAB (floating action buttons)
Thanks Steve
Hi. The sidebar doesn’t move at all when scrolling for me. What browser are you using?
Regarding minimize, the sidebar has a dropdown feature. There is one button with a social icon on it, when you mouseover, it displays all social buttons. When you mouseout they dissappear. The appearance animation can also have different effects. You can see this in the preview, simply enable the “Social” dropdown button.
Using Chrome but with Envato header frame.
Also re appearance n disappearance you should code for click / touch to expand and contract as that is now the defacto expected ux behaviour.
Steve
The preview redirects to the standalone page so the Envato header should not display. Anyway, you can see the preview directly for how it displays normally: http://www.creativetier.com/super-sidebar/preview.html
Regarding your click/touch suggestion, I like that idea and I will definitely add it as an option in the next update.
Update: In version 2.1, a new setting called “subOpen” was added to control if the subbars are opened on mouseover or on click.
when try to use facebook share feature post login screen get error msg.
ERROR ! Sorry, this feature isn’t available right now: An error occurred while processing this request. Please try again later.
Can you give me a link to where I can look over your implementation?
Hy there, sorry for bothering, I have a small question prior buying your great product.
I wanna know if it’s difficult to change from vertical to horizontal alignment of those social icons?
I want to use them on a under a text file and I need them to be in horizontal position. If i buy your product can you tell me what should I add or change to list them in a horizontal position and what should I do to insert them in a specific div?
Thank you and sorry for my long question
Hi. It’s no bother at all.
The sidebar doesn’t have a built-in option to position the buttons horizontally. This can be done manually but it requires modifications to the CSS and possibly JS code as well. The difficulty of these modifications depends on the exact features that you want to keep.
For example, if you want the button labels to appear on the right of the button and animate in, that will require animating all the buttons on the right side as well. If you make the button label appear above the button, it will be easier. Or if you don’t use button labels at all, it will be even simpler. How difficult it is to do depends on how you want the buttons to function exactly.
I can give you some pointers but it is best if you are familiar with CSS and JS in order to do this.
I hope this helps, if you have any other question, please let me know.
Thank you for your detailed answer, yeah you are right about all the buttons moving to the right side. Indeed it seems a bit complicated and it’s possible to disturb page layout during animation.
Best for me it would be No animation at all (no labels only the social media buttons) I want them to be in a horizontal position and to add them to a specific Div on my page.
It’s something difficult? please let me know if you can help me with this because I want to buy your product.
Thank you.
If the labels aren’t required then it shouldn’t be difficult at all. I think only CSS customizations are needed in this case. I will look into it to confirm and let you know exactly.
If I can make a quick demo, I will link it here and afterward can send you the new custom code as well.
Thank you for your time and effort, if you can make this small change I will definitely buy it, and more than this you will get a 5-star rating.
I tested it and indeed all that were needed were some minimal CSS modifications to make the buttons position horizontally. I made a quick example for you at the following link:
http://www.creativetier.com/test/gfs_s/horizontal.html
I can send you the demo HTML and CSS files together with a list of modifications made, if you decide to use it in your project.
Will This Work On WordPress Site
No, this is a jQuery plugin, not a WordPress one.
You can implement it on your site by adding the HTML code and the asset files.
What is the minimum version of JQuery this supports? Also once purchased, do we get full access to the source code? I want to remove the Icon Fonts (Font Awesome) with SVG icons instead.
Regarding jQuery, I haven’t tested up to what old version it works but it should go back quite a lot to very old versions. If you have any particular one that you would like to know about, you can tell me and I will test it.
Regarding the source files, yes, all source code is included and can be modified.
Hi – I folowed your guide – But the sidebar doesn’t show up.
It’s placed on http://job.aller.dk
Can you tell me what’s wrong.
Solved it by using CDN version of Font-Awesome.
Ok, glad to hear that. It was probably something related to a file not being properly available/loaded. When having such issues, it is useful to look in the browser console (F12 to open the Developer Tools, then search for Console) and any error will be shown there.
Hi,
I purchased this to use my wordpress site. But i don’t have enough documentation to integrate in wordpress site. Please can you provide detailed instructions on this.
Thanks
The sidebar is not a WordPress plugin, it is a standalone JavaScript project. On CodeCanyon, WP plugins are only on the “WordPress” category, the sidebar is in the “JavaScript” category.
If you made a mistake when purchasing a project, you can ask for a refund. You have more information about that here: https://help.market.envato.com/hc/en-us/articles/209980383-How-do-refunds-work-
How do I share images to facebook, twitter, instagram?
The sidebar is made to share the page on different services, it does not share individual images. I am not sure if the social services even have a public API to share images.
The only service to which the sidebar supports sharing an image is to Pinterest.
A new update was implemented, version 2.0 is live:
I made a very big update to the project with a lot of additions and improvements. A few of the most important ones are: added support for share buttons, added support for Font Awesome, added a lot of new default buttons, added new settings, fixed a few bugs.
For a complete list of changes, see the Updates section on the project page.
Please, add the biggest Russian social network: VK
I am preparing an update in the next few weeks and I will be adding more options as well.
Hi, great sidebar, thanx! I have ONE problem: Is there any chance to get the sidebar running, if there is a PlugIn on the same page, that already calls the “jquery.min..”? In my case it’s a facebook-wall-plugin: http://bfnobox.bvcms.de/bf-aktuelles.php When I cut out the fb-plugin-codeblock, the sidebar appears like on all other pages. Any help very appreciated, thanks a lot. Ecki
Yes, the sidebar works regardless of other page content.
I looked over your page and the problem is that you add the plugin JS file on the page before the jQuery file. The sidebar is a jQuery plugin so jQuery needs to be added on the page first and afterward the sidebar JS file.
Simply move the following line at the bottom of the page, before the sidebar “build code” :
<script src="super-sidebar/js/jquery.super-sidebar.min.js" type="text/javascript"></script>
Hi, thanks for your quick response. I would say “Almost done.” But now it looks like this: http://bfnobox.bvcms.de/bf-aktuelles.php The sidebar appears, but pretty uncool, and I don’t know why … Do you? Thanks again.
Looking over the source code on your page, it seems that there is a conflict between the sidebar CSS code and the facebook wall plugin CSS code.
I have used the prefix “sb-” for all sidebar CSS styles, as to avoid conflicts with page styles or other content styles. But it seems that the facebook wall plugin that you have on the page also used the “sb-” prefix for its styles and from this comes the code conflict.
The quickest fix around this would be to replace the prefix in one of the plugins with something else.
For example, to do this for the sidebar, you can use the “Find and replace” function of a text editor to automatically find the “sb-” text and replace it with something different, such as “supersb-”.
You will have to do this for the sidebar HTML code, the “super-sidebar.css” file and the “jquery.super-sidebar.min.js” file.
A text editor can do this replacement process very fast. But, if you do this, remember to update the sidebar prefix in the HTML code on the other pages as well.
One last note: looking over the browser console, the Velocity plugin is showing a similar error to the one I talked about in the previous message, cause by jQuery being added later on in the page (by the facebook wall plugin).
So, just like you did before, take the following line and move it at the bottom, before the sidebar JS file:
<script src="super-sidebar/js/velocity.min.js" type="text/javascript"></script>
Hi CreativeTier, now it works like it should! 1000-thanks for your outstanding support! Cheerz, brainvibes
Hi, great job. Is it possible to use our own icons designs (png) instead of Font Awesome icons?
Also, I have purchased and installed everything as you mentioned, but unfortunatly sidebar is not showing. Maybe z-index issue ? Can you please send me your email address, I would like to send you my website url. Maybe you can check if anything wrong with my source code ? Thanks in advance…
Yes, you can use your own icons instead of the default ones. You can replace the icons in the “img” folder with your own ones. Or change the “src” attributes in the HTML code to point to your new icons. If you need any modifications to the look, you can modify the CSS code as well.
For clarification, the sidebar does not use Font Awesome icons but icons from a couple of Pixeden free icon packs.
Although you have already found it and sent me an email, I am posting here for other people searching through the comments:
You can find the contact email included in the guide, that you can use to get in touch with me if you have any problems or want to ask any questions. You can also use the contact form on my profile page to message me directly.
I have received your email, looked over the page code of the link that you have sent me and found an error. I have replied back with instructions on how to fix it. Please refer to the email on how to fix the problem.
Thanks big time. One of the best supports ever. Seriously I have rarely seen such a precise explanation. Author described very clearly where I have made an error and the suggested fix worked immediatly. Excellent script !
Great sidebar, but there is a bug. The first and the fourth circle is subbar. When you hover over fourth something goes wrong.
Similar problem if the subbar is not the top position
Hi. Your links do not seem to work. They show a “403 Forbidden” error.
It would be helpful if you can send me a link to where I can look over the implementation code directly. Or, at least, describe to me the steps of how to replicate the problem that you are having.
copy link and open in new window, no click
Thanks for the link. Please use the contact form on my profile page to send me a message and I will reply on your email with the updated files.
Hello, nice plugin. But how to hide on smaller screens?
@media screen and (max-width: 600px) { #super-sidebar { visibility: hidden; } }
does not work for me when i put it in the super-sidebar css file. Perhaps you got a hint for me
Hi. I see you used an ID in the CSS code:
#super-sidebar
Did you add the id to the sidebar element too?
<div id="super-sidebar" />
By default, the element only has a class of “super-sidebar”. If you add the id to the HTML element, it should work ok.
Alternatively, you can use the class and the “display” property:
.super-sidebar {
display: none;
}Or you can use the class and the “visibility” property but make sure to have a specificity value at least equal to 2 classes:
.super-sidebar.sb-ready {
visibility: hidden;
}Or:
.super-sidebar {
visibility: hidden !important;
}This is because, at the top of the file, we have the following style that is applied when the sidebar is built and ready and which needs to be overridden:
.super-sidebar.sb-ready {
visibility: visible;
}If you have any other questions, please let me know.
Thanks for the very quick response. Yes i did a id to html but it still didnt work. When i put this code in the super-sidebar.css @media screen and (max-width: 600px) .super-sidebar { visibility: hidden !important; }
nothing changes. I can do what i want but it still appears on all sizes. Thats really bad because on mobile devices you cant read something because of the big icons.
It works ok on my end. Can you give me a link to where I can see your implementation so that I can look over the code directly?
Yes, you can see it here: www.lager11.de but now i deleted the code to keep it clean.
I used the Chrome developer tools to insert the media queries into the CSS on my end and all of them work well. Are you sure you did everything right?
Maybe you tested on a small screen but it was still bigger than 600px. Mobile screens can have bigger screens than that nowadays. Make sure that when you test you also look at what the browser width is to confirm the current dimension.
You can test this easier directly on a computer by resizing the browser window. For example, in Chrome, the window dimensions are displayed when the developer tools panel (F12) is open.
Hello, i just tested it again and again but it’s just not working in chrome by resizing and on any phone.
@media only screen and (max-device-width : 800px) { .super-sidebar.sb-ready { visibility: hidden !important; }}
In my opinion the code seems to be correct. But its not working. Just when i move up to 1500px or more its hidden.
The code is correct and, like I have mentioned, I have tested it directly on your site by adding the media query code to your site’s CSS file on my end, using the browser developer tools.
Beyond that, you need to investigate why it doesn’t work on your end. If you have confirmed that the testing dimension is not the issue, then the next thing that I would test is if cache is the issue.
Make sure that when you test that the old file is not loaded from cache. In Chrome, Ctrl+F5 refreshes the page and ignores cached content.
If you are using a platform to publish your site, make sure that the platform is properly loading the newest version of the CSS file and not an old one from the cache.
The surest way to verify is to look in the page source code, find the link to the CSS file, open it and look over the code to confirm that it is the latest version.
With the version 2.0 update, a new setting called “hideUnderWidth” has been added to make the sidebar automatically hide if the browser window is under a certain width.
Can I use this plugin on Google Blogger?
I haven’t worked with Google Blogger but I think it should allow adding a project like this. All you need to do is add the HTML code on the page and include the assets folder (images, CSS, JS) in your site. You can look into that and see how it can be done in Blogger so that you are sure, before you many any decision about buying the sidebar.
I see from side description that there is a PHP file included .. is that true or it just JS and CSS files as you wrote above .. because Blogger do not work with PHP files
Yes, there are 2 PHP files included as well used by the Contact and Newsletter windows on the backend to send emails. If you are not using the Contact and Newsletter buttons, then no other PHP is used, only JavaScript..
