Social Media Badge Widget
Please donate so we can keep developing plugins.
This is a WordPress plugin which creates a widget which easily displays the social badges from the leading social media websites (Twitter, Facebook, Google+, LinkedIn and You Tube).
This plugin creates a widget which easily displays the social badges from the leading social media websites (Twitter, Facebook, Google+, LinkedIn, You Tube, Pinterest and Flickr) in a clear and elegant way.
It displays the information in an accordion, so only one section is open at a time, which ensures your website does not become cluttered visually.
The plugin includes a plugin admin page where it is possible to customise everything from the social media channel to the visual styling of the accordion.
Plugin features
- Widget content displays in a jQuery accordion.
- Display Twitter, Facebook, Google+, LinkedI, You Tube, Pinterest, Flickr
- Customise the Twitter widget for different colour schemes and to show replies.
- Customise the Facebook widget for different colour schemes, show news stream and show fans faces.
- Change the colour of the accordion, gray, blue, red, green and black.
- Two different icons sets: colour and grey.
- Select accordion section to open on page load.
- Ability to make the accordion all collapsible and load with all section closed.
- Choose which accordion section to display on each widget.
- Skeleton styling to enable easy custom styling.
- Ability to manually load jQuery to increase compatability.
- Troubleshooting section to ensure any problems are resolved quickly.
- Support requests answered in less and 24 hours on average.
For a demostration see the bottom of the sidebar on this page.
Hi there! I´trying out your SOCIAL MEDIA BADGE WIDGET on a site, and I get an annoying Twitter pop-up in the lower left corner. Can this be removed?
Hi,
You shouldn’t have anything popping up from using the plugin. Things like that annoy me too! Let me know your URL and I will have a look.
Alex
I am trying to use this plugin, but i would like an option to have it collapsed instead of having the twitter and facebook showing automatically. is there a way to make that user initiated so it starts in a collapsed position?
Hi,
Thank you for downloading our plugin. We hope that you like it. We are currently developing a new version of the plgin, we are in the final stages of testing, which will allow this functionality.
Alex
Hi. I’m stress free and thank you for this great plugin! Everything works great but one issue I’m having is that my Facebook feed won’t show up in Google Chrome… is this an issue anyone else is having?
Hi,
Glad you like the plugin. Can you let me know what version of crome you are using along with the url you are using the plugin on? Then I will investigate.
Alex
Cannot get facebook business page to work? Help
Hi,
I’m sorry to hear you are having problems getting your Facebook business page to work.
Please send me the URL of the website you are working on and also the Facebook business page so I can assist you further.
Regards,
Alex
Hello,
I downloaded the plug-in – like it!
However, the icons for each social media tab is now not showing up. They were before.
I’ve deleted and re-installed and it is still happening.
May you help, please?
Hi,
Sorry to hear you are having issues with the icons not showing.
Please send me the URL of the website you have the widget active on, then I can assess what is happening.
Alex
http://184.173.196.216/~platinum/housewarming-newsletter/
Any help you may provide?
Hi,
There is a conflict with another plugin you have installed “yikes-inc-easy-mailchimp-extender” which is causing the image problems.
To resolve, without having to deactivate the other plugin, add the following css to to head of every page with displays the widget:
.twitter .ui-icon {
background-image: url(../images/twitter.png) !important;
}
.facebook .ui-icon {
background-image: url(../images/facebook.png) !important;
}
.googleplus .ui-icon {
background-image: url(../images/googleplus.png) !important;
}
.linkedin .ui-icon {
background-image: url(../images/linkedin.png) !important;
}
.youtube .ui-icon {
background-image: url(../images/youtube.png) !important;
}
If you need help adding css to your website let me know.
Regards,
Alex
Thanks
Yes, please advise how to add the css – thanks
Sure,
Go to Appearance -> Editor. Then scroll down to the bottom of the page. On the bottom right of the page there should be a link which says “Stylesheet” under the heading “Styles”. Click the link.
This should open a new page in the text editor in the main part of the screen. Scroll to the bottom of that file and add the lines which are written in the comment above.
Good luck, let me know if it works.
Alex
Thanks
It didn’t work
The logos are completely missing now. Whereas before, they were distorted images.
Hi,
Sorry to hear it didn’t work please try the following:
.twitter .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/twitter.png’) !important;
}
.facebook .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/facebook.png’) !important;
}
.googleplus .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/googleplus.png’) !important;
}
.linkedin .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/linkedin.png’) !important;
}
.youtube .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/youtube.png’) !important;
}
Replace YOUR DOMAIN with the domain of your website.
Hope that works,
Alex
That worked – thanks!
Great, glad to hear it 🙂
Hi,
Sorry to hear it didn’t work please try the following:
.twitter .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/twitter.png’) !important;
}
.facebook .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/facebook.png’) !important;
}
.googleplus .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/googleplus.png’) !important;
}
.linkedin .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/linkedin.png’) !important;
}
.youtube .ui-icon {
background-image: url(‘YOUR DOMAIN/wp-content/plugins/social-media-badge-widget/images/youtube.png’) !important;
}
Replace YOUR DOMAIN with the domain of your website.
Hope that works,
Alex
That worked – thanks!
Okay having trouble with the facebook business page. http://www.facebook.com/pages/Cigarbasics101com/135068613320249#!/pages/Cigarbasics101com/135068613320249
Hi,
I believe you are having issues because you have not set a custom URL for your business page on Facebook. Google it for the latest instructions. I recommend you set this up so that you can refer people to your Facebook page by saying something like, go to http://www.facebook.com/YourBusinessName.
Once this is done you can then put the YourBusinessName section in the Facebook box on the widget.
If you don’t want to set up a URL then the widget should work of you put on everything after the first / after the .com.
Hope that helps.
Alex
I love the plugin! Twitter works, but Facebook says, “Could not retrieve the specified page. Please verify correct href was passed in. What should that line look like? Also, I have a YouTube video I want to put in, but installing the URL didn’t do it. What should that line look like? I’ll insert the url…
Thanks!
Bobby
Hi,
Great to here you like the plugin.
The Facebook URL should only be the part which is after the .com/
By the sounds of it you have put in a incorrect URL for the Facebook page. You do not need the http://www.facebook.com part.
The You Tube link will link to a You Tube channel rather than a particular video, sorry if you thought differently. To add a channel do the same as for Facebook, the part after .com/
Make sure you have set a custom URL for both your Facebook page and your You Tube channel.
Please send me the URL of the website where the plugin is in use as this will help me be more specific.
Alex
Hi !
got a problem with the width. when i modify it, it doesn’t change… it only changes in the accordion but not the twitter and FB button…
can you help please ?
thanks
HI,
Sorry to hear you are having problems with the widget.
I’m afraid I’m not fully sure what you mean from your description. Maybe you could send me your URL and I can have a look for you.
Regards,
Alex
Alex Robinson, Director
07708 473823
[email protected]
uk.linkedin.com/in/alexrobinson66
StressFree Sites Limited
023 8000 1414
[email protected]
stressfreesites.co.uk
twitter.com/stressfreesites
facebook.com/stressfreesites
linkedin.com/company/stressfree-sites plus.google.com/u/0/b/114773673212709974273/ youtube.com/stressfreesites
↑ Grab this Headline Animator
Registered company in England and Wales, number: 07631258
Registered office Address: 1 Gloster Court, Whittle Avenue, Segensworth West, Fareham, PO15 5SH
For your bookkeeping needs please visit our sister company StressFree Bookkeeping Limited. This communication and the information contained in it are confidential and may be legally privileged. The content is intended solely for the use of the individual or entity to whom it is addressed and others authorised to receive it. If you are not the intended recipient, it is hereby brought to your notice that any disclosure, copying, distribution, or dissemination, or alternatively the taking of any action in reliance on it, is strictly prohibited and may constitute grounds for action, either civil or criminal.
Hi
Can you tell me please, how or where I control the z-value of the widget please? I have it here – http://www.ukmartin.com/chris-harris/ and as you can see by expanding the “commercial” menu, this widget sits on top of the menu, which is not the desired effect. I’ve set the z-index value of the menu widget to 1000000 which, despite being extreme, still does not seem to be enough.
Can you help please?
Thanks in advance
Martin
Hi,
When using the z-index property both elements, which you want to control the layering of, have to be provided with an z-index. The larger the z-index the further to the front the element will be.
If you add the following css it should work for you:
ul.jqueryeasymenu427582309 ul {
z-index: 2;
}
.social-accordion {
z-index: 1;
}
Hope that helps.
Regards,
Alex
Hi, I installed your plugin for purposes of the facebook connection for our organization and only thing that shows on our front page is the word “Facebook” under Stay Connected and it does not connect to the facebook page. It simply jumps to the top of the page. Thanks!
Hi Neva,
I’m sorry to hear you are having difficulties using the plugin. Can I confirm that you have put only the part after the “/” in the Facebook box in the widget back end?
Please send me your URL and I can try and be more specific.
Regards,
Alex
Thank you for responding. The complete Facebook URL is:
http://www.facebook.com/pages/Georgetown-Seeds-of-Strength/197272450403903
Our website URL is:
http://www.seedsofstrength.org
But password protected. I am new at this and appreciate your patience with me.
Hi,
It is best if you assign a custom URL to your facebook page. Say facebbok.com/seedsofchange. Google custome business page facebook for instructions on how to do this. Then all you need to type in the box is /seedsofchange.
It can work if you don’t want to setup a custom URL to just put in the part after the .com so /pages/etc in the box.
Hope that helps.
Alex
Just uploaded version 2.4…twitter does not work anymore. And it doesn’t work on this site either! Please fix right away…
Hi Jane,
The issue is not because of the update, but it is good you have updated as the update includes the fix for this issue.
Basically Twitter has changed its API platform (how the widget is created) which means that it cannot be created the easy way it used to be. Rather than using usernames for widgets, widget IDs have to be created. The old widget was depreciated 22 hours ago.
To fix this issue you need to setup the new widget. To do this go to the URL:
https://twitter.com/settings/widgets/
Then create an new widget. Customise the widget the way you would like then click save.
Once saved there will be a long number in the URL at the top bar. Copy this number (it is the widget ID) and put the number in the Twitter ID box on the Social Media Badge Widget.
This will get the Twitter widget working again.
I will post out a new update when I can to make this system easier.
Let me know if you get stuck.
Thanks,
Alex
Thanks Alex..that works. Maybe you could add a better explanation in the Plugin widget.
Great glad it worked.
Sure, get hopefully get the system better to the next update.
Regards,
Alex
Hello,
Upon clicking the Twitter badge is there a way to have it open in a new window the way the Facebook badge does?
Hi,
Unfortunately Twitter is currently changing its API widget at the moment so many of the usual setting they have not developed yet. Currently open in a new tab is one of them.
When the Twitter API widget is updated I will update the widget to add this functionality, as it is what I would prefer as well. I cannot yet know when this will be I’m afraid.
Regards,
Alex
Thanks for taking the time to reply. Very much appreciate.
I have just installed the plug in, love the idea however I am unable so far to get the buttons to do anything, they show fine on my site, but when clicked on nothing much happens. http://www.onlinesolutionsconsulting.com
Hi,
I had a look on your website and I see that the LinkedIn tab is working. For the Twitter tab to work you need to ensure that you use the Twitter Widget ID. First setup a Twitter widget for you account then put the ID in the field in WordPress.
I hope that helps.
Alex
Just installed version 2.5 and Google+ tab doesn’t work anymore. Tried with both my name profile and number id, neither works.
Hi,
Sorry to hear you are having issues.
Please let me know your profile ID and I will try at my end to see if I can get it working.
Regards,
Alex
I’ve also tried your plugin, but nothing shows up at all.
Wally, sorry that you have having problems. Can I have some more details? What doesn’t show up? The Facebook section, Twitter section, the whole widget?
Alex
Thanks for responding Alex. Looks like my last post was lost. I am not seeing anything. The entire widget doesn’t seem to be working. I deactivated it and then activated again but there is not change.
Hi,
Which social channels did you try and have working on the widget? Facebook, Twitter….?
Can I have the URL and the location of where the widget should be? i.e. the sidebar or footer etc.
If you don’t mind the easiest thing for me to resolve the problem is to login to your WordPress backend. If you create a temporary user with admin right and email me at [email protected] that would be great.
Thanks,
Alex
Hi Alex:
I think you are set up with admin privileges.
An email should be on the way with the password.
The website URL is: hostaldelosperros.com
I’m trying to get the widget to show up on my post pages.
I’m not very good at this, so this may be something stupid that I’ve done or not done.
Thanks for any help you can provide.
Wally
Hi,
I found the problem. Now the widget is showing on the website. I put the social links to StressFree Sites to test it works. Please change these to your social channels.
The problems was you needed to add the widget into the widgets on the widgets page. To go to the widgets page go to Appearance -> Widget then on the right hand side there a sidebar called “Right” click on there and you will now see the “Social Media Badge Widget” below. Click to open the edit boxes where you can change your social channels to yours.
I hope that helps.
Alex
I’m sorry Alex but I’m lost.
I went to my pages but none of the StressFree Sites show up, although I see that they are listed in the Widget selections like you said.
The only changes I see are that the header and menus have changed and the main body of text has been moved to the left.
Wally
Hi,
Thats interesting that it is not showing on your computer. I noticed that you have a server cache installed on your website. I think you were seeing an old cache version on the server. Rather than the new version. I’ve cleared the server cache now by going to Performance then clicking “Clear all caches”.
It might be worth checking that your browser is not caching webpages. This can be annoying when doing when development,I recommend you turn cache off. Alternatively, when you refresh a webpage you refresh the cache by using the key strokes ctr + r or cmd + r. Check on your browser depending which you are using.
I hope that makes it appear. Have a look at the screenshot to see how it looks for me.
Regards,
Alex
Thanks Alex.
The cache seems to be empty (probably since you emptied it). I could not figure out how to stop Chrome from caching the pages. I then used the Incognito page on Google Chrome and my pages displayed properly. I also used control –R and it is working also with it. So I think I’m good.
Thanks a lot for your help. I just have to figure out how to display the other social media. Thanks again for all your help. I will make a donation to help you out.
Wally
Hi,
Great glad you have it sorted.
If you get stuck with the other social widget let me know 🙂
A donation would be awesome to do some more development work – thanks!
Alex
Oh geez Alex. Now I understand how your plug in works and that is not what I was looking for. I wanted a plug in to share my content with the reader’s social media, not mine. I’m sorry for all the trouble.
Hi,
No worries. I hope you find a plugin for what you are looking for.
Regards,
Alex
Great plug in! I am trying to add flickr to it but am not sure what part of the name to add – http://www.flickr.com/photos/abarthuk/
Is there anyway of adding instagram to this?
Hi,
You need to add the flickr ID, you can get your flicker ID by visiting this website: http://idgettr.com, then put in the URL for your profile.
An Instagram widget is potentially possible, there is no official widget from what I can see, however there are 3rd party ones. If they give the customisation need then I should be able to create it. Sit tight for updates…..
Regards,
Alex
Yes this works, thanks apart from it then stops the Pinterest items showing?
Hi,
Great glad it works.
Hmm interesting regarding Pinterest. I find the widget quite unreliable. When I view the website many times from the same location it stops working. I think they have some setting to stop their server getting overloaded. Maybe try from another machine on a separate IP address, and see if it works.
Let me know.
Alex
Hi! Can I add more than one Facebook profile? If yes, how?
Hi,
You need to create two widgets to have two different profiles. It is not possible to create two Facebook profile in one single widget.
I hope that helps.
Alex
Hi! First of all, nice plugin you made there, thanks! Im getting an “ES
Invalid request.” message in the youtube tab. I think it could be that I type the channel url in wrong. But I don’t know how anymore. If you could give me a clue…
Btw have you thougt about adding an rss tab in the future?
Hi,
Glad to hear you you like the plugin, sorry to hear you are having problems with You Tube.
Do you have a custom URL for your You Tube channel? For mine the URL is .com/user/stressfreesites
I put stressfreesites in the You Tube box in the plugin admin page.
Does that help?
Regards,
Alex
I installed the Social Media Badge widget on my WordPress site and now it keeps displaying “plugin created by StressFree sites” on my home page. Is there a way to remove it? I tried going into the plugin settings but no such option. Not sure if I need to use the editor to fix this?
Hi,
The link can be removed by going into the Social Media Badge Widget admin page. In the “Style” tab, one of the last options is a tick box on whether to display the “created by StressFree Sites link”.
Please only remove the link after making a donation so we are able to rep lease new version of the plugin with more options and features.
Thanks,
Alex
I give up! Every time you update this plugin it stops working and I have to fiddle with it to get anything to happen. Google+ feed stopped working months ago. Now the latest update for WP 3.9 everything has stopped again. Time to look for a new plugin.
Hi Jane,
Sorry you are having problems with the updating. We have made some large changes to the database interactions so that it should keep data without problems. Do you know what version you where using before?
If you email me some login details for your WordPress I can have a look to see if there anything I can do to ensure that your details stay put. It will give me a chance to see what is happening with Google+
Regards,
Alex
Hi, I love your plug in but I can’t seem to get the Google + to work. I put in just the numbers as asked but still nothing when I click the icon. My website is http://www.momsbestfriendliceremoval.com
Can you help? Thanks so much!
Hi,
That is strange with Google+ just putting in the number should work. What numbers are you putting in the box? Or what is the Google+ page you are trying to link? Please send me a URL. If you email me login details to your WordPress I can have a look to see what is going on.
Regards,
Alex
I had great expectations for this widget. Unfortunately all I get are spinning arrows and the badges never load. I tried turning off the various jQuery options with no luck… still just spinning arrows with “plugin created by Stressfree Sites” the site can viewed at http://erick.bravick.name. The test widgets were added to the footer of the page.
Hi,
I think you are along the correct lines with it being a jQuery load issue. Please can you email me([email protected]) some login details to the website backend so I can see what is going on and try a couple of things.
Regards,
Alex
Thanks for the plugin. I just get an invalid request on the Youtube tab. I don’t have a special channel name just the letter number code given by Youtube. I copy and paste everything after youtube.com but nothing works. Help
Hi,
The You Tube widget needs a custom URL in order to function. Please setup a custom URL for your You Tube account and then it should work.
See below for instructions on how to do this (it is a good idea to set one up to help you and other find the channel):
https://support.google.com/youtube/answer/2657968?hl=en-GB
Let me konw
Regards,
Alex
works perfectly. thanks
No worries. 🙂
Do I have to have to have a company or can just use my linkdin profile name? If so how do I do it because I keep trying and it is not working? Thank you. http://www.amberbariaktari.com
Hi,
Yes a personal profile works with the widget. You need to ensure that you put the ID in the “LinkedIn Profile” section rather than the “LinedIn” section.
I noticed your profile doesn’t currently have a public link set. You need to do this for it to work. For instructions on how to set this up see here: http://help.linkedin.com/app/answers/detail/a_id/87/~/customizing-your-public-profile-url
I hope that helps.
Alex
Been looking for a plugin like this for months! I just installed it, and it only displays the circle rotating forever. I thing the wp tabber plugin uses jquery, so I unchecked all thar in styles and themes. Nothing happened. Any clues? Site is http://www.marilynstreats.com. Thx!
Hi,
This sounds like there is a conflict with jQuery not being loaded correctly either with a plugin or the theme itself. Looking at you theme it could be the theme itself unfortunately.
Try unchecking jQuery with everything else still checked then uncheck jQuery UI, do this one by one throughout all the options.
Send me an email with login details so I can try and look into it if you would like.
Regards,
Alex
Love the plugin… Got a few issues and hoping you can help me as well…my google plus page
1… In Crome i am getting a warning that the Linked in portions is loading “in.js” twice. I looked at the code and in fact your code is loading it twice, but i do not know how to stop it. While it is only a warning i have read that google takes warnings and errors in to account when ranking your site. So while visually and function wise the plugin is working to my satisfaction, the warning needs to go to meet search engines reguirements.
2. Google plus is only showing the header of my google plus page and none of the posts or content of the page. Why? Where is the content?
3. Youtube again only shows the header of my youtube channel but no videos or content on my youtube channel page. Why? Where are the videos?
Those are my three issues… Please help.
http://saltwater-fishing-charters.com
Hi,
Glad you are enjoying using the plugin and finding it useful 🙂
1) Good stop it will load twice if there is two LinkedIn boxes loaded. Do you have text in both the LInkedIn and LinkedIn profile fields on the settings page? This could be causing the issue. I will fix this on the next update.
2) The Google Plus widget didn’t use to allow streams on their widgets, but just looked it up and now they do will will change that. 🙂
3) Again limitations of the You Tube widget which doesn’t allow videos to be inserted. Write a request to You Tube!
I hope that helps.
Regards,
Alex
Thanks for the fast reply.
1) yes i had both Linkedin fields with data. Deleted the bottom field and warning is gone and i am still getting the result i want. Thank you.
2) Awesome, will be looking forward to seeing that update for google stream.
3) While we can embed videos on our pages, is it possible to embed the videos in the code of your plugin? Which file would i need to modify to insert the embed video? Obviously it would need to be around 250 px to fit properly but i would like to experiment as a work around from Youtubes criteria for their API.
Thanks again for your valuable information.
Hi,
No worries.
1) Glad it worked!
2) 🙂
3) Sure the file you need to edit is social-media-badge-widget.php on line 356. Put in the embed code from the You Tube page after the iFrame close tag. Remember any changes you make will be removed when the plugin is updated so make a separate copy of the changes!
Good luck.
Thanks for the widget. You guys are awesome. We are using it on our site http://www.licetroopers.com
Hi,
Great glad you like it. Always nice to hear about people liking the plugin 🙂
Regards,
Alex
I have a custom url and a channel and all that for youtube, it keeps saying invalid request, the google plus link works fine?
Hi,
What is your YouTube channel URL? I can see if it works my end. Have you put just the section after the youtube.com?
Regards,
Alex
Sorry it has taken so long, https://www.youtube.com/channel/UCLLscXeVFdV_lvlPyT9Gwxg.
Hi,
Unfortunately you do not have a custom URL setup on your channel. In order for the channel to be linked to this plugin you need a custom URL.
Please see the below infromation on how to get a custom URL, note your channel needs to meet certain criteria to allow you to create a custom URL:
mediafreshpress.com/change-your-youtube-channel-url/
I hope that helps,
Thanks,
Alex
Hi, trying add url for Facebook (inserting arinamanta into the settings box) full url is http://www.facebook.com/arinmanta, but I get an invalid URL. Please let me know what I might be doing wrong…thx
Hi I started using this plug-in as I wanted a beautiful way of presenting my social media activities and I must admit I am really happy till now but I am facing a minor problem that I cant link my youtube account it is showing invalid in the section others work just fine.