リンクをコピーして共有し、ウェブページ/アプリをクリップボードに反応させ、主要な海外のソーシャルプラットフォームに共有し、WhatsApp や SMS テキストメッセージを通じてリンクコンテンツを共有します。

1.需要

最近、国際的なウェブサイトアプリに取り組んでいますが、アプリ内の特定のページのグラフィックとテキストリンクを海外の主要なソーシャルプラットフォーム（ facebook、whatapp、telegram、twitterなど）に共有するだけでなく、共有する必要があります。WhatApp チャットや SMS テキストメッセージを通じてコンテンツをリンクするにはどうすればよいですか? 回路図は以下の通りです：

海外の主要ソーシャルプラットフォームでシェア:

説明書：

[URL のコピー] をクリックすると、共有リンクがクリップボードにコピーされ、各共有プラットフォームのアイコンをクリックして共有 APK またはメソッドを呼び出し、ソーシャルプラットフォームアプリまたは対応する Web ページを呼び出して共有操作を実行します。

WhatApp、SMS経由で共有:

説明書：

1.WhatsAPP共有：

プログラムはランダムな電話番号を生成し、デフォルトで最初の電話番号が選択されます。WhatsApp をクリックすると、WhatsApp の関連メソッドインターフェイスが呼び出され、共有操作が実行されます。その後、電話番号が灰色に変わります。WhatsApp をもう一度クリックすると、次の図に示すように、次の電話番号操作がトリガーされます。

2.SMS経由で共有する

SMS ボタンをクリックすると、SMS インターフェイス要求がトリガーされ、共有操作のために SMS 関連の URL が呼び出されます。

2.海外の主要なソーシャルプラットフォームへの共有

まずコードを入力し、[URL をコピー] をクリックして共有リンクをクリップボードにコピーし、各プラットフォームのアイコンをクリックして共有操作を実装します。

URL をコピーし、プラットフォームアイコン関連コードをクリックします。

import React, {useState} from "react";
import axios from "axios";
import Scroll from "../../components/Scroll";
import {CountDown, Steps, Tabs, Toast, Popup, Cell, Dialog, Swiper, NoticeBar, Image} from "react-vant";
import {CopyToClipboard} from "react-copy-to-clipboard";
 
const Index = () => {
        
    //分享url:拼接要分享的页面url,以及带上参数
    //注意：这里参数有的分享平台不支持?格式，可以使用简化格式,eg：http:www.test.com/target_page/100/param
   const GetUrl = (tagId) => {
          return `${window.location.origin}/target_page?param=${tagId}`;
   };
    
    //各个分享平台对应的url
    const GetWhatsAppUrl = (tagId) => {
      //也可以用这个`https://api.whatsapp.com/send?text=` + encodeURIComponent("test") + encodeURIComponent("\n\n" + GetInviteWheelUrl(tagId));
      return encodeURI(
      `whatsapp://send?text=test\n${GetUrl(tagId)}`
  );
};

    const GetTelegramUrl = (tagId, text) => {
      return encodeURI(
      "https://t.me/share/url?url=" + encodeURIComponent(GetInviteWheelUrl(tagId)) + "&text=" + encodeURIComponent(text)
      );
    };

    const GetTwitterUrl = (tagId, text) => {
      return encodeURI(
      "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text) + "&url=" + encodeURIComponent(GetInviteWheelUrl(tagId))
      );
    };

    const GetFacebookUrl = (tagId, text) => {
      return "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(GetUrl(tagId)) + "&t=" + encodeURIComponent(text)
    };


    //分享到社交软件
    const shareFriend = (type) => {
        let shareText = "分享说明" ;
        switch (type) {
            case "facebook":
                if (window.document) {
                    if (window.document.getElementById("og_url")) {
                        window.document.getElementById("og_url").content=GetUrl(rid);
                    }
                    if (window.document.getElementById("og_description")) {
                        window.document.getElementById("og_description").content=shareText;
                    }
                    if (window.document.getElementById("og_title")) {
                        window.document.getElementById("og_title").content=shareText;
                    }
                    if (window.document.getElementById("og_image")) {
                        window.document.getElementById("og_image").content=window.location.origin + "../images/banner_x2.png";
                    }
                }

                window.location.href = GetFacebookUrl(tagId, shareText);
                return;
            case "whatApp":
                if (window.document) {
                    if (window.document.getElementById("og_url")) {
                        window.document.getElementById("og_url").content=GetUrl(tagId);
                    }
                    if (window.document.getElementById("og_description")) {
                        window.document.getElementById("og_description").content=shareText;
                    }
                    if (window.document.getElementById("og_title")) {
                        window.document.getElementById("og_title").content=shareText;
                    }
                    if (window.document.getElementById("og_image")) {
                        window.document.getElementById("og_image").content=window.location.origin + "../images/banner_x2.png";
                    }
                }

                window.location.href = GetWhatsAppUrl(tagId, shareText);
                return;
            case "telegram":
                window.location.href = GetTelegramUrl(tagId, shareText);
                return;
            case "twitter":
                if (window.document) {
                    if (window.document.getElementById("tw_description")) {
                        window.document.getElementById("tw_description").content=shareText;
                    }
                    if (window.document.getElementById("tw_title")) {
                        window.document.getElementById("tw_title").content=shareText;
                    }
                    if (window.document.getElementById("tw_card")) {
                        window.document.getElementById("tw_card").content=window.location.origin + "../images/banner_x2.png";
                    }
                    if (window.document.getElementById("tw_card")) {
                        window.document.getElementById("tw_card").content=window.location.origin + "../images/banner_x2.png";
                    }
                    if (window.document.getElementById("tw_image")) {
                        window.document.getElementById("tw_image").content=window.location.origin + "../images/banner_x2.png";
                    }
                    if (window.document.getElementById("tw_url")) {
                        window.document.getElementById("tw_url").content=GetUrl(rid);
                    }
                }

                window.location.href = GetTwitterUrl(tagId, shareText);
                return;
        }
    }

 return (
        <div class={style.main}>
                 <ul class={style.share_1_link}>
                            <li class={style.share_1_link_intro} onClick={() => shareFriend("facebook")}>
                                <div class={style.share_1_link_img}>
                                    <a href="javascript:;"  rel="noreferrer">
                                        <img src={"../images/share3.svg"} />
                                    </a>
                                </div>
                                <div class={style.share_1_link_text}>
                                    Facebook
                                </div>
                            </li>
                            <li class={style.share_1_link_intro}  onClick={() => shareFriend("whatApp")}>
                                <div class={style.share_1_link_img}>
                                    <a href="javascript:;" rel="noreferrer">
                                        <img src={"../images/share2.svg"} />
                                    </a>
                                </div>
                                <div class={style.bottom_share_1_link_text}>
                                    WhatApp
                                </div>
                            </li>
                            <li class={style.share_1_link_intro}  onClick={() => shareFriend("telegram")}>
                                <div class={style.share_1_link_img}>
                                    <a href="javascript:;" rel="noreferrer">
                                        <img src={"../images/share3.png"} />
                                    </a>
                                </div>
                                <div class={style.share_1_link_text}>
                                    Telegram
                                </div>
                            </li>
                            <li class={style.share_1_link_intro}  onClick={() => shareFriend("twitter")}>
                                <div class={style.share_1_link_img}>
                                    <a href="javascript:;"  rel="noreferrer">
                                        <img src={"../images/share4.svg"}/>
                                    </a>
                                </div>
                                <div class={style.share_1_link_text}>
                                    Twitter
                                </div>
                            </li>
                            <li class={style.share_1_link_intro}>
                                <div class={style.share_1_link_img}>
                                    <a href={"mailto:[email protected]?body" + GetUrl(tagId)} rel="noreferrer">
                                        <img src={"../images/share5.svg"}/>
                                    </a>
                                </div>
                                <div class={style.share_1_link_text}>
                                    Email
                                </div>
                            </li>
                        </ul>
        </div>

<div class={style.copy_url_area}>
                            <div class={style.copy_url_input}>
                            <span id="share_url">
                                {GetUrl(tagId)}
                            </span>
                            </div>
                            <CopyToClipboard
                                text={GetUrl(tagId)}
                                onCopy={() => {
                                    Toast.success({
                                        message: "Copy Successfully",
                                    });
                                }}
                            >
                                <div class={style.action_btn} style={
   
   { flexShrink: 0 }}>
                                    COPY URL
                                </div>
                            </CopyToClipboard>
                        </div>
    ）
}
 
export default Index;

上記のコードの説明:

CPOY URL ボタンをクリックすると、react-copy-to-clipboard コンポーネントが呼び出され、共有リンクがクリップボードにコピーされます。プラットフォームをクリックして画像を共有すると、shareFriend() メソッドが呼び出され、共有設定操作が実行されます。、共有 URL を取得し、各プラットフォームの Shared APIを呼び出して、ヘッドで共有メタを構成します(次のコード。メタを構成する必要がある理由は、多くの外部プラットフォームがクローラーを使用して共有データのメタデータを取得するためです)。グラフィックリンクの共有). 操作後、アプリ対応するプラットフォームのアプリが起動するか、共有操作のために対応する Web ページが開きます。

htmlコード:

<head>
<meta id="og_url" property="og:url" content="" />
    <!-- facebook,whatApp分享-->
	<meta id="og_description"  property="og:description" content="" />
	<meta id="og_image"  property="og:image" content="" />
	<meta id="og_title"  property="og:title" content="" />
    
    <!-- twitter分享-->
	<meta  id="tw_card"  name="twitter:card" content="">
	<meta  id="tw_title" name="twitter:title" content="">
	<meta  id="tw_description" name="twitter:description" content="">
	<meta  id="tw_image" name="twitter:image" content="">
	<meta id="tw_url" property="twitter:url" content="" />
</head>

上記のコードの説明:

メタデータとは、各プラットフォームのクローラが取得する共有データであり、プラットフォームによってメタの名称が異なりますので、詳細は各プラットフォームの公式ドキュメントを参照してください。

3. WhatsAPP と SMS を介して共有操作を実装する

プログラムはランダムな電話番号を生成し、デフォルトで最初の電話番号が選択されます。WhatsApp をクリックすると、WhatsApp の関連メソッドインターフェイスが呼び出され、共有操作が実行されます。その後、電話番号が灰色に変わります。WhatsApp をもう一度クリックすると、次の電話番号操作がトリガーされます。

SMS ボタンをクリックすると、SMS インターフェイス要求がトリガーされ、共有操作のために SMS 関連の URL が呼び出されます。

コードは以下のように表示されます。

import React, {useState} from "react";
import axios from "axios";
import Scroll from "../../components/Scroll";
import {CountDown, Steps, Tabs, Toast, Popup, Cell, Dialog, Swiper, NoticeBar, Image} from "react-vant";
import {CopyToClipboard} from "react-copy-to-clipboard";
 
const SinNumberGenerator = (x, offset) => {
  return (Math.sin(x + offset) + 1) / 2;
};

//生成随机的分享电话号码:count 电话号码个数
const SharePhoneList = (count) => {
    let list = [];
    for (let i = 0; i < count; i++) {
        let phone = (
            SinNumberGenerator(((NowTimestamp / 100000) % 100000) / 50000 / Math.PI, i) * (99999 - 1000) +
            1000
        ).toFixed(0);
        if (phone.length < 5) {
            phone = "0" + phone;
        }
        list.push({
            phone: phone, //电话号码
            state: Math.floor(Math.random()*2),  //发送状态
        });
    }

    return list;
};

const Index = () => {
    
    //分享电话号码初始化
    const [sharePhoneList, setSharePhoneList] = useState([]);
    //当前选中电话号码索引
    const [checkedPhoneIndex, setCheckedPhoneIndex] = useState(0);
    //设置电话号码列表
    setSharePhoneList(SharePhoneList(20));
    setCheckedPhoneIndex(0);

    //分享url:拼接要分享的页面url,以及带上参数
    //注意：这里参数有的分享平台不支持?格式，可以使用简化格式,eg：http:www.test.com/target_page/100/param
   const GetUrl = (tagId) => {
          return `${window.location.origin}/target_page?param=${tagId}`;
   };
    
   const GetSeedWhatsAppUrl = (phone, tagId, text) => {
  return `https://api.whatsapp.com/send?phone=${phone}&text=` + encodeURIComponent(text) + encodeURIComponent("\n\n" + GetUrl(tagId));
};

  const GetSmsUrl = (phone, tagId, text) => {
  return "sms:/open?addresses=" + phone + "&body=" + encodeURIComponent(text + GetUrl(tagId));
};


  //发送whatsApp,sms
  const SendMessage = (type= "whatsApp") => {
        if (checkedPhoneIndex >= 20) {
            return;
        }

        let phoneList = [];
        let checkedPhone = "";
        sharePhoneList.map((value, index) => {  //设置发送的号码状态
            if (index === checkedPhoneIndex) {  //如果当前电话号码索引和遍历的索引相同，则设置电话号码状态为已完成
                phoneList.push({
                    phone:value.phone,
                    state: 1,
                });
                checkedPhone = value.phone;
            } else {
                phoneList.push({
                    phone:value.phone,
                    state: value.state,
                });
            }
        });


        setCheckedPhoneIndex(checkedPhoneIndex + 1);
        //更新电话号码列表状态
        setSharePhoneList(phoneList); 
       

        let link = GetSeedWhatsAppUrl(checkedPhone, tarId);
        //发送短信
        if (type === "sms") {
            link = GetSmsUrl(checkedPhone, tarId);
        }
        window.location.href = link;
    }

 return (
        <div class={style.main}>
                 <div class={style.bottom_share}>
                        <div class={style.bottom_share_title}>
                            Share 
                        </div>
                        <div class={style.bottom_share_phones}>
                            {sharePhoneList.map((value, index) => (
                                    <div class={`${style.bottom_share_phone_info} ${(value.state ? style.bottom_share_phone_ok : "")}`} id={value.state}>
                                            {value.phone}
                                    </div>
                            ))}
                        </div>
                        <div class={style.phone_send}>
                            <div class={style.phone_send_info} onClick={() => SendMessage()}>
                                <div class={style.phone_send_text}>
                                    <div class={style.phone_send_text1}>
                                        Send message
                                    </div>
                                    <div class={style.phone_send_text2}>
                                        <span>on </span>
                                        <span class={style.phone_send_text2_font}>WhatsAPP</span>
                                    </div>
                                </div>
                                <div class={style.phone_send_img}>
                                    <img src={"../images/whatsApp.png"} style={
   
   {width: "80%"}}/>
                                </div>
                            </div>
                            <div class={style.phone_send_info} onClick={() => SendMessage("sms")}>
                                <div class={style.phone_send_img}>
                                    <img src={"../images/sms.png"} style={
   
   {width: "80%"}}/>
                                </div>
                                <div class={style.phone_send_text} style={
   
   {marginLeft: "-1rem"}}>
                                    <div class={style.phone_send_text1}>
                                        Send message
                                    </div>
                                    <div class={style.phone_send_text2}>
                                        <span class={style.phone_send_text2_font}>SMS</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
        </div>
    ）
}
 
export default Index;

css:

.bottom_share {
  width: 100%;
  margin-top: 1.3rem;
}
.bottom_share_title {
  font-size: 0.9rem;
}

.bottom_share_phones {
  background-color: rgba(0, 0, 0);
  color: #e6e3e3;
  display: -ms-flexbox;
  display: flex;
  width: 96%;
  font-size: 0.9rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  -ms-flex-direction: row;
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  justify-content: flex-start;
  flex-direction: row;
}

.bottom_share_phone_info {
  margin: 0.2rem 1.1rem;
}

.bottom_share_phone_ok {
  color: #555353;
}

.phone_send {
  width: 92%;
  background-color: rgba(0,0,0);
  display: flex;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.phone_send_info {
  margin: 0.6rem 0.2rem 1rem 0.2rem;
  display: flex;
  background-color:  #e6e3e3;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.phone_send_text {
  display: flex;
  color: #191717;
  font-weight: 500;
  font-size: 0.9rem;
  flex-direction: column;
  justify-content: center;
}

.phone_send_text2_font {
  font-weight: 900;
}

.phone_send_img {
  width: 30%;
}

さて、Webページ/アプリのリンクをクリップボードにコピーして共有し、海外の主要なソーシャルプラットフォームに共有し、WhatsAppやSMSテキストメッセージを通じてリンクコンテンツを共有すれば、操作は基本的に完了です。

4. 知識を広げる

(1).フェイスブック

Facebook の共有原則: 共有したい URL を Facebook に伝えると、Facebook クローラーロボットはこの URL に対してクローラー操作をアクティブに開始し、この URL に対して HTML 解析を実行し、対応する HTML 要素マップをそれぞれ取得して、マップを作成し、Facebook 共有ページにジャンプし、取得したコンテンツをレンダリングします。その後、共有送信ボタンをクリックするだけで Web ページを共有する機能が実現します。外国のサードパーティ共有要素マップの場合、通常は HTML の先頭部分に記述されます。公式ドキュメント: https://developers.facebook.com/docs/sharing/webmasters/images/

Facebook に対応するものは次のとおりです。

<html>
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="要分享的链接" />
<meta property="og:title" content="标题" />
<meta property="og:description" content="简介" />
<meta property="og:image" content="图片" />
</head>
</html>

Web ページに固定されたコンテンツを Facebook に共有する

ブラウザの組み込み共有機能を使用します（Facebook の更新情報にのみ共有できます）
Facebook 共有に js を使用 (Facebook の更新情報や友達と共有できます)

const url = "http://www.test.cn"
const text = "share text"
widnow.open("http:/www.facebook.com/share.php?u="+ encodeURIComponent(u) + "&t="+ encodeURIComponent(t), "sharer","toolbar=0,status=0,width=626,height=436")

Facebook の友達 (メッセンジャー) に共有する PC: Facebook にログインして appid を取得する必要があります

const url = "http://www.test.cn"
widnow.open("https:/www.facebook.com/dialog/send?app_id=1 xxxx11&link="+url+"&redirect_uri="+url+"","_blank")

携帯端末

const url = "http://www.test.cn"
widnow.open("fb-messenger://share/?link="+url）

知らせ：

Facebook が既に Facebook 共有コンテンツを記述している場合、js を使用してメイト共有コンテンツを変更することは無効です。Facebook は js が読み込まれる前にメタを取得するためです。js を通じてメイト情報を変更しても、Facebook が保持しているコンテンツを変更することはできません。そのため、メタ Facebook 共有コンテンツをヘッドに記述した場合、js を介してカスタムコピーを動的に共有することはできません。

Web ページのカスタムコンテンツを Facebook に共有する

フロントエンドはパラメータを編集し、サードパーティの共有アドレスを呼び出し、サードパーティは渡されたパラメータをコールバックし、内部のメタ情報を解析して、HTML ページに戻り、js を実行してコンテンツを動的に共有します。

Facebookのダイナミクスを分析（PCとモバイル端末の両方に適用）

let mateArr = [
    'og:url','http://www.test.cn',
    'og:title','title',
    'og:description','description',
    'og:image','http:/xxx/static/image/test.jpg',
    'og:type','website'
    ]
let mataParams = mateArr.toString()
window.open('http://www.facebook.com/sharer.php?u='+ encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`))

Facebookの友達にシェア（メッセンジャー） PC版

let mateArr = [
    'og:url','http://www.test.cn',
    'og:title','title',
    'og:description','description',
    'og:image','http://xxx/static/image/test.jpg',
    'og:type','website'
    ]
let mataParams = mateArr.toString()
window.open('https:/www.facebook.com/dialog/send?app_id=1xxx12&link='+ encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+'redirect_uri='+encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+'','_blank')

携帯端末

let mateArr = [
    'og:url','http://www.test.cn',
    'og:title','title',
    'og:description','description',
    'og:image','http://zzz/static/image/test.jpg',
    'og:type','website'
    ]
let mataParams = mateArr.toString()
widnow.open("fb-messenger://share/?link="+encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+""）

Facebookでシェアする際の注意点をいくつかご紹介します。

1. og:url の URL アドレスはパラメーターを運ぶことが禁止されています (つまり、https://test.com/index.htm?key=search エラーです)。本当に必要な場合は、パラメーターをディレクトリレベルに入れてください。 https://testcom/search/index.htm など

2. og:image 内の URL アドレスがクローラーによってクロールできる限り、その URL アドレスは送信されても送信されなくてもかまいません。

3. Facebook で共有される画像の最適な比率は 1.91:1 (長方形画像) または 1:1 (正方形画像) です。最小サイズは 200200 です。このサイズ未満の画像は表示されません。推奨サイズは 1200630 または 600* です。 315

4. 画像を共有するときに表示サイズを定義したり、og:image:width および og:image:height を使用したりすることはできません。

5. og:title タグが存在しない場合、デフォルトで title タグ内の内容が共有タイトルとして読み込まれます。

6. 共有コンテンツはクローラーの形式で取得されるため、og: タグはクローラー用の HTML ページの先頭に存在する必要があり、js スクリプトを通じて動的に追加することはできません。

7. HTML の動的生成の場合、.jsp、.asp、haml などのフロントエンドとバックエンドの統合メソッドが使用される場合、パラメーターはバックエンドで動的に生成され、バックエンドに渡されます。フロントエンドページ。

8. フロントエンドとバックエンドが分離されている場合、バックエンドが連携して HTML ページを動的に生成する必要があります。

9. 共有リンクが正常に表示されるかどうかは、Facebook共有デバッガーでデバッグし、結果を確認できます。

(2).WhatsApp

原理は Facebook と同じで、HTML ヘッダーの先頭部分にある mate:og 情報はクローラーを介して取得されますが、注意すべき点は、同じコードセットが WhatsApp 経由で友人に共有する際にも使用できることです。 PCとモバイル端末の両方。

Web バージョンのプラットフォームに共有:https://web.whatsapp.com/send?text={内容}&url={链接}

ユニバーサルリンク: https://wa.me/?text={内容}、API ゲートウェイにリダイレクトされ、URL スキーマを通じてアプリを呼び出します

<html>
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="要分享的链接" />
<meta property="og:title" content="标题" />
<meta property="og:description" content="简介" />
<meta property="og:image" content="图片" />
</head>
</html>

const url = "http://www.test.cn"
const text = "share"
window.open("https://api.whatsapp.com/send?text="+encodeURIComponent(url)+encodeURIComponent(text)+"&via=lopscoop")

(3).twitter

Twitter は比較的シンプルで、Web ページ上のリンクからアクセスできますが、Twitter は Web 版で開くことを推奨しているため、一部のブラウザ (Chrome など) ではアプリの入り口に隠れている場合があります。そのリンクは次の形式のユニバーサルリンクです:https://twitter.com/intent/tweet?text={内容}&url={链接}注記内容と暗号化链接が必要です公式ドキュメント: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summaryencodeURIComponent

コードは以下のように表示されます。

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
  <meta name="twitter:description" content="分享的description">
  <meta name="twitter:image" content="分享图片的url">

//调用下面的js打开分享弹窗 
window.open(`https://twitter.com/share?url=${分享链接的url}`, `_blank`, `width=600, height=450, toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, top=100,left=350`)

知らせ：

https://twitter.com/share?url=${共有リンク URL} の URL がデフォルトで使用されるため、twitter:url タグはオプションです。URL アドレスにパラメーターを含めることは禁止されています。つまり、https:// test.com/index.htm?key=search エラー。本当に必要な場合は、https://testcom/search/index.htm などのディレクトリレベルにパラメータを入力してください。

twitter:title タグが存在する必要があります。存在しない場合、共有コンテンツは表示できません。

twitter:image 内の URL アドレスがクローラーによってクロールされる限り、パラメーターが含まれているかどうかは関係ありません。

twitter:card タグが存在する必要があります。一般的に使用される summary_large_image は、大きい画像の形式で表示されることを意味し、概要は小さい画像の形式で表示されることを意味します。動画などのその他の共有については公式ドキュメントを参照してください。

共有コンテンツはクローラーの形式で取得されるため、twitter: タグはクローラー用の HTML ページの先頭に存在する必要があり、js スクリプトを通じて動的に追加することはできません。

HTML の動的生成の場合、.jsp、.asp、haml などのフロントエンドとバックエンドの統合メソッドが使用される場合、パラメーターはバックエンドで動的に生成され、フロントエンドに渡されます。 - 終了ページ。

フロントエンドとバックエンドが分離されている場合、バックエンドが連携して HTML ページを動的に生成する必要があります。

共有リンクが正常に表示されるかどうかを確認するには、Twitter共有デバッガーを使用してデバッグし、結果を表示します。

(4).電報

アプリとデスクトップへの共有のみをサポートします: https://t.me/share?url={链接}&text={内容}、これは URL スキーマメソッドでもあります。

リンクをコピーして共有し、ウェブページ/アプリをクリップボードに反応させ、主要な海外のソーシャル プラットフォームに共有し、WhatsApp や SMS テキスト メッセージを通じてリンク コンテンツを共有します。

1.需要

2.海外の主要なソーシャルプラットフォームへの共有

3. WhatsAPP と SMS を介して共有操作を実装する

4. 知識を広げる

(1).フェイスブック

Web ページに固定されたコンテンツを Facebook に共有する

Web ページのカスタム コンテンツを Facebook に共有する

Facebookでシェアする際の注意点をいくつかご紹介します。

(2).WhatsApp

(3).twitter

(4).電報

おすすめ

リンクをコピーして共有し、ウェブページ/アプリをクリップボードに反応させ、主要な海外のソーシャルプラットフォームに共有し、WhatsApp や SMS テキストメッセージを通じてリンクコンテンツを共有します。

Web ページのカスタムコンテンツを Facebook に共有する