Social Sections

Share

Make sure your vistors see your social network buttons or icons. Each of our templates come with four predesigned 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.

Example
								
									
								
							
CSS For Retina Displays

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/[email protected]);
											}
									}
								
							

Social Section One

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.

social example 1
Example
								
									
								
							

Social Section Two

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).

social example 2
Example

Social Section Three

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.

social example 3
Example
								
									
								
							

Social Section Four

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.

social example 3
Example

Custom Share Buttons

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


Facebook Share

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:

Example
								
									
									
									
									
								
							

Facebook Share Link Structure:

Example

Twitter Share

The Twitter Share Link consists of a link only. Replace the string "Your-Site-Url" with the URL of your site.

Example

Pinterest Pin It

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.

Example

Google Plus

The Google Plus Link consists of a link only. Replace the string "Your-Site-Url" with the URL of your site.

Example