Make sure your vistors see your social network buttons or icons. Each of our templates come with four purpose-built social sections that are defined by the class .social-X, where X represents the social section type (1-4) as shown below. For icons size and special social networking color classes please see Styling Classes of the Timber Framework Docs.
For social sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.
.social-X{
background-image:url(../images/slider/social-bkg-image.jpg);
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.social-X{
background-image:url(../images/slider/social-bkg-image@2x.jpg);
}
}
A simple social section with with title and icons. Target .social-1 to set background color or image. Alternatively, for background use Timber background color classes.
A bold and creative social section that stand out. Target the .social-2 class to set background color or image. Alternatively, for background use Timber background color classes. Alternate the number of social blocks per row by changing the .content-grid-X class, where X represents the number of columns (2-6).
An elegant social section with round icons. Target the .social-3 class to set background color or image. Alternatively, for background use Timber background color classes.
A simple and modern social section. Target the .social-4 class to set background color or image. Alternatively, for background use Timber background color classes.
In all of our templates we have included four custom share buttons, namely: Facebook, Twitter, Pinterest and Google Plus. Below is an example of each and the parameters that need to be set by you
The Facebook Share Link uses the Open Graph meta tags for defining Title, Description, and Image. These should be added to the head of your document on any page you would like to share. You do not need to specify any URL parameters for custom Facebook Share button.
Open Graph Meta Tags:
Facebook Share Link Structure:
The Twitter Share Link consists of a link only. Replace the string "Your-Site-Url" with the URL of your site.
The Pin It Link consists of a link only. Replace the string "Your-Site-Url" with the URL of your site, Your Image Url with the URL to the image you want pinned, and Your-Image-Description with the description of the pint.
The Google Plus Link consists of a link only. Replace the string "Your-Site-Url" with the URL of your site.