The original article is reprinted from liu Yue’s Technology blog v3u.cn/a_id_143

Every application, in fact, has the need to share, such as a click to share an article or some activities to Weibo or wechat or Twitter and other social platforms, because human beings are social animals, and social sharing can meet Maslow’s needs pyramid, the need for affection and belonging and the need to be respected. Another web social sharing function can not only meet the readers, at the same time, for the web application itself, can also corresponding increase the external links the site, such as weibo douban very much social platform, online stickiness users if it is a twitter or facebook can bring part of the traffic from abroad, for network platform, This can distribute the flow and drainage diversion, kill two birds with one stone, and get more at one stroke.

However, if the use of ordinary buttons or images to create a share button is too monotonous, here is recommended to use iconfront, so what is iconfront? Its scientific name is called the fonts icon, it is something between fonts and images, it integrates the fonts and images of their respective advantages, at the same time reduce their weaknesses, we know a few years ago awsomefont big line in the world, overwhelmingly popular, but it is too large volume of the other small websites, and pictures of the problem is that, whether it is a compressed images, Or Sprite picture, or picture, as long as it is a picture, it will still take up a lot of network transmission resources. But the appearance of font ICONS, but let front-end developers see another magical world, iconfront vector ICONS can be scaled to any size you want without worrying about distortion, the same processing as text, easy to adjust color and size, etc.

First, visit the official website of Iconfont: www.iconfont.cn

For example, I want to make a Twitter icon and use it as a social sharing button to search for Twitter keywords

Then click Download. Don’t forget to login before downloading. Iconfont supports three-way login on Github

Notice that we have selected a color icon instead of a solid color icon, download SVG

So what is SVG? The advantages of using SVG over other image formats, such as JPEG and GIF, are:

SVG images can be created and modified using a text editor; SVG images can be searched, indexed, scripted, or compressed; SVG is scalable; SVG images can be printed with high quality at any resolution; SVG can be enlarged without degrading image quality;

Of course, there are disadvantages: browsers render SVG with mediocre performance, not as well as PNG.

At this point, we need to render SVG effects to the page via CSS, which iconmoon can do for us.

Go to icomon. IO

Click iconmoon app

Select the import icon

After importing, select the uploaded Twitter icon

Iconmoon then generates the corresponding code

Paste the code into an HTML file to use

 <span class="icon-icon_twitter"><span class="path1"></span><span class="path2"></span></span>

<style>
@font-face {  
  font-family: 'icomoon';  
  src:  url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.eot? v3mere');  
  src:  url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.eot? v3mere#iefix') format('embedded-opentype'),  
    url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.ttf? v3mere') format('truetype'),  
    url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.woff? v3mere') format('woff'),  
    url('https://i.icomoon.io/public/temp/1299242a74/UntitledProject/icomoon.svg? v3mere#icomoon') format('svg');  
  font-weight: normal;  
  font-style: normal;  
  font-display: block;  
}  
  
[class^="icon-"], [class*=" icon-"] { /* use ! important to prevent issues with browser extensions that change fonts */ font-family:'icomoon'! important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-icon_twitter .path1:before { content:"e900";  
  color: rgb(120, 203, 239);  
}  
.icon-icon_twitter .path2:before {  
  content: "e901";  
  margin-left: -1em;  
  color: rgb(255, 255, 255);  
}
</style>
Copy the code

It works like this:

Of course, you can control the size of the vector image by modifying the CSS

Now that vector ICONS are done, let’s think about click-sharing. In fact, the major social platforms in the market all have their own sharing interfaces:

var sites = {  
        qzone: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&desc={{DESCRIPTION}}&summary={{S UMMARY}}&site={{SOURCE}}&pics={{IMAGE}}',  
        qq: 'http://connect.qq.com/widget/shareqq/index.html?url={{URL}}&title={{TITLE}}&source={{SOURCE}}&desc={{DESCRIPTION}}&pics ={{IMAGE}}&summary="{{SUMMARY}}"',  
        weibo: 'https://service.weibo.com/share/share.php?url={{URL}}&title={{TITLE}}&pic={{IMAGE}}&appkey={{WEIBOKEY}}',  
        wechat: 'javascript:',  
        douban: 'http://shuo.douban.com/! service/share? href={{URL}}&name={{TITLE}}&text={{DESCRIPTION}}&image={{IMAGE}}&starid=0&aid=0&style=11',  
        linkedin: 'http://www.linkedin.com/shareArticle?mini=true&ro=true&title={{TITLE}}&url={{URL}}&summary={{SUMMARY}}&source={{SOURCE} }&armin=armin',  
        facebook: 'https://www.facebook.com/sharer/sharer.php?u={{URL}}',  
        twitter: 'https://twitter.com/intent/tweet?text={{TITLE}}&url={{URL}}&via={{ORIGIN}}'  
    };
Copy the code

Just need to coordinate with JS to pass in the corresponding parameters

Finally, combining iconfont and JS to make the social sharing effect is like this, it looks good

The original article is reprinted from liu Yue’s Technology blog v3u.cn/a_id_143