An appropriate solution for this task is shown with the following code example.
Add the following code into the footer of your website on which the colorbox is displayed (inside the HTML script-tag):
// when document is loaded, start
jQuery(document).ready(function() {
// make variables for each "like" button from social media services you want to display (e.g. facebook, google+, twitter)
var facebook = '*** facebook button code ***';
var twitter = '*** twitter button code ***';
var google = '*** google plus button code ***';
// append the social media buttons to each #cboxContent, the Id of the line below of the Colorbox
jQuery("#cboxContent").append(''+facebook+twitter+google+'');
});
After doing so you will see the social media buttons being displayed inside of the colorbox, however the positioning will be not as you like as the buttons are displayed below the actual line. As you may know, CSS supports negative margins for cases like that. Copy the following CSS into your stylesheet and the buttons will be positioned properly (adjust to your needs):
#cboxSocials {
margin-top:-43px;
}
.cb_social_elem {
float:left;
margin-right:20px;
width:120px;
}