Buttons “Share”, “Tweet” and “Share” with your own design, facebook, twitter, VKontakte

Social networks occupy a huge sector of the Internet; millions of people go online every day just for them. In this regard, many new areas of advertising and product promotion have emerged. One of the tools of which is reposting - simple publication of a link on the pages of users. networks. A properly designed link is not bad advertising and can bring potential customers to your site. To simplify the reposting mechanism, there are special widgets; they can be easily found in the social documentation. networks and install on your website. But easy and fast does not always equal quality. In addition to installing the widget code, you need to prepare the site so that the correct information is used when reposting: title, description, picture and link. In addition, ready-made solutions always have a ready-made design, which in most cases is extremely incompatible with the design of the entire site. But styling widgets doesn’t always work, and even if it does, it’s extremely inconvenient. Therefore, we need to look for another solution.

Twitter

Let's start with a simple example:

Text and URL are the two main parameters, of course, they are quite enough to create a button, hashtags, for example, can be easily added to the $text variable, however, let's look at the full list of parameters:

url Absolute URL from HTTP or HTTPS, will be automatically shortened by t.co.
It is also recommended to pass it through the php function urlencode(). text Tweet text. Must be in UTF-8 encoding and contain no more than 140 characters (including links and hashtags!). After clicking on the "Tweet" button, the user will have the opportunity to edit this text - also keep this in mind. hashtags List of #hashtags separated by commas without the “#” symbol. via How was the tweet posted? Information will be added at the end of the tweet. For example , using @twitterfeed. There is no need to specify the “@” symbol in the value passed to the parameter.
in_reply_to Reply to another tweet. The parameter value must be the ID of the tweet you want to reply to. The name of the author whose tweet we want to reply to will be automatically added to the beginning of the tweet. related Specify comma-separated Twitter accounts that the user will be automatically recommended to follow after he posts a tweet. Previously, I used the PHP function to convert links through bit.ly, but this significantly slowed down the page loading speed and I decided not to shorten the links on my blog.

The language in the pop-up window will be the same as in the Twitter profile of your site visitor. One more example:

When you click on the “Tweet” button you get the following:

Basic social share buttons

In response to posts about buttons for sharing on social networks with cumbersome source code and complex detailed customization, I want to show the Habra community a solution that was once written by an unknown, but definitely kind programmer. I’m not the author of this miracle, but I’ve been using this solution for more than a year in the projects I’m working with. HTML

{share me completely} {share me completely} {share me completely} {share me completely} {share me completely}
JS
Share = { vkontakte: function(purl, ptitle, pimg, text) { url = 'https://vkontakte .ru/share.php?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&image=' + encodeURIComponent(pimg); url += '&noparse=true'; Share.popup(url); }, odnoklassniki: function(purl, text) { url = 'https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'; url += '&st.comments=' + encodeURIComponent(text); url += '&st._surl=' + encodeURIComponent(purl); Share.popup(url); }, facebook: function(purl, ptitle, pimg, text) { url = 'https://www.facebook.com/sharer.php?s=100'; url += '&p[title]=' + encodeURIComponent(ptitle); url += '&p[summary]=' + encodeURIComponent(text); url += '&p[url]=' + encodeURIComponent(purl); url += '&p[images][0]=' + encodeURIComponent(pimg); Share.popup(url); }, twitter: function(purl, ptitle) { url = 'https://twitter.com/share?'; url += 'text=' + encodeURIComponent(ptitle); url += '&url=' + encodeURIComponent(purl); url += '&counturl=' + encodeURIComponent(purl); Share.popup(url); }, mailru: function(purl, ptitle, pimg, text) { url = 'https://connect.mail.ru/share?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&imageurl=' + encodeURIComponent(pimg); Share.popup(url) }, popup: function(url) { window.open(url,"'toolbar=0,status=0,width=626,height=436′); } };

Sharing counter

In cases where you need to count the number of page shares for each of the social networks in any possible way, and not with a specific button, this is of course the ideal option.
But I had another task: I had to track the statistics of clicks on the sharing button located directly on the shared page. Far from departing from the sharing method presented above, this problem was solved by a table in the database, another function parameter and simple ajax: popup: function(url,soc) { window.open(url,"'toolbar=0,status =0,width=626,height=436′); $.post('/social/share', {social:soc, page:url}, function (data){}); } In my case, the receiving script gets the ID of the entry from the URL, writes the entry into the table and/or increases the counter by 1 for a specific social network.

This solution is the most minimalistic I have come across, with free customization of appearance. It eliminates the need to use third-party services like pluso.ru and makes it possible to maintain your own statistics on your own server.

Facebook

p[title] Post title. p[summary] Post announcement. p[url] Link to post. Don't forget about the urlencode() function. p[images][0] The main image of the post, you can also list additional images in the parameters p[images][1], p[images][2] and so on. I would like to note that if you protect images from hotlinks via .htaccess, then you will need to add all these social networks to exceptions, otherwise your images simply will not be displayed.

Open Graph meta tags for the site

A little earlier, I mentioned that in addition to a link to the page, for a high-quality repost you will also need a title, description and picture. In order not to transmit this data in links and to be able to manage more conveniently, it is worth using special meta tags. There is an Open Graph protocol that allows you to easily and simply specify your repost parameters for each page. Almost all social networks adhere to this protocol. Until recently, only twitter used Open Graph meta tags in its own way, but recently it has also started to adhere to the general standard. To convey the necessary data about the page, only a few tags are enough; they must be written at the very beginning - inside the head block. It will look like this:

Example of repost buttons for social networks

Although twitter has begun to use common standards, it is still worth writing separate meta tags for it; such precautions will not be superfluous. The most interesting thing is that tags that relate only to Twitter can also be perceived by VKontakte. In the case as given above, VK will take data from the tags that are located below in the code. The meta tags og:image:type, og:image:width and og:image:height are optional, without them everything will work, although in this case facebook may start sending warnings in the programmer's debugger. Another point worth paying attention to is the accessibility of page images to robots. If a specific page or just an image is blocked from indexing in the robot.txt file, then the social. networks may not take the picture. While I was testing different networks, I discovered a problem with Twitter; it categorically refused to use an image that was closed from indexing. Other social the networks were not “capricious”, but nothing prevents them from starting to adhere to such rules in the future. The last thing you should know when preparing a page for reposts is that all social networks cache data from open graph meta tags. To update the cache, there are special services for almost every social network. I managed to find for VKontakte, Facebook and Twitter. Google plus only provides a service for validating meta tags. But for Odnoklassniki we couldn’t find anything like that at all. If anyone knows cache reset services for these social networks, then write in the comments, I will add to the article. And as a bonus, you can count the fact that when you normally publish a link on social media. networks, data from OG meta tags will also be used. And beautiful links with a title, description and picture will be published on user pages. In addition to social networks, open graph meta tags are also used by messengers - skype, telegram, etc.

In contact with

Save

All parameters are absolutely similar to the parameters from the example about the Facebook button, so I will not describe them again. And as a result we get this:

Well, that's all, now using CSS you can give the links any look you want (for example, like on my blog).

Official buttons from the sites Odnoklassniki and Surfingbird

Using the example of four popular social services in RuNet and in the world (Twitter and VKontakte are discussed in some detail in this article, and Google+ and Facebook in the previous one), we analyzed the algorithm for inserting button codes on a WordPress site. Now let's quickly go through the rest of the most important networks, which your readers may very likely be users of.

For the Odnoklassniki website, there is a designer for the “Class” button, which in terms of functionality is nothing more than “Share”, despite the fact that the inscription can be selected from three proposed options:

I think you’ll already automatically figure out where to insert the first passage (highlighted in green):

where is the script fragment:

Perhaps someone would like to install the Share Button from the Surfingbird service. In this case, you can set up receiving the code on its official page:

If you want to get a button with a counter, click “With counters” at the top. In the designer, select the button you like by simply clicking on it. As a result, we again get two pieces of code. Script (highlighted in red):

Again we place it before the closing BODY, and the button itself (having previously specified nofollow):

To the right place on the page.

Misha

I recently realized that my mission is to help spread WordPress.
After all, WordPress is the best engine for website development - both for those who are ready to use the built-in structure of this CMS, and for those who prefer headless solutions. I myself first became acquainted with WordPress in 2009. Organizer of WordCamp. Teacher at Epic Skills and LoftSchool schools.

If you need help with your website or maybe even development from scratch on WordPress / WooCommerce - write. My team and I will do everything for you at the best level.