2. July 2013
von Blackbam

Recently a client wanted to display social media buttons like facebook, twitter and google plus at the bottom of each image in jQuery Colorbox. As it is bad practice to change the source code of a Plugin, the following code worked well for this job.


Note: This client wanted the full URL to be liked, not the image itself - if you want to do so, you should  like/recommend the attachemnt URL of the colorbox images, not the URL of the page. I will leave this up to you, to change the code in this way.


Add the following jQuery code to the footer of your page:

		jQuery(document).ready(function() { 
			var facebook = '
'; var twitter = ''; var google = '
'; jQuery("#cboxContent").append('
'); });
CSS code
#cboxSocials {

.cb_social_elem {


Social Buttons Developer Links

Facebook Like






Dieser Eintrag wurde am 2. July 2013 um 15:15 in der Kategorie jQuery veröffentlicht. You can book the comments for this article RSS 2.0. Feedback, discussion, commendation and critics are welcome: Write a comment or trackback.

Tags: , ,

Warning: Use of undefined constant Ext_related_links - assumed 'Ext_related_links' (this will throw an Error in a future version of PHP) in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php on line 75

Already 12 comments belonging to "How to add social media buttons to jQuery Colorbox":

Kommentare abonnieren (RSS) or URL Trackback

peter ames   says:

on 09. October 2013 at 20:17 on clock

Great script! Thanks! Any idea how I'd actually make it able to like the image and not the entire page?

Blackbam     says:

on 09. October 2013 at 23:17 on clock

Hello, I think it is possible: You could pass the attachment url to like to the social media buttons (see the API of the services).

Ian   says:

on 17. November 2013 at 16:09 on clock

Hi Blackbam, this is driving me crazy. I have your code which is great but I can't seem to get it working. I'm good with HTML and CSS but not so good with jQuery and I cant seen to work out what is (or isnt) happening. I am not getting and errors and have even just tried to append my name instead of complex code but I can't get it working.

Do you have an example of this working, maybe on jsfiddle or similar.

Many thanks

Blackbam     says:

on 08. January 2014 at 20:59 on clock

Hello (sry for late answer), unfortunatly there are no further examples. It is very likely that you have JavaScript errors on your page which prevent the script from working. If there are no JavaScript errors, try JQuery.append() on document ready with some existing ID-Element. If this works, you should also get the script working.

dani   says:

on 10. January 2014 at 19:34 on clock

Hi! Is there a way to add the share button to share the actual image displayed? This is a great plugin and I would like to add the sharing functionality to my photos! thanks!

Blackbam     says:

on 16. January 2014 at 21:45 on clock

Hello, yes there IS a way. You have to pass the URL attachment URL to the different buttons (e.g. facebook URL to like). Somehow you have to get this URL from your Image, but I will not cover how to do this in detail here currently.

Dmitriy     says:

on 01. April 2014 at 16:26 on clock

I tried to add a button to your site in colorbox, but the link goes to the page. how do I make the reference was to the video on YouTube, which is integrated into the colorbox?
<a href="http://www.just4life.com.ua/media2.php?path=tv">DEMO PAGE

$(document).ready(function() {
var facebook = 'Facebook';
var twitter = 'Twitter';
var vkontakte = 'Вконтакте';
var odnoklassniki = 'Одноклассники';
var plusone = 'Google+';
var mailru = 'Мой мир';



Blackbam     says:

on 02. April 2014 at 19:19 on clock

Hello basically you have done everything correctly. It depends on where your links should go - you have to figure out yourself, which links you would like to recommend and the way you want to set these.

Trianta   says:

on 25. May 2014 at 11:05 on clock

Hello, I wish to add an vote button to all images in Colorbox and when have click event on button call my eternal php sript and updating in mysql. How can call my eternal script from Colorbox?

Blackbam     says:

on 03. October 2014 at 17:04 on clock

@Trianta: With Ajax.

Hussain Mustafa     says:

on 04. October 2014 at 16:50 on clock

Hi Sir, I add the share button but i want the button to only share the pictur opened in the colorbox not the main page so how can i do this i got lots of pictures. so do i need to setup this for all pictures or is there another way ?

Can you explain?

Blackbam     says:

on 19. October 2014 at 20:33 on clock

Hey there, If you want to share the pictures itself you have two possibilities:

1. Share the attachment link (usually you can refer to a link in the social media button APIs)
2. Create custom links (with e.g. GET-Parameters) which always open the lightbox correctly for a shared link (advanced option)

However I cannot provide the solutions here, how to do this you have to figure out yourself. But I hope it helps you.

Leave a comment: