How to make big social media buttons. Social media buttons

The second part of the code is placed where you want to see the social media buttons chosen for the site. If the code consists of only one part, then it is enough to do only this operation.

Most often, buttons are added before the article or at its end. Easier, of course, the second option. We will consider it.

You need to find the place where the article ends (the main text part of the page). To do this, you need to edit the file "One Record" (single.php).

Now you need to find the operator that is responsible for displaying the main content of the article. In my case, this is “the_content”, immediately after it, the button code is placed.

Similarly, you can place the code at the beginning of the article, you just need to find a place between the title and the text of the article.

Hi friends! Today's article will be very voluminous, but at the same time extremely useful. Why did I decide to write this article? The fact is that I am constantly asked how to get more fans in a particular social network? Why don't people follow my Facebook page? Why is no one following the company on Twitter?

Almost every company today has a website and even a blog. Do you have a website? Hope so! If not, then you need to think about it urgently! Well, with bloggers and owners of free professions (consultants and freelancers), it’s clear that they have their own address on the Internet - a website. Friends, the problem is that few sites are really optimized for social networks. They can produce a bunch of very useful and interesting content, but no one sees or hears them. SMO (social media optimization) Have you heard this term? So no one is engaged in this very CMO (optimization of the site for social networks). But in vain! There are a huge number of ways that experts know about to create what is said to be traffic on a website. Simple manipulations + having ideas and creativity can significantly help your company in promotion. This I guarantee you!

So below I will tell you, how to install official social buttons and widgets in the site. These will be only official buttons and widgets - no services or plugins!

Social networks have tried very hard and created a huge number of different buttons and widgets. No one has even heard of many, although they are freely available for everyone. Here, we'll cover only the most useful and effective ones that will help you grow your fan base, as well as make sharing your articles and other content simple and effortless for your site's visitors.

If you want to install the same buttons as on my site, then more about this is written.

Choose a social network whose buttons you want to set:

Types of social buttons

Before we get started with the button installation instructions, I want to draw your attention to the fact that there are different types of buttons:

Facebook, like other social media networks there is a large selection of social buttons and widgets. Each of them has its own function and purpose. In this section, we will consider only the most used and necessary ones. The rest you can view and test on the developers' site on Facebook.

Note: Let's agree right away. In the description of each section, I will give a link to the site of the developers of the social network in question. networks. On such pages, you can find links to all existing buttons and widgets. Therefore, immediately open the developers page in a separate tab and read further this article.

Facebook developer site: https://developers.facebook.com/docs/plugins

Like button

How to install?

Installing the "Like" button is very easy! You need to go to the developers' site on Facebook (as we agreed, the link is at the beginning of this section). Before you start creating new buttons and widgets, you need to create a new app in the Apps menu. This must be done, because without it, Facebook will not let you create buttons!

If you have any problems with creating an application or generating scripts, let me know in the comments, and I will make even more detailed instructions on installing buttons.

So, to set the "Like" button, on the developers page, in the left column, click on " like button (web)«. Now you need to choose from the options offered by Facebook to get exactly the widget you want.

1) Url to Like— enter a link to the page, publication, landing page for which you are creating the “Like” button. It can be any type of content, even an image or video. The main thing is that you provide a link that users will share.

2) Width- If you have limited space for the button, then you can specify the width of the widget in pixels. The buttons themselves are small, but if you choose the standard buttons, the text takes up quite a lot of space. I will talk about this in the next paragraph.

3) layout- Widget type. Facebook offers a choice of 4 options: standard (as in the picture), with a large counter, with a small counter and just buttons. It all depends on your taste, the style of the site, the available space for buttons, and the desire to show counters (i.e., how many people clicked on the button).

4) Action Type- type of action, i.e. what type of button you want to set: "Like" or "Recommend". I wrote in detail about the differences between these buttons - and widgets on Facebook in general - in my .

5) Show friends' faces- if you want the buttons to show the visitor of your site the avatars of his friends who have already clicked on the "Like" button, then check this box. If none of the friends liked the page, article, etc., then Facebook will not display the photo, but in the text it will offer the user to be the first to like it. If space permits, I recommend enabling this option, as the faces of friends have a positive effect on the perception of the content by the reader, increasing his trust and often pushing him to click on the button as well, if only out of solidarity.

After you have filled in all the fields, click on the button Get Code to generate the code that you will install on the site. The first part of the script is set to the tag page, and the second part is inserted in the place where you want to set the button.

The site should open in Russian, but if, for some strange reason, it is in English, then you can change the language at the very top of the page.

How to install?

Tweet button

Another well-known button on Twitter is "Tweet", which allows users to share your content with their Twitter followers.

How to install?

All Twitter buttons are installed on the developers page mentioned above. The process for all buttons is almost identical - we select the desired type of button, fill in the parameters and copy the code, which we then paste on the site.

Hashtag Button

This is a very interesting button, which, I'm sure, almost no one knows about. I personally have never seen anyone in RuNet use it. However, it is very good for certain tasks. For example, such a button can be used to promote any events, webinars, discussions on Twitter under a certain tag, marketing campaigns, contests. Yes, whatever! There is a lot of room for creativity here!

It is logical if the hashtag button is installed on pages related to this hashtag. For example, let's say you wrote an article about a new one you're doing for fans on Twitter. To participate in the contest, you must use a specific hashtag. Using a similar button, you will make life easier for a person, because by clicking on it, he will open a tweet with the desired hashtag. He can just add some text and send the tweet free floating. And he is well, and you will have a new member. Isn't it great? In a word, you need to forge iron without leaving the cash register, that is, while the reader is under the emotion of what he has read. Two minutes later, he will be distracted and may forget what he just read.

While my imagination is running wild, I'll share one more idea with you. Let's just say you're hosting an event (online or offline). To promote it, you create a separate article or page dedicated to this topic. Right there, in the text, you insert a "Hashtag" button and next to it, you insert a separate widget that will display, in real time, all tweets using this hashtag. After viewing the discussion of other users, perhaps your not very active reader will ripen in order to take part in it. The goal here is to draw the reader's attention to what is happening, engage him in the discussion, and, of course, keep him on the site.

How to install?

The "Hashtag" button is set all from the same page that I wrote about above.

Mention button

Finally, I’ll tell you about one more good button, which, unfortunately, no one uses. But in vain! This can be said to be an ordinary tweet sent to a pre-specified profile. I think that the button is little used because many do not know how and where to set it. Here are a couple of examples that come to my mind. If you know that your target audience is on Twitter and actively uses this social. network, why don't you encourage people to tweet you directly from the site? It could be a tweet to the author of an article, a tweet from an About or Contact page, a tweet straight to Twitter support, etc. See how many opportunities you're missing out on to get your Twitter account alive?

If a person came to your site, then he already has some interest in you, so you need to push him to action right now. In a minute it might be too late! Alas, such times have come that we forget to do something very quickly, as we switch attention from one to another every minute. And the younger your audience, the more this phenomenon manifests itself, so do not forget about the existence of this button and try to use it where appropriate.

How to install?

We install the button all from the same page. If you read the instructions for the previous buttons, then all the options for the "Mention" button on Twitter should be clear to you.

See below how such a button works. Don't forget to tweet me what you think of this article 🙂 It's important for me to know what my readers think, so I'd love to hear from you.

Mention button example

Widgets Twitter

We figured out the Twitter buttons. Now I would like to briefly tell you about the official widgets that Twitter has. Scripts for all widgets, you can get this link.

Widgets are of the following types:

• Regular Widget with the latest tweets;
• Search Widget, which shows the search results for the given key in real time. This type of widget is very convenient for searching, for example, by your branded hashtag. See an example of its use in the Hashtag Button for Twitter section;
• Favorites Widget- Shows tweets that you have added to your favorites. This type of widget can be used, for example, to show positive feedback about a company. Why not?
• Collections Widget Collections are something between favorites and lists. You can manually select which tweets will be included in the collection. I note that each collection has its own link and description. This feature is very little used on Twitter, although it is very interesting.
• Lists Widget shows the profile lists you have created. Here, too, you can be creative and do something interesting and useful for the reader, which, at the same time, will benefit you. How about a list of partners, your company accounts (if there are many), a portfolio of Twitter accounts you manage (for agencies and freelancers) or, for example, a list of members in your club? Again, there is no limit to creativity here.

An example of a regular Twitter widget

In contact with

The social network Vkontakte, like others, has a whole bunch of different buttons and widgets. A complete list of them can be seen on the developers website: https://vk.com/dev/sites

Again, I will only go through the most important ones, otherwise this article will not be an article, but a whole book ... I think that it will be much easier to understand the VK widgets, since the website and all the necessary documentation are also available in Russian.

Like button

How to install?

First you need to go to the widget page. I gave a link to the list of widgets at the very beginning of the Vkontakte section.

How to install?

In order to insert the "Community" widget into the site, you first of all need to enter a link to your page or group in Vkontakte. Next, you choose whether you want the widget to display the faces of the group members or fans of the page, as well as the latest news from the page, or whether you want a simple plug-in with a Like button. Since the VK widget is very similar to Facebook, the recommendations regarding the type of plugin remain the same. I won't repeat myself, so if you're interested, check out the Facebook plugins section.

Next are the parameters related to the size of the plugin and its appearance. It all depends on the color palette of your site and the available space for the plugin. In principle, you can choose any color, but it is still recommended to keep the original color palette, since such colors are more familiar to users and do not frighten them. And finally, we got to the last point - we insert the code into the site. As you already remember, the first part of the code goes into the tag page, and the second part to the place where the plugin will stand.

Most recently, I created a blog page "About SMM" in Vkontakte. Therefore, if you want to receive the latest updates in this social. networks, then join!

Example plugin "Community" Vkontakte

Follow Author Widget

Like the similarly named Facebook plugin, this widget is recommended for anyone looking to grow their personal brand. If you are, for example, an author of books or a blog, a journalist, a lawyer, a real estate agent, etc., then why not install such a button on your website? It is easier for potential buyers to establish contact with a real person than, for example, with a page or group for which it is not clear who is behind it. This is how we are arranged, a person is a social being, and we love personal contact, therefore, such a widget will come in handy for any professional, no matter what field you work in.

How to install?

Installing it is easy! Go to the widget page in VK and enter your profile address. Next, choose which button you want to install. I repeat once again that it is desirable to install only buttons through the script (for example, a button or a light button). If you just need a link, then it's better to do it through HTML code, so as not to overload the site with scripts, without which you can very easily do without. The effect will be the same, and the site will load faster.

Other Vkontakte widgets

Guys, above I have listed the most common and effective VK widgets, but the list is not limited to this. Vkontakte has a whole bunch of different widgets that can be useful in a given situation. For example, poll widget which almost no one uses. If you created a poll on your VK page, then why not insert it into a related article? Readers of your site will be able to vote for their version directly on your site, and information about this will also go to VK. Not bad, right?

There is also an interesting Widget "Recommendations", which brings out the most interesting articles on your blog or website. The degree of interest in a particular content is determined by the number of clicks on the "Like" button. In a word, Vkontakte will automatically count how many users clicked on the "Like" buttons and will collect all the most interesting articles in this block. If your target audience is widely represented in the social. Vkontakte network, then you should try and install these two widgets: "I like" and "Recommendations". I am sure that the results will not keep you waiting!

LinkedIn

Now let's talk about - LinkedIn. This network is only growing in popularity with us, so not many people understand how it can be used to achieve positive results. In America, where this network comes from, there are few professionals or companies that do not have a LinkedIn profile. There they will look askance at you if you are at least not registered in the social. networks. In Europe, the use of social networks are very different depending on the country. For example, the UK and Sweden are leading the way in incorporating LinkedIn into companies' marketing strategies. Not only do they encourage employees to have online profiles, but they also hire people through LinkedIn, advertise companies and products, look for potential customers and partners, and so on.

But we are not talking about that today. We will talk about the social plugins that LinkedIn has developed for us and where and how they can be used. Do not rush to say that this network is not interesting to you! And if you work in the field of consulting, b2b, then you simply must read this section.

So, LinkedIn, like all social networks. networks, there is a separate page where you can see all existing buttons and plugins: https://developer.linkedin.com/plugins

The developer site, unfortunately, exists only in English, so I will try to explain the installation of each plugin and button in as much detail as possible.

How to install?

How to install?

The "Subscribe" button is installed from the same developers page, the link to which I gave at the beginning of the section. In the left column, click on " follow company” and LinkedIn will show you the relevant section. First, select what kind of button you want to install: with a vertical or horizontal counter or maybe the most common one and click on Get it. Next, you need to enter the name of the company for which you are setting the button. In the appropriate box, start writing the name, letter by letter, and it should appear on the list. Sometimes the list takes a long time to load, so take your time. The name must be written exactly as it is written on the company page. Then select the language of the button - Russian, the type of button and click on the button " to get the code". Now just paste the code in the right place on the site and you're done! In Russian, by the way, the button will be called “Track”, which I don’t really like. I personally would leave the English version. Fortunately, everyone already knows what the word “follow” means 🙂

I have not yet created a company page on LinkedIn, so there is no real example yet. If I make a page in the future, I will definitely insert it as an example in the article.

Personal Profile Button

This is another good, but again little used plugin. This button displays the personal profile photo, title and friends of the user who sees this plugin. Of course, for LinkedIn to be able to show professional connections to a reader of your site, he - the reader - must be logged in (if I may say so) on LinkedIn. In short, the user must be logged into LinkedIn for the plugin to function fully.

Who can this plugin be useful for? I think that for people working in the b2b sector, it will be most useful. Although you can use it anywhere: on the page about the authors of the site, on the page about the company's employees, on the pages about your clients and partners (with their permission, of course) - there are many options. The main thing is that such profile buttons fit organically into your website and company strategy. If your employees have half-filled profiles, go to LinkedIn once a year and have 10 connections, then there is no point in exposing such profiles. If your company, on the contrary, is actively engaged in promotion in the social. networks, then such a plugin can bring you a lot of benefits.

+1 button

How to install?

How to install?

All Pinterest buttons and widgets are installed from the link above. To set the "Pin it" button, you must select the appropriate button in the left column.

Pinterest buttons are a little trickier to set up as they have many different options, but it's still entirely possible to set them up yourself.

1) In the very first line " Button Type» you can choose the type of button you want to install on the site: a given image, any image from the page, or a Pin it button that will appear on the images of the page / article.

2) The second line - " Appearance“, i.e. the appearance of the button. Here, Pinterest offers many options to choose from: large or small; rectangular or round; red, gray or white; text in English or Japanese.

3) The third line is the counter. Here you can select the counter from above, from the side or completely remove it.

Depending on the type of button you choose, its options will change.

• Button " one image' implies that you want to specify a specific image that a site reader can pin for a specific link. That is, the reader will not have a choice, even if there are other images on your page. If you decide to set an image for a button, then such a button must be set separately for each page, since it requires a link to the page/article. In the first column, you need to insert a link to the page that users will share, i.e. the link that they will pin. Next, provide a link to the image. This, by the way, can be any source, even outside your site. In the last column, you can specify the text for the image that the user will share. This can be, for example, the title of a page or the title of an article. Before sending the pin, the user, if desired, will be able to replace your text with their own.
• Button " Any image' or any image. This button is very simple and does not require any additional parameters. You just need to choose the size and type of the button, and also decide if you need a counter or not.
• Button " image hover“, i.e. a button that will appear on the image itself when you hover over it with the mouse cursor. You can try out how it works in the Pinterest sample image.

Now a few words about the code which you need to set on the page. Pinterest, like other social media network, has two codes: the first part is inserted into the tag , and the second part to the place where the button itself is installed. If you have multiple Pinterest buttons on the same page, then you only need to set the first code once.

An example piece of code that is set only once per tag pages:.

Subscribe button

Pinterest, like Google+, doesn't differentiate between personal accounts and company accounts, so the "Follow" button for both is created in the same place. This button is easy to install. All you have to do is enter your profile link and name the button.

As I wrote above, I can't embed Pinterest buttons due to script conflict, so if you want to befriend me on Pinterest, just follow this link.

Bonus: hyperlinks

Below, I will give examples of how such links are created manually. You can also try a special link generator - Share Link Generator. On this site you can create links for Facebook, Twitter, Google+, Pinterest and LinkedIn. It will be easy to understand the site, so I will not explain what and how. However, see my advice, as the link generator does not provide a complete link for HTML format + code on how to make the link open in a new window. All this plus examples of links for social. Vkontakte networks, you will find in this section.

http://www.facebook.com/share.php?u= your link «> hyperlink text

Hello! Today we will talk about the five most interesting services where you can easily and quickly choose the look social buttons for website and get the corresponding code.

Check the boxes you need and select the appearance of the block. The code is generated automatically.

Google+1

Google +1 allows users to vote for your portal page and share it with their friends on the Google+ social network. The more votes it gets, the better Google will treat it, so try to choose a size for it in a larger way and place it in a prominent place.

Customize the size and appearance of the button, select the Russian language. Advanced settings are unlikely to be useful to you. As you can see, it will receive social buttons from Yandex and Google very easily and quickly. Literally two mouse clicks and you're done!

AddThis.com offers an orange Share button (or orange +) containing a huge number of various social networks, bookmarks and services. The most popular social networks can be removed from the general list and placed separately next to Share. In addition, the service offers analytics and statistics on reader activity. You must register on addthis.com to access it.

If you did everything correctly and the folder with the script is really loaded into the root directory, then its address will be http://your_site.ru/share42/. Specify it in paragraph 3 of the "Installing the script on the site" section.

In the fourth step you are asked to select your site if you are using it. Depending on the checked item, the code below will change somewhat.

Now you need to insert the code from step number 5 to your site. For the horizontal block of social buttons, everything is simple - where you insert it, it will be displayed there. With a floating vertical it is somewhat more difficult.

In the last line of code, you should specify the distance in pixels from the beginning of the page (150 in the example) and from the top of the visible area (20 in the example) to the floating panel.

If you don’t know where exactly to insert the code, the “scientific poke” method will always come to the rescue - sooner or later you will succeed, and the panel will appear in the right place.

The last thing to do is copy the styles from step #6 into your site's stylesheet file - with the .css extension. Most often, this file is called style.css.

And now the highlight is the social buttons with counters that I currently use on my blog! Look simply gorgeous! Two sizes are available - small and large. By the way, people click on icons with counters much more willingly. I even noticed this myself.

To learn how to install them on your blog, read the "Important Information" section:

The first code is responsible for the functionality of the buttons, we insert it before the closing head tag, which in WordPress themes is located in the header.php template.

The second code is responsible for displaying them. We insert it in the place of the source code of the page where the icons should appear.

Notice the data-yashareType="small" attribute. The size of the icons is set here: small - small, big - large. Everything ingenious is simple.

How to add social button code to the site

We figured out the script from Share42, now let's look at how best to add the code of social buttons from other services to the Internet resource.

The button code consists of two parts:

1. A script enclosed between tags that looks something like this:

And already the code responsible for displaying social buttons should be inserted anywhere on the site.

That's all, thanks for your attention. Take care of yourself!

Pros:

Pluso X

Add This

good share

shareaholic