Copie y comparta el enlace para reaccionar la página web/aplicación en el portapapeles, compártalo en las principales plataformas sociales extranjeras, comparta el contenido del enlace a través de WhatsApp y mensajes de texto SMS.

News 2023-10-02 18:11:14 views: null

1.Demanda 

Recientemente, estoy trabajando en una aplicación de sitio web internacional. Necesito compartir el enlace gráfico y de texto de una determinada página de la aplicación con las principales plataformas sociales extranjeras ( facebook, whatapp, telegram, twitter, etc.), así como compartirlo. a través del chat de WhatApp y mensajes de texto SMS ¿Cómo vincular contenidos? El diagrama es el siguiente:

Comparta en las principales plataformas sociales extranjeras: 

Instrucciones:

        Al hacer clic en COPIAR URL, copie el enlace para compartir en el portapapeles, luego haga clic en cada ícono de plataforma para compartir para llamar a la aplicación o método para compartir, llamando así a la aplicación de plataforma social o la página web correspondiente para realizar la operación de compartir.

Compartir vía WhatApp, SMS: 

 Instrucciones:

        1.Compartir WhatsApp:

                El programa genera un número de teléfono aleatorio y el primer número de teléfono se selecciona de forma predeterminada. Después de hacer clic en WhatsApp, se llama a la interfaz del método correspondiente de WhatsApp y se realiza la operación de compartir. Luego, el número de teléfono se vuelve gris. Cuando se vuelve a hacer clic en WhatsApp, Se activa la siguiente operación de número de teléfono, como se muestra en la siguiente figura:

        2. Comparte por SMS

                Cuando se hace clic en el botón SMS, se activa la solicitud de la interfaz de SMS y se llama a la URL relacionada con SMS para operaciones compartidas.

2. Compartir en las principales plataformas sociales extranjeras

Primero ingrese el código, copie el enlace para compartir en el portapapeles haciendo clic en COPIAR URL y luego haga clic en el ícono de cada plataforma para implementar la operación de compartir.

COPIAR URL, haga clic en el código relacionado con el icono de la plataforma: 

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;

Explicación del código anterior:

        Cuando se hace clic en el botón URL de CPOY, se llama al componente reaccionar-copiar-al-portapapeles para copiar el enlace para compartir al portapapeles. Cuando se hace clic en la plataforma para compartir la imagen, se llama al método shareFriend() para realizar operaciones de configuración de uso compartido , obtenga la URL compartida y llame a la API compartida de cada plataforma , y ​​luego configure el metadato compartido en el encabezado (el siguiente código, ¿por qué necesita configurar meta ? Porque muchas plataformas extranjeras usan rastreadores para capturar metadatos para compartir la visualización de datos cuando compartir enlaces gráficos ) Después de la operación, se iniciará la aplicación para la plataforma correspondiente o se abrirá la página web correspondiente para operaciones de compartir.

código 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>

 Descripción del código anterior:

        Los datos en meta son los datos compartidos que serán capturados por los rastreadores en cada plataforma. Dependiendo de la plataforma, el nombre del meta es diferente. Para obtener más detalles, consulte los documentos oficiales de cada plataforma.

3. Implementar operaciones para compartir a través de WhatsAPP y SMS

  • El programa genera un número de teléfono aleatorio y el primer número de teléfono se selecciona de forma predeterminada. Después de hacer clic en WhatsApp, se llama a la interfaz del método correspondiente de WhatsApp y se realiza la operación de compartir. Luego, el número de teléfono se vuelve gris. Cuando se vuelve a hacer clic en WhatsApp, Se activa la siguiente operación de número de teléfono.
  • Cuando se hace clic en el botón SMS, se activa la solicitud de la interfaz de SMS y se llama a la URL relacionada con SMS para operaciones compartidas.

El código se muestra a continuación: 

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%;
}

 Bien, la página web/aplicación copia y comparte el enlace en el portapapeles, lo comparte con las principales plataformas sociales extranjeras, comparte el contenido del enlace a través de WhatsApp y mensajes de texto SMS, la operación básicamente está completa.

4. Ampliar conocimientos

(1).Facebook

        Principio de intercambio de Facebook: dígale a Facebook la URL que desea compartir y el robot rastreador de Facebook iniciará activamente una operación de rastreo en esta URL, realizará un análisis HTML en esta URL, obtendrá el mapa de elementos HTML correspondiente respectivamente y luego obtendrá el contenido en el map y salte a la página para compartir de Facebook y renderice el contenido obtenido. Luego simplemente haga clic en el botón enviar para compartir para realizar la función de compartir la página web; para mapas de elementos compartidos de terceros extranjeros, generalmente están escritos en la parte principal de html .Documentación oficial: https://developers.facebook.com/docs/sharing/webmasters/images/

El correspondiente para Facebook es el siguiente:

<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>

Compartir contenido anclado en una página web en Facebook

  • Utilice la función para compartir integrada del navegador (solo se puede compartir con actualizaciones de Facebook)
  • Utilice js para compartir en Facebook (se puede compartir con amigos y actualizaciones de 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")
  • Compartir con amigos de Facebook (messenger) PC: debe iniciar sesión en Facebook para obtener la aplicación
const url = "http://www.test.cn"
widnow.open("https:/www.facebook.com/dialog/send?app_id=1 xxxx11&link="+url+"&redirect_uri="+url+"","_blank")
  • Terminal móvil
const url = "http://www.test.cn"
widnow.open("fb-messenger://share/?link="+url）

Aviso:

        Si meta ya ha escrito el contenido compartido de Facebook, entonces usar js para cambiar el contenido compartido de mate no es válido, porque Facebook toma el meta antes de que se cargue js. Incluso si cambia la información mate a través de js, no puede cambiar el contenido que tiene Facebook. información, por lo que si ha escrito el meta contenido para compartir en Facebook en el encabezado, no puede compartir dinámicamente la copia personalizada a través de js.

Compartir contenido personalizado de la página web en Facebook

        El front-end edita los parámetros, llama a la dirección compartida de terceros y el tercero devuelve los parámetros que usted pasó, analiza la metainformación interna, luego regresa a la página HTML y luego ejecuta js para compartir dinámicamente el contenido.

  • Analizar la dinámica de Facebook (aplicable tanto a PC como a terminales móviles)
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}`))
  •  Compartir con amigos de Facebook (messenger) versión para 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')
  • Terminal móvil
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}`)+""）

Aquí hay algunas cosas a tener en cuenta al compartir en Facebook

  • 1. La dirección URL en og: url tiene prohibido transportar parámetros, es decir, https://test.com/index.htm?key=search error. Si es realmente necesario, coloque los parámetros en el nivel del directorio. como https://testcom /search/index.htm
  • 2. Siempre que el rastreador pueda rastrear la dirección URL en og:image, se puede transportar o no.
  • 3. La mejor proporción de imágenes compartidas en Facebook es 1,91:1 (imagen rectangular) o 1:1 (imagen cuadrada). El tamaño mínimo es 200200. Las imágenes inferiores a este tamaño no se mostrarán. El tamaño recomendado es 1200630 o 600* 315
  • 4. No puede definir el tamaño de visualización al compartir imágenes, ni puede usar og:image:width y og:image:height.
  • 5. Cuando la etiqueta og:title no existe, el contenido de la etiqueta de título se leerá como título compartido de forma predeterminada.
  • 6. Debido a que el contenido compartido se obtiene en forma de rastreador, la etiqueta og: debe estar presente al principio de la página HTML para los rastreadores y no se puede agregar dinámicamente mediante un script js.
  • 7. Para la generación dinámica de HTML, cuando se utilizan los métodos de integración front-end y back-end, como .jsp, .asp, haml, etc., los parámetros se generan dinámicamente en el back-end y luego se pasan a la página de inicio.
  • 8. En el caso de la separación del front-end y el back-end, el back-end debe cooperar para generar páginas html dinámicamente.
  • 9. Si el enlace compartido se puede mostrar normalmente, puede depurarlo a través del depurador de uso compartido de Facebook y verificar los resultados.

(2).WhatsApp

El principio es el mismo que el de Facebook. La información mate:og en la parte principal del encabezado HTML se obtiene a través de un rastreador. Una cosa a tener en cuenta es que el mismo conjunto de códigos se puede utilizar para compartir con amigos a través de WhatsApp en tanto PC como terminales móviles.

Compartir en la plataforma de la versión web:https://web.whatsapp.com/send?text={内容}&url={链接}

Enlace universal: https://wa.me/?text={内容}redirigirá a la puerta de enlace API y luego invocará la aplicación a través del esquema de 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 es relativamente simple y se puede acceder a él a través de un enlace en una página web. Se recomienda abrir Twitter en la versión web, por lo que puede estar oculto en la entrada de la aplicación en algunos navegadores (como Chrome). Su enlace es un enlace universal con el siguiente formato: https://twitter.com/intent/tweet?text={内容}&url={链接}Nota 内容y 链接se requiere encodeURIComponentcifrado Documento oficial: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary

El código se muestra a continuación:

  <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`)

Aviso: 

  • La etiqueta twitter:url es opcional porque la URL en https://twitter.com/share?url=${shared link url} se usa de forma predeterminada. La dirección URL tiene prohibido llevar parámetros, es decir, https:// test.com/index.htm?key=error de búsqueda. Si realmente lo necesita, coloque los parámetros en el nivel del directorio, como https://testcom/search/index.htm
  • La etiqueta twitter:title debe estar presente; de ​​lo contrario, el contenido compartido no se podrá mostrar.
  • Siempre que los rastreadores puedan rastrear la dirección URL en Twitter: imagen, no importa si contiene parámetros o no.
  • La etiqueta twitter:card debe estar presente. El resumen_grande_imagen de uso común significa que se muestra en forma de una imagen grande y el resumen se muestra en forma de una imagen pequeña. Para otros usos compartidos, como vídeos, consulte la documentación oficial.
  • Debido a que el contenido compartido se obtiene en forma de rastreador, la etiqueta twitter: debe estar presente al principio de la página HTML para los rastreadores y no se puede agregar dinámicamente mediante un script js.
  • Para la generación dinámica de HTML, cuando se utilizan los métodos de integración front-end y back-end, como .jsp, .asp, haml, etc., los parámetros se generan dinámicamente en el back-end y luego se pasan al front-end. -final de página.
  • En el caso de que el front-end y el back-end estén separados, el back-end debe cooperar para generar páginas html dinámicamente.
  • Para comprobar si el enlace compartido se puede mostrar normalmente, puede depurarlo a través del depurador de uso compartido de Twitter y ver los resultados.

(4).Telegrama

Solo admite compartir con la aplicación y el escritorio:, https://t.me/share?url={链接}&text={内容}que también es el método del esquema de URL.

Supongo que te gusta

Origin blog.csdn.net/zhoupenghui168/article/details/133298326
Recomendado
Clasificación
Diario
Más
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)

Code World

© 2018 codetd.com