Like Buttons Archives - Heateor

If you are using Sassy Social Share or Super Socializer plugin to enable like buttons at your website, this question might pop up in your head.

The text of like buttons in other languages (non-English) spans more space than it does at websites in English language. That’s why there is space to take care of the elongated text in other languages.

You can adjust the space between like buttons by using CSS and saving it in Custom CSS option at Super Socializer > General Options page (or in Miscellaneous section at plugin options page, if using Sassy Social Share plugin).

For Super Socializer

Use following CSS to override the width of like buttons:

.the_champ_horizontal_counter li{
width: 100px !important
}

You can also override the width of individual like button. See following CSS as an example:

div.the_champ_horizontal_sharing li.the_champ_twitter_tweet {
    width: 95px !important;
}
div.the_champ_horizontal_sharing li.the_champ_google_plus_share {
    width: 95px !important;
}
div.the_champ_horizontal_sharing li.the_champ_facebook_recommend {
    width: 145px !important;
}
div.the_champ_horizontal_sharing li.the_champ_facebook_like {
    width: 100px !important;
}

For Sassy Social Share

Use following CSS to override the width of individual like buttons:

div.heateor_sss_horizontal_sharing li.heateor_sss_twitter_tweet {
    width: 95px !important;
}
div.heateor_sss_horizontal_sharing li.heateor_sss_google_plus_share {
    width: 95px !important;
}
div.heateor_sss_horizontal_sharing li.heateor_sss_facebook_recommend {
    width: 145px !important;
}
div.heateor_sss_horizontal_sharing li.heateor_sss_facebook_like {
    width: 100px !important;
}

If you are using Super Socializer plugin, you can use following Shortcode in the content of required page/post where you want to display Like Buttons.

You would like to read this post to use the shortcode without causing any problems at your site.

Like Buttons Shortcode

You can use [TheChamp-Counter] Shortcode in the content of required page/post where you want to display like buttons interface.

Example
[TheChamp-Counter]

You can use following attributes in the Shortcode

Style

Use style attribute to style the rendered like buttons interface

Example
[TheChamp-Counter style="background-color:#000;"]

Type

Use type attribute to specify the type (“horizontal” or “vertical”) of like buttons. Defaults (if not specified) to horizontal.

Example
[TheChamp-Counter type="vertical"]

Title (Works with “horizontal” type interface only)

Use title attribute to specify title above like button bar.

Example
[TheChamp-Counter title="Sharing is Caring"]

Align (Works with “vertical” type interface only)

Use align attribute to specify alignment (left or right) of like button bar. Defaults (if not specified) to left

Example
[TheChamp-Counter type="vertical"]
(Will align to left, as align is not specified)
[TheChamp-Counter type="vertical" align="right"]
(Will align to right)

Left (Works with “vertical” type interface only)

Use left attribute to specify the left offset (distance form the left side of the screen) of like buttons interface. Defaults (if not specified) to 0

Example
[TheChamp-Counter type="vertical" left="500"]

Right (Works with “vertical” type interface only, “align” attribute must be set to “right”)

Use right attribute to specify the right offset (distance form the right side of the screen) of like button bar. Defaults (if not specified) to 0

Example
[TheChamp-Counter type="vertical" align="right" right="500"]

Top (Works with “vertical” type interface only)

Use top attribute to specify the top offset (distance form the top of the screen) of like buttons interface. Defaults (if not specified) to 100

Example
[TheChamp-Counter type="vertical" top="200"]

Url

Use Url attribute to specify the url/page to be liked. Defaults (if not specified) to the webpage where shortcode is placed

Example
[TheChamp-Counter type="vertical" url="http://mywebsite.com/example.php"]

You can use shortcode in PHP file as following

<?php echo do_shortcode(‘SHORTCODE’) ?>

Replace SHORTCODE in above code with the required shortcode like [TheChamp-Counter style=”background-color:#000;”], so the final code looks like following
<?php echo do_shortcode('[TheChamp-Counter style="background-color:#000;"]') ?>

Widget

You can navigate to the Appearance > Widgets section in the left sidebar and enable Super Socializer – Like Buttons (Horizontal Widget) and Super Socializer – Like Buttons (Vertical Floating Widget) widgets in the required area.