How to add social network widget css. Social media buttons. Social Media Buttons Share Pluso

Pros:

Pluso X

An experimental version of the Share Pluso social buttons builder. It has improved the design of icons, a pop-up window with a full list of available social networks, and also the annoying orange button with the "+" sign has undergone changes, in its place is now the same plus sign, but in a more pleasant design.
According to the developers, new social buttons are sharpened for Retina monitors... Everything else, at first glance, remains the same. Unfortunately, among the available options in the constructor, I did not find buttons with a counter, although they are in the standard Pluso edition.
I don't know if they will replace the old constructor with the new constructor, but at the moment, both work simultaneously on different links.

Add This

Add This is a service that provides high quality, stylish and flexible social buttons. This resource is the leading one in the west. It is less popular with us, but I often come across Russian-language sites with the Add This widget.
There are free and paid widgets. Only the simplest options are available in the free account. There are many more design concepts available in paid, such as: responsive buttons, buttons with various counters and much more.
This option for our people, I think, is poorly suited, since you will have to pay for the bells and whistles, and in the domestic market you can find all the same, but for free.
Add This builder has a huge list of social media available including Vkontakte, My World and Odnoklassniki. There is a plugin for.

Good share

Light and beautiful share buttons for your site with a small embed code, which is very attractive. Unfortunately, there is only one design option with several color schemes... There are all social networks popular on RuNet
According to the developers, their brainchild optimized and search engines will love your site. I don’t know how much truth is here.
If you don't need the bells and whistles, this option is for you.

Shareaholic

A very interesting western service for creating social buttons that I discovered recently.
Shareaholic offers several new concepts for share buttons. Personally, I liked the arrow above the buttons (arrows are a very powerful marketing tool), but, unfortunately, the inscription is in English, so it is not suitable for our people. Among the available social networks there are In contact with.

Greetings! Recently, I was asked in a feedback how to make the same social media buttons that are installed on my site. And I decided to give an answer in the article by reviewing 6 social services. buttons for the site.

Advantages and disadvantages

However, it should be noted that in some cases the placement of the buttons may have slight disadvantages. Let's consider why it is necessary to place social media buttons on the created blog, and also consider the main positive and negative aspects of placing such icons.

disadvantages

  1. Page loading speed may decrease.
  2. With a highly specialized focus of the Internet project, you may not get the desired effect.

Social media button services overview

Let's take a look at the most popular services that you can use to add social media buttons to your website.

    It is completely free service which works as follows. It automatically generates a special script with which it is possible for visitors to an Internet project to publish links to social networks. The service looks like buttons. Installation is very simple and convenient, and the placed buttons look nice on the page.

    The service offers over three hundred options for different buttons! You can very simply choose the ones you like the most.

    Installation takes place literally in one click. There is a statistics of transitions.


  1. This is probably one of the most interesting online services with which it is possible to generate a button by several parameters: size and appearance. In addition, you can choose how the panel with buttons will be located (horizontally or vertically). You can also specify the encoding. After selecting all the necessary settings, the generated script must be downloaded and placed on your Internet project in the required place. Mostly right after the article.


  2. Yandex offers to independently choose which social networks will be displayed. The user can do this by simply placing checkboxes in front of the buttons that will be placed on the block. You can edit their appearance.

    Next, the system will automatically generate the source code, which will need to be installed on your blog. The main advantages of this service include the fact that the script does not put outgoing links on the created blog. It is also possible to connect Yandex.Metrica to keep statistics.


  3. This service invites users to place very beautiful and stylish buttons of social networks on their website. The form created by the service uses css and javascript. The generated form will perfectly fit into the design of any internet project. Like buttons are made using modern jquery technology. The connection is very simple and will not cause any difficulties even for beginners. The download is very fast.


  4. This is a useful and completely free online service that offers users to place buttons in such a way: in one row, arrangement in the form of a drop-down menu, icons of all services in a row. After choosing the display options, the service will automatically generate a special javascript code that will need to be placed in the required place on the site.

    In addition, the service tells how to add the generated code to templates.


  5. When using this service, you can very quickly and easily add the necessary buttons to your website or blog. To do this, you need to follow only three simple steps: choose the place where the created widget will be located, choose the style of the buttons and get the code. By placing such buttons on the created blog, visitors will be able to add interesting materials to their own bookmarks and social networks.

So, the installation of social media buttons for the site is very simple, and will not cause any difficulties even for novice Internet users. Optionally, you can set either the buttons of all available networks, or select only some specific networks. To do this, you need to use official widgets or third-party online services... The most popular are buttons installed on personal blogs, or on news or entertainment Internet projects. :)

P.S. Thank you for the attention. What service do you prefer? Waiting for your comments. :)

Review of domestic designers and scripts of social media buttons for websites, as well as foreign analogues. Briefly, understandably and clearly.

Social media button designers for website

2. An easy way to get links to the site - QIP.RU
Place the button on the site and give visitors the opportunity to add their favorite site materials to bookmarks, blogs and social networks. Three steps: where to mark up the button (site, Blogger or WordPress), style the buttons (out-of-the-box) and get the button.

3. Buttons for adding content to social networks - Pluso
Place the buttons and give visitors the ability to share their favorite pages on social networks, as well as print, send an email and add bookmarks.

4. Service of social activity - UpToLike
Customized social media buttons with the ability to set color, shape, size and special effects. Additional features are the PicShare picture sharing widget, the "Quote" function and the customized Following function.

5. One button! - for all services of bookmarks and social networks
Select the kind of button. Where the button will be installed: website, Blogger or WordPress. Add a button.

Scripts of social media buttons for the site

1. Beautiful social buttons for the site - goodshare.js
Display buttons on almost any device. Clean code. Brief documentation. SEO friendly.

2. Script buttons for social bookmarks and networks - Share42
Select the size and mark the icons of the services you want to use on the site. Select the options you want. See how it will look and / or download a ready-made script. Install the script on your WordPress site, Drupal, etc.

3. Beautiful social media like buttons using jQuery - Social Likes
A script of "like" buttons with counters in the same style for social networks: Facebook, Twitter, VKontakte, Odnoklassniki, Moi Mir, Google+ and Pinterest.

Foreign analogues of social media buttons for a website

1. Share Buttons - AddThis
Sharing buttons will help you increase your site's audience by attracting visitors from other resources and social networks through the distributed content.

4. Social Sharing - Po.st
Get more value from social media sharing. The service will facilitate the process of sharing in social networks for visitors, which will increase the organic traffic of the site.

5. Share Buttons for Any Website - AddToAny
Get social media buttons code for any website. Choose the button type and style, specify email and other options, or choose one of the platforms: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad, or FeedFlare. Get the button code.

at 8:00 Change message 6 comments
  • Adding icons to profiles and groups in social networks
  • There is no secret that for many years there have been special buttons for social networks, the installation of which on the site allows you to see an increase in traffic, and at the same time contributes to the development of the PR campaign of your resource. Sharing content provides a huge audience of potential customers, readers and subscribers.

    With the installation of social media sharing tools, the level of trust in the site from the search engines increases. The method also shows itself perfectly within the framework of promotion in organic search results for Micro LF queries, if you add unique comments to the share.

    Our article will tell you how to choose, install and add convenient and beautiful social buttons to your website; what services offer their services and what are their advantages; how to add code and customize social media buttons yourself.

    Sharing via social media buttons allows you to increase site traffic up to 20%!

    Advantages and disadvantages of services

    Effective sharing tools can be added in two ways:

    Numerous multifunctional services offer users ample opportunities in customization and design, do not require special skills, and have an intuitive interface for creating beautiful elements.

    All services are platforms where, after entering the data, a code is generated that must be placed on the website.

    The main advantages of these "helpers" include:

    • Simplicity of integration and ease of learning;
    • The ability to cover all relevant social media at once. networks in one fell swoop;
    • Variability in the choice of the appearance of the buttons and their aesthetic appeal;
    • Maintaining the general style and geometry of the block, regardless of the chosen social networks.

    Conversion statistics are conveniently tracked in Yandex.Metrica and Google Analytics.

    Yet nothing is perfect. Services of social buttons, unlike official solutions, have a number of disadvantages:

    • Decrease in page loading speed, which can negatively affect both the position of the site when it is ranked in the search results, and the volume of sales;
    • Failures and errors in the operation of servers, leading to long loading of buttons or their temporary inaccessibility;
    • Periodic appearance of advertisements;
    • Lack of a stable algorithm for working through AJAX;
    • Possible memory usage of browsers;
    • The presence of questionable traffic;
    • Failure to provide guarantees for the safety of user data.
    • Plugins from different platforms may differ in design and size, which complicates their harmonious coexistence on the same page;
    • The process takes more time, requires some preparatory steps and initial knowledge of html.

    Social media button services overview

    A large number of services are presented on the Internet, each of which has its own characteristics and constantly pleases users with improvements in the system for configuring social network buttons and their implementation on the site. Let's consider the most popular constructors.

    Yandex social media buttons

    Appearance options:

    List of networks available for sharing:

    Initial setup of displaying social media buttons from Yandex and ready-made code:

    To install the block, you need to paste the generated code into the desired place in the html-code of the site. More precise work with attributes, setting of asynchronous script loading, etc. is possible. (see documentation).

    Pluso

    A well-known analogue of the famous service in the Russian segment. The constructor stands out for its attractive design of elements, convenient functionality and the presence of useful settings.

    Preview window and additional options:

    Making simple manipulations to choose the right social. networks, icons and their settings, you can see the code:

    For the correct display of the service, the resulting script with the attached data is enough to copy and install in the layout of the site in the selected place.

    Along with tools for sharing, it makes it possible to set special service elements: "print", "bookmark", etc.

    Uptolike

    Visitors can choose 4 types of buttons, one of which is a widget (with different positions relative to the page).

    The social buttons script looks like this:

    To work with a widget, the code is more complicated:

    To install, just place the data in the template.

    Pip.Qip.ru

    The representative of "instant" services for generating codes for installing social buttons - Pip.Qip. Simplicity here only emphasizes comfort.

    To get the coveted code you need:

    1. Indicate the type of site for placement;
    2. Choose a style from the list;
    3. Click "I want already!" - and contemplate the finished code at the bottom of the page.

    All that remains is to place it in the site code.

    Adding social media buttons manually

    An alternative to the undoubtedly convenient, but not always acceptable services of social buttons is the social buttons themselves. networks that provide the ability to manually add buttons to a website using plugins and APIs.

    The famous "Vkontakte" generates codes for sharing buttons at this address.

    With the help of the widget, you can choose the type of the future button and "screw" the counter (item "style"), come up with an original name ("text") and get the coveted code.

    The first part of the code should be placed inside the tag :

    The second - to the place of the direct location of the button:

    The methodology for getting the official Facebook buttons is even more straightforward and straightforward. On the site you can use

    2 comments

    In parallel with a website or blog, it is useful to have a group on social networks. There you can post announcements of your new articles, share information on related topics and just write your thoughts. And in return, you will receive an additional influx of visitors.

    Social media widgets for your website will help you link these two projects. After a simple setup, links to your groups will appear in the sidebar, and people can immediately subscribe to them.

    This will mainly focus on how to link a social media group to your website. And place the sign up form in the sidebar to make it easier for people to sign up for updates. But beyond that, some social media offers other useful features that are worth mentioning. So, in addition to this, I considered the creation of polls, and likes, and reposts, and comments from social networks - there is a lot of information and all useful.

    But here again it is worth knowing when to stop, because the more different widgets there are, the longer the site will load and problems may arise.

    VKontakte group widget on the site

    I really like the social network VKontakte, so I'll start with it. I just wanted to tell you how to add a group widget, but at the same time I will consider the rest - what if something else interests you.

    To get access to all widgets, you need to go to the Settings section and at the bottom of the page click on the Developers button.

    On the next page, select the middle icon that says Connecting sites and widgets.

    And here you can see all kinds of widgets for your site:

    Comments widget- you can place a block with comments from VK on your site, as I have done. It is more convenient and faster for people to leave a record in this form than to enter a name and mail in the standard one. And even with such comments, a repost is automatically made to the commentator's wall, which will be a big plus for you.

    The settings are not complicated. You need to enter the name of the site, the address, select the topic - this is the registration of your site in the system. Add once, then you can simply choose from the list.

    Then the settings of the form itself: select the number of comments that will be displayed on the page (the rest will be under the spoiler "show other comments"). Press more details next to Media, and you can turn off some functions. Specify the width of the comment margin so that it is not too short and does not go over the edges. If you haven't guessed right with the width, you can correct it right in the code - replace the numbers in "width:" 665 ".

    Copy the code and place it where you want it on the page. You can delete comments, blacklist some users, or hire a moderator to view comments - there is a lot of spam.

    If you have any difficulties with the placement of this code, you can add comments using the special plugin VK Comments. You can find out the ID in the same section for developers, just select My applications in the top menu and open the desired site. The numbers at the end of the link will be your ID (for example, vk.com/editapp?id=123456).

    Wall Post Widget- rarely used, but it may come in handy for someone. With it, you can insert a post from VKontakte into an article. At the same time, all likes are saved and displayed on the entries in the group. Another method of use is to quote verbatim important information, immediately giving a link to the source.

    Open the desired post by clicking on its date, copy the link from the address bar. Paste in top margin, set width. After that copy the code, paste it into the article in Text / Html mode. On the right, you can immediately see how it will look.

    Communities widget Is a great way to connect your group and site so that people are more active subscribing. Add this widget to your sidebar and it will always be in front of your eyes.

    Below you can customize the color if the standard colors do not suit you. After that, copy the code and paste into the Text widget to add it to the sidebar. Or to any other place on the site, as it is convenient for you.

    Like widget is designed so that users can like your articles and share links to them with friends. It is enough to customize the appearance of the button at your discretion, and then copy the code and paste it into the site.

    In the "Button with text counter" option, you can independently select the label for the button.

    Recommendations widget works only in conjunction with the previous one. It analyzes the number of likes on articles, and displays a list of the most popular posts. The settings are all intuitive: the number of records, for what period the data is displayed (day, week, month) and the text above the section (Like / Interesting…. People).

    Polls widget allows you to quickly and easily launch a survey on your site. In the field with the subject, enter a question, and below you list all the answer options, adding new ones using the button Add... Choose the size to fit the width of the sidebar or page, copy the text and paste where you want.

    Follow user widget displays a separate button that allows you to become your VKontakte subscriber with one click. This is not about the group, but about your account. Provide a link to a user to follow, and then choose the appearance of the button from 4 options.

    That's all the widgets VKontakte widgets that can be placed on the site.

    Classmates widget on the site

    We go to the section for developers. To do this, go to Settings, then go down and find Developers. In the next window, select Social Widgets.

    There are not very many settings here, so you can easily figure it out:

    • Choose the width and height yourself according to your wishes.
    • Group ID - go to your group, and look at the address bar. The numbers in the line will be your ID (for example, http://ok.ru/group/50582132228315). Replace the numbers with your own.

    Copy the code, then go to the Design - Widgets admin area, drag the Text widget to the left area and paste this code.

    Facebook widget to website

    We go to the page for developers: under the right section "you may know them" there is a list of various links, but you need to click on "more", and in this drop-down list select For developers.

    Then go to the top menu to the Docs section and here find the Social Plugins in the listings.

    Go to the Page Plugin section and then fill in the information about your group: page link, widget width and height, and appearance.

    When you are satisfied with the result, just click "Get Code" and then you will be offered two codes.

    Make backup site in order to quickly recover in case of an error.

    1. Insert the part above which it is written Include the SDK JavaScript on your page once, ideally right after the opening body tag- go to the admin area, select Design - Editor and find footer here. Launch a search box (ctrl + F) and search for body. We need exactly the closing one -< /body >... And on the line above, right above it, we paste the code from the top window. Save.
    2. The second part needs to be inserted in the widgets. To do this, go to Design - Widgets and drag the Text widget to the left area and paste this code. Check the functionality and that everything is displayed correctly.

    Twitter widget to website

    Finally, I will consider adding twitter, although it is added quite rarely.

    Go to Settings and select Widgets.

    After that, click on the big Create button and customize the appearance of the widget.