Sky Blue Sofa concrete5 Add-Ons How Socializer Works

How Socializer Works

Setting Up the Block

There are 3 different blocks available for you to use:

  • Social Connect
    Lets you create links to your social media profiles so that others can follow you. 
  • Social Share
    Lets your visitors easily 'like', 'plus 1', or whatever  your content. Uses each networks badges that show the number of times the page has been 'liked'.
  • CSS Share
    A lightweight, more customizable way to allow your visitors to share your content. Since these are CSS links instead of iframe content, they load quickly. 

Each of these blocks is designed to work in a similar way. Using the edit dialog, you can add, remove and rearrange the networks that you'd like displayed.

Setting up the Social Connect Block

Networks Tab

Screen_Shot_2013-01-31_at_10.48.39_AM.png

  • Add a new network by clicking the 'Add a Connection' button. This will add a new row at the bottom of the table.
  • Choose the network by changing the dropdown in the first column.
  • In the second column, type in the URL to your network profile.
  • In the third column, type in the text that will display in the tooltip.
  • Rearrange networks by dragging and dropping the 'up/down' arrow at the left side.
  • Remove a network by clicking the 'x' on the right side.

Advanced Tab

Screen_Shot_2013-01-31_at_10.53.28_AM.png

  • Change the size of the icons. There is 16x16, 24x24, 32x32, 48x48 and custom.
  • Change the layout format from horizontal to vertical
  • Show the network name next to the icon
  • Open the link in a new window when a visitor clicks on it
  • When using a custom 'floating' template, indicate the number of pixels to offset to the right or left.

Setting up the Social Share Block

Networks Tab

Screen_Shot_2013-01-31_at_10.58.47_AM.png

  • Add a new network by clicking the 'Add a Network' button at the bottom
  • Select the network by changing the dropdown. Each network has it's own options, none of which are required.
  • Rearrage the networks by dragging and dropping the 'up/down' arrow on the left side
  • Delete a network by clicking the 'x' on the right side

Layout Tab

Screen_Shot_2013-01-31_at_11.02.07_AM.png

  • Choose the layout format, either horizontal or vertical
  • Choose the button format:
    • Bubble
      Shows the Social Button and number of clicks in a vertical format 
    • Horizontal
      Shows the Social Button and number of clicks in a horizontal format 
    • Icon
      Shows only the Social Button without the number of clicks
  • Email share colors are used if you select 'email' as a network. They default to light blue for the background color and orange for the button color.
  • When using a custom 'floating' template, indicate the number of pixels to offset to the right or left.

Setting up the CSS Share Block

Networks Tab

The networks tab for the CSS Share block works similarly to the Social Share block with the addition of background and icon colors.

Screen_Shot_2013-01-31_at_11.08.22_AM.png

  • Add a new network by clicking the 'Add a Network' button at the bottom
  • Select the network by changing the dropdown. Each network has it's own options, none of which are required.
  • Select the network's background and icon colors.
    • Choosing 'Default' for both will use colors similar to the native colors of the network.
    • Choosing a custom color for the background and 'default' for the icon will use a contrasting color for the icon.
    • Choosing a custom color for either the background and/or the icon will allow you to customize the link however you wish.
  • Rearrage the networks by dragging and dropping the 'up/down' arrow on the left side
  • Delete a network by clicking the 'x' on the right side

Button Format Tab

Screen_Shot_2013-01-31_at_11.12.21_AM.png

  • There are two options for icon type:
    • CSS
      Uses CSS and small images to generate the icons
    • Connect Icons
      Uses the icons from the Social Connect block instead of the CSS icons 
  • If you are using the CSS icon type, the above options will be shown.
  • You can tweak various aspects of the icons, such as the corners, a gradient overlay, a glossy overlay, an embossed look, the border thickness and the size of the icons.

Layout Tab

Screen_Shot_2013-01-31_at_11.13.24_AM.png

  • Choose the layout format, either horizontal or vertical
  • When using a custom 'floating' template, indicate the number of pixels to offset to the right or left.