Social network widgets. Social network widgets Social network widget

There is no secret that for many years there have been special social networking buttons, the installation of which on a website allows you to see an increase in traffic, and at the same time contributes to the development of a PR campaign for your resource. Sharing materials provides coverage to a gigantic audience of potential customers, readers and subscribers.

With the installation of social network sharing tools, the level of trust in the site from search engines increases. The method also works well as part of promotion in organic search results for Micro Low Frequency queries if you add unique comments to the share.

Our article will tell you how to choose, correctly 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%!

Effective sharing tools can be added in two ways:

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

All services are platforms where, after entering 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 immediately cover all relevant social networks. networks “in one fell swoop”;
• Variability in the choice of appearance of buttons and their aesthetic appeal;
• Maintaining the general style and geometry of the block, regardless of the selected social networks.

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

And yet nothing is perfect. Social button services, unlike official solutions, have a number of disadvantages:

• Reduced page loading speed, which can negatively affect both the site’s ranking in search results and sales volume;
• Failures and errors in the operation of servers, leading to long loading times for buttons or their temporary unavailability;
• Periodic appearance of advertising;
• Lack of a stable algorithm for working via AJAX;
• Possible memory usage of browsers;
• Presence of questionable traffic;
• Failure to provide guarantees for the security of user data.

• Plugins from different platforms may differ in design and size, which makes it difficult for them to coexist harmoniously on the same page;
• The process takes longer and requires some preparatory steps and basic knowledge of html.

There are a large number of services on the Internet, each of which has its own characteristics and constantly pleases users with improvements in the system for setting up social network buttons and implementing them on the site. Let's look at the most popular designers.

Appearance options:

List of networks available for sharing:

Primary setup for displaying social network buttons from Yandex and ready-made code:

To install the block, you need to insert the generated code into the desired place in the site's html code. It is possible to work more precisely with attributes, set up asynchronous loading of the script, etc. (see documentation).

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

Preview window and additional options:

Having made simple manipulations to select the necessary social networks. networks, icons and their settings, you can see the code:

(function() ( if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) ( window.ifpluso = 1; var d = document, s = d.createElement("script"), g = "getElementsByTagName"; s.type = "text/javascript"; s.charset="UTF-8"; s.async = true; == window.location.protocol ? "https" : "http") + "://share.pluso.ru/pluso-like.js"; var h=d[g]("body"); (s); )))();

To display the service correctly, you just need to copy the resulting script with the attached data and install it into the website layout in the selected location.

Along with sharing tools, it makes it possible to install special service elements: “print”, “bookmark”, etc.

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

The social button script looks like this:

The code for working with a widget is more complicated:

window.informerPosition = (vert:"top",hor:"left")

To install, just place the data in the template.

Representative of “instant” code generation services for installing social buttons - Pip.Qip. Simplicity here only emphasizes comfort.

To receive the coveted code you need:

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

An alternative to the certainly convenient, but not always acceptable services of social buttons is the social networks themselves. networks that make it possible to manually add buttons to a website using plugins and APIs.

The famous VKontakte generates sharing button codes at this address.

Using the widget, you can choose the type of future button and “tighten” the counter (“style” item), 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 location of the button:

The method for obtaining official Facebook buttons is even simpler and clearer. On the website you can use

All of us, while working on our project, want to convey information to our readers as quickly and as completely as possible. Therefore, we try to place all this where it will always be visible - in the sidebar. And therefore, there is always not enough space. And we also need to place widgets for all social networks there. This is why you need to use the Social Carousel service - all social network widgets in one. We’ll talk about all its advantages and customization features below.

Often we are faced with the problem of placing various advertising banners, affiliate information, our subscriptions, our information products, information about columns, articles and comments on a blog. And, of course, placement of the now so popular social media widgets. And all this avalanche of information must be placed in a visible place. And most often this place becomes the sidebar.

Classically, everyone uses two-column templates (field and sidebar on the right side). I think increasing the number of columns is not entirely correct, because it greatly clutters the space and negatively affects the behavioral factors of visitors.

By the way, the title says Part 1 because this is the first post in a series about saving space in the sidebar. In the following posts I will look at using the banner rotation function and using tabs to improve the usability of the site. Therefore, subscribe to blog updates.

There is no need to prove that participating and promoting your brand on social networks is now very important. Therefore, it is extremely important that they are presented on the site. And so I wondered how to implement the combination of all social media widgets in one place. And lo and behold, I came across a solution to this issue. Meet...

This is a free service, thanks to which it is possible to significantly save space in the sidebar of our project. I would like to note that this service makes it possible to place a widget not only on the WordPress engine, but also on handwritten sites by inserting html code. All widgets of such popular networks as: , Facebook, Google+, YouTube and Twitter are implemented in one widget in the form of tabs. Visually it looks like this:

Let's start getting acquainted. The widget service is located.

I won’t talk much about the settings; its developer took care of a good explanation of how it needs to be configured. The instructions are presented in videos where we are introduced in sufficient detail to the features of its installation on the site. There are some peculiarities, but they are not critical and can be solved quite easily. The most important thing is that you practically won’t have to edit the code. The service will do everything for you.

We go through the standard registration procedure. Let's go to the service. Click – My widgets (point 1), then – Create a new widget (point 2). We fill out the field with what it will be called and enter the address of our website (point 3). Save (point 4).

We find ourselves in the next tab, where the actual construction takes place. Our widget is assigned an identification number. If you plan to install it through a WordPress plugin, then you need to check this box (point 1). We put down the dimensions we need and set its tabs to auto-switch (they will be scrolled one by one after a given time interval) (point 2). In the form of a widget, at the bottom, there will be a link to the developer and we are offered to remove it for money (point 3).

Let's proceed directly to the social networks themselves. You can use the arrows to set the order in which the tabs are located (point 4). Click on the red button to proceed to setting up the social networks themselves (point 5). You can choose which of them will participate in the show (there are different situations - problems with your Google account or the VKontakte page is frozen).

We check the box that we will use a plugin for WordPress (point 1). Check the box Enable auto-switching of tabs and set the time for their display (after how many seconds will it take to flip to the next one) (point 2). Then the most interesting part, because this information is not so obvious. In the widget you can place groups and communities from social networks, and not personal pages. Fill in these fields (point 3). We check whether the installation is correct by clicking the Preview button (step 4).

To see the ID of a VKontakte group, go to it, move your mouse to Participants, then right-click Copy link and paste it into the address bar. The last digits in the address are the group ID. Eat. We put it in our VKontakte field.

Setting up widget ID for Twitter. Let's go to our page. Then go to the upper right corner - Settings. From the pop-up menu, select – Widgets. We configure the widget required in style and size, and in the new generated code in the window we find the line with the ID. The numbers after it are our widget ID for Twitter.

To see your user login on the YouTube channel, log in to Google+ and go to this link. Take the ID and paste it into the form.

To look at the ID on Google +, log in there, go to Profile and you can see the numbers in the address bar. They need to be inserted into the field in the form.

For Facebook (important!), we copy not the profile link, not the group link, but the page link. My Facebook page looks like this:

All. The form has been filled out. Click Generate code. This is the code we have. Let's copy it. Now we have 2 options for installing it on the site.

Option 1. Via a WordPress plugin. To copy it, go to the WordPress Plugin, like on any of the social bookmarks and download it.

Then we install it on the engine as standard and activate it. Then Settings - Social carousel. We paste our code, enter its ID, set the widget’s dimensions and save.

Go to Appearance – Widgets (points 1-2). Drag the Text widget to the sidebar and place the following code for displaying the social network widget in it:

Ready. We admire and enjoy the results of our labors.

Option 2. This plugin began to conflict with one of the already installed ones. Moreover, the recent trend is getting rid of unnecessary things and saving space. Therefore, I demolished the plugin and placed our generated code in my theme’s header.php file before the closing tag. It turned out something like this:

My generated code

I left the sidebar widget with the output as is. You can see the result here on the blog on the right side. It’s quite well made and has a huge plus – it saves us space.

That's all. An excellent service, most importantly FREE, which allows you to significantly improve the usability of the site. I think you will like it. Today we saved space in our sidebar by installing the Social Carousel service widget - all social network widgets in one. If you have any questions, please contact us and don’t forget to leave reviews. Subscribe to blog updates. See you soon.

Finally, watch a video about the service:

Do you want to be in the TOP? The uniqueness of the picture will help. We use the TinEye service

Social media widgets on a website can be used for different purposes. Most often, community widgets are built into the site so that visitors can subscribe to updates or follow company news, and comment widgets - since most Internet users are registered in one or another social network, this does not require filling out additional fields, which is convenient when commenting on materials . We will talk about how to insert them into the site in this article.

To get the widget code, go to page for VKontakte developers. Here we carefully fill out the form provided. Change the default link to a link to your group, select the type of display of the community, adjust the block width and colors. A preview of all changes made is available below. It is better not to change the colors, even if they do not fit the site design - everyone is already accustomed to this group design and changing the color may cause confusion. Next, copy the generated code and paste it into the desired place on the site.

The Facebook Community Widget embed code can be obtained from the developer page. Here we fill out the form with the widget settings:

After settings, click the Get code button and copy both fields to the desired location on the site.

To add a twitter feed to the site, go to page(Settings->Widgets->Create new). If you are logged in from the profile of the account whose widget you want to create, then you will already have a ready-made version of it, which can be adjusted if necessary. The block width is adaptive, that is, the widget will adapt to the width of the block in which it is placed; you can only adjust the height. Next, click the “Create Widget” button and copy the code that appears.

If your company is represented on several social networks, then it is most convenient to make a block with tabs, on each of which place a widget of the corresponding social network.

For Runet, the most popular are VKontakte comment widgets, the reason for this is obvious.

Go to the developer page at comment widget block. Here you need to fill out a form indicating the site on which the widget will be placed, indicate the number of comments, block width, and allow or disable attaching media files.

You can add multiple administrators to a group. To do this, just go to settings page and in the administered applications, select the “Edit” item for the desired one. Next, in the “Management” tab, add the required person.

Second method: after inserting the block on the site, click on the link Administration -> Assign administrators, which will redirect you to the desired VKontakte page.

On the comments block settings page, set the necessary parameters (it is not necessary to change the url) and click the “Get code” button.

To add administrators to comments, you additionally need to add a meta tag, in which you need to insert your profile ID instead of YOUR_FACEBOOK_USER_ID.

property = "fb:admins" content = "(YOUR_FACEBOOK_USER_ID)" />

If there should be several administrators, it is enough to list their IDs separated by commas.

If you have any problems or questions, ask them in the comments or contact our specialists for help. We work with almost any content management system!

With the help of social networks, many websites are now being promoted, and experienced webmasters are well aware of how important it is to integrate their sites with the most popular resources. Regardless of the type of site and its purpose, buttons and forms of social. networks are definitely worth installing.

Social network widgets can be installed in several ways. The most time-consuming process is a separate addition through sections for developers. To make this task easier, you can use special services. Which method to use is up to you to decide.

VKontakte, Odnoklassniki and their analogues have special sections for webmasters. They propose to separately add functionality to your resources. In VK, to do this, you need to scroll to the very bottom of any page and select the “Developers” section:

There you will find another section through which sites are connected and widgets are installed:

The choice is wide, and if you don't need many different features, you can choose from one of the options. Most often, websites include comments from social networks. This is convenient, because users can leave a record without registering or entering various data:

After selecting a widget, you are provided with a special code; you need to add it to the site code. Conveniently, it also provides clear instructions for installing widgets:

Even a beginner can figure it out, and if something doesn’t work out, see the detailed instructions. Even if you use other social networks. networks, there is no difference, the same actions are performed.

It’s inconvenient to add each widget separately, and you don’t always want to deal with the codes. There is an easier way to put them on your website, through special services. In addition, they help to add original blocks. For example, in the Socialcarousel system you can install one widget for all social networks:

An interesting option, but it is better to use more popular services such as Pluso. They have social buttons available. networks with flexible settings. You can install specific projects and choose the design of the buttons:

Using the settings, you can make a block so that it fits perfectly into the site design. Experiment and try several display options to find the best look:

Modern society is accustomed to social networks and actively uses them, so integrating your resource will definitely not be superfluous. Increased ease of use of the site affects behavioral factors. Just don’t forget to install widgets for all social networks, because your visitors can be fans of not only Odnoklassniki or VKontakte.

It’s easy to add social network widgets, and if they help in some way with development, then why not take advantage of it? In conclusion, I would like to give some more advice. They also help add widgets and expand the user experience.

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

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

We will mainly talk about how to link a group on social networks to your website. And place a subscription form in the sidebar to make it easier for people to subscribe to updates. But besides this, some social networks offer other useful features that are worth mentioning. So, in addition to this, I considered the creation of surveys, likes, reposts, and comments from social networks - there is a lot of information and all of it is useful.

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

I really like the social network VKontakte, so I’ll start with it. I only wanted to talk about how to add a group widget, but at the same time I’ll look at the rest in case something else interests you.

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

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

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

“Comments” widget - you can place a block with comments from VK on your website, as I did. It is more convenient and quicker for people to leave an entry in this form than to enter their name and email in the standard one. And with such comments, a repost is automatically made on 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, address, select a topic - this is registering your site in the system. Add it 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”). Click on more details next to Media, and you can disable some features. Specify the width of the comment box so that it is not too short and does not extend beyond the edges. If you didn’t guess right away with the width, you can correct it directly in the code - replace the numbers in “width: “665”.

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

If you have difficulty placing this code, you can add comments using the special VK Comments plugin. 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).

The “Wall Post” widget is rarely used, but may be useful to someone. With its help, you can insert a post from VKontakte into an article. All likes are saved and displayed on the post in the group. Another method to use is to quote important information verbatim, immediately citing the source.

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

The Communities widget is a great way to connect your group and website so that people subscribe more actively. Add this widget to your sidebar and it will always be visible.

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

The Like widget is designed to allow users to like your articles and share links to them with friends. All you have to do is customize the appearance of the button to your liking, and then copy the code and paste it into the site.

In the “Button with text counter” option, you can choose the label for the button yourself.

The Recommendations widget only works 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).

The Polls widget makes it quick and easy to launch a survey on your site. In the subject field, enter a question, and below list all the answer options, adding new ones using the button Add. Select the size to match the width of the sidebar or page, copy the text and paste it into the desired location.

The “Subscribe to User” widget displays a separate button that allows you to become your VKontakte subscriber with one click. This is not about the group, but specifically about your account. Provide a link to a user you can 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.

Let's go to the developer section. 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 admin panel Design - Widgets, drag the Text widget to the left area and paste this code.

Let's 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 Docs section in the top menu and find Social Plugins in the lists.

Go to the Page Plugin section and fill out information about your group: link to the page, 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 a backup copy of your site so that you can quickly restore it if an error occurs.

Finally, I’ll 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.