How to Make Your webpage links easily spread among WeChat friends and circle of friends, friends and circle of friends

How to make your web pages easily spread in the circle of friends and friends

Hi everyone, I'm a big cat!

I think everyone has seen some webpage link messages shared by others in their circle of friends. But do you pay attention? Some linked icons use a blue default image, but some linked icons have their own special icons (Note: Text messages of Public numbers are not discussed in this article .), The title is also different from the website title in the link! (Think about the nasty nervous cat that swept the circle of friends some time ago !) Okay! Today, I want to share with you how to make your webpage have a personal icon in the circle of shared friends and the descriptive text in the Custom sharing. (I started thinking about adding this feature when I learned MOOC's 2048 private customization and made my first HTML5 game !)

Let's take a look at the effect my little cat shares in the circle of friends!

This is what we share with our friends:

This is what a friend message looks like:

(The first is the appearance of a common webpage, and the last two are shared)

******** *******************************

Well, let's go to the topic to see how to achieve the above effect!

Upright! Just a moment! Go all in one! I! 2!

In fact, there are only two steps:

1. Introduce a sharing plug-in to your webpage:

Directly download the WeixinApi. js file and import it to your HTML5 file.

<Script type = "text/javascript" src = "js/WeixinApi. js"> </script>

2. Call the Method Configuration icon and description statement in the plug-in: (put it at the end of the body)

<Script> window. wxData = {// share it with your friends "appId": "", // APPID. You cannot use it now. "imgUrl": 'http: // www.devislee.com/littlecat/cat_0.png' ,/image path "link": 'http: // www.devislee.com/littlecat/',//click on the "desc" Path: "selling cute, loading, playing games, playing games ...... I really don't know that! Meow ~ ", // Description" title ":" tom-intelligent chatbot "// title}; window. wxFriend = {// share with friends (the following content is the same as above) "appId": "", "imgUrl": 'http: // www.devislee.com/LittleCat/cat_0.png', "link": 'http: // www.devislee.com/LittleCat/', "desc ...... I really don't know that! Meow ~ "," Title ":" tom-intelligent chatbot "}; // callback function after sharing, which can be used to listen to WeixinApi for some sharing operations. ready (function (Api) {var wxCallbacks = {ready: function () {}, cancel: function (resp) {}, fail: function (resp) {}, confirm: function (resp) {}, all: function (resp) {}}; Api. shareToFriend (wxFriend, wxCallbacks); Api. shareToTimeline (wxData, wxCallbacks); Api. shareToWeibo (wxData, wxCallbacks) ;}); </script>

In the above call method, you can modify the comments that have been added! If you have a little HTML5 or Javascript, you should be confused.

Come and try it! Let Your webpage go viral like a neurocat in the circle of friends !!!

Okay! Today's sharing is here! Thank you!

[Come and say hello to Tom !] <--- On the left

My first three articles:

[Learning experiences] the path to HTML5 growth of big cats-1. Birth

HTML5 [learning experiences] the path to growth of the little cat-2. _ Meng _ Bud

[Learning experience] the path to growth of the little cat-3. Prototype (allowing you to have your own smart chatbot immediately)