Facebook share

Facebook share tool consists of a button added to the Social share panel. When the button is selected, the user is redirected to a sharing dialog box that is provided by a social service. The position of the button is fully managed by the Social share tool.

The appearance of the Facebook share button is controlled with the following CSS class selector:

.s7smartcropvideoviewer .s7facebookshare

CSS properties of the Facebook share tool

width

Button width.

height

Button height.

background-image

The image that is displayed for a given button state.

background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites .

NOTE

This button supports the state attribute selector, which can be used to apply different skins to different button states.

It is possible to remove the button from the Social share panel by setting display:none CSS property on its CSS class.

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - to set up a Facebook share button that is 28 x 28 pixels, and displays a different image for each of the four different button states:

.s7smartcropvideoviewer .s7facebookshare {
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7facebookshare[state='up'] {
background-image:url(images/v2/FacebookShare_dark_up.png);
}
.s7smartcropvideoviewer .s7facebookshare[state='over'] {
background-image:url(images/v2/FacebookShare_dark_over.png);
}
.s7smartcropvideoviewer .s7facebookshare[state='down'] {
background-image:url(images/v2/FacebookShare_dark_down.png);
}
.s7smartcropvideoviewer .s7facebookshare[state='disabled'] {
background-image:url(images/v2/FacebookShare_dark_disabled.png);
}

On this page