JBZoo Social - social buttons

9.5/10 rating (4 votes)

Lately a lot of people constantly use different social networks. There they communicate, read news, make comments etc.

That’s why it became important to place social buttons on your websites. By using them people can make links to the pages they like. And their friends follow these links. This way the conversion is increased.

ZOO component has Social buttons element that uses only three buttons: Google+, Facebook and Twitter. But often that’s not enough.

We made JBZoo Social element that contains 20 buttons so your visitors will be able to share links in different communities.

How to add new element?

Go to the “cog-wheel” tab and select JBZoo App:

Getting to JBZoo settings

Find an item type where you want to create new element and click on “Edit Elements”. Click on JBZoo Social in the Element Library and you’ll get a new element.

Going to the item typeElement Library

Fill in the usual information that all elements have: name, description and access level. By using the setting below, choose which buttons should be displayed on the website.

Editing new element settings

How to configure the element in an item template?

Find an item type where you added new element and choose the required item template.  Drag your element to a position in the left.

Item template layoutsDragging an element

You’ll see a lot of settings. Let’s examine them.

Vkontakte button

“Vkontakte Like” is an option that allows you to add “likes” for this social network.

“Vkontakte button type” is an option to change the appearance of a button. In the drop-down list you can select a type which suits your website the best:

  • A button with a text counter;
  • A button with a mini counter;
  • Mini button;
  • Mini button, counter at the top.

“Button height” is a vertical dimensions. Choose the one that is better for you (18, 20, 22 or 24px).

“Text of the button” is a text that is displayed inside the button.

“Application ID” is a code that is necessary to display the “Like” widget on your website. It is required and you can get it here. You have to be authorized.

VKontakte button settingsVKontakte "like" button

Facebook button

“Facebook like” is an option to enable “likes”.

“Send” is an options that adds “Send” button.

“Button template” controls the appearance of the button. Choose the one that fits your website better.

“Color scheme of the button” is a button hue (light, dark).

“Text on the button” is a text that will be displayed on the button (“Like” or “I recommend”).

“Localization” is a language that will be used for all the text on the button (russian, english).

Facebook social bookmark settingsFacebook social bookmark

Twitter button

“Via” is a setting where you can enter your Twitter username. Then the “via” text and a link to the specified account will be added to the message. Usually every company (website) has its own official twitter account. We recommend you to specify it in this field.

“Size” is a button parameters (big, standard).

“Recommend” is a text field where you can enter a username. After somebody tweets, he will go to the Twitter page of the specified user. You can specify a Twitter account of the company or of the website here.

“Hashtag” is a thematic tag that consists of a word or a phrase which is the main subject of a message. It should start with a hash (#) and can’t contain spaces.

“Twitter adaptation” is an option that determines what accounts visitors of certain sites read, and makes a block of recommendations for those who frequently visits same internet resources. If this option is enabled, it will allow twitter to collect information about users.

“Counter” is an option to enable counting of tweets.

Twitter social bookmark settingsTwitter social bookmark

Odnoklassniki button

“Your resourse” is a domain name of your site in the form of “http://mysite.ru”.

“Counter display” is an option that displays an amount of likes.

“Counter” option determines the location of a counter (right, top).

“Text on the button” is an option that enable displaying of text.

“Button label” defines the words written on the button (“Cool!”, ‘Share“, “Like”).

“Button type” option specifies the shape of a button (oval, rounded edges, square button).

“Size” is a dimensions of the button in pixels.

Odnoklassniki social bookmark settingsOdnoklassniki social bookmark

Google+ button

“The size of the button” is an option to set the dimensions of the button (Small, Medium, Big, Stretched).

“Annotation” is a text note:

  • Horizontal - it is displayed to the right of a button;
  • Only counter - displays only a counter above the button;
  • None - no annotation.

“The size of the annotation” is its dimensions (at least 120px).

Google+ social bookmark settingsGoogle+ social bookmark

Linked In

“Linked In” is an option to turn this social button on or off.

“URL” is an address that will be sent to this social network.

“Counter” option determines the location of the counter relative to the button (No counter, right, top).

Linked In social bookmark settingsLinked In social bookmark

Share Block (Yandex Share)

“Displayed services”. Specify a comma-separated list of services whose icons will be placed next to the button. Available values are: blogger, delicious, diary, evernote, facebook, friendfeed, gplus, guick, liveinternet, lj, moikrug, moimir, myspace, odnoklassniki, surfingbird, pinterest, tutby, twitter, vkontakte, yaru, yazakladki.

“Displaying template” is an appearance of the button.

Yandex Share social bookmark settingsYandex Share social bookmark

How to control social buttons within an item?

Open item editing screen. You’ll see a block of settings that enables or disables different types of social bookmarks. Choose “Yes” if you want to enable them Otherwise, choose “No”.

Element settings in an item editing screen

In the end you’ll have similar buttons:

Social buttons and bookmarks on the website

Elements, Facebook, Google, Social, Twiter, VKontakte

Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.