Line与twitter 分享功能

最新推荐文章于 2025-06-09 16:17:16 发布

一步一步往前走！

最新推荐文章于 2025-06-09 16:17:16 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： html js

本文链接：https://blog.youkuaiyun.com/weixin_44957344/article/details/108514568

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何使用Twitter和Line分享功能，包括使用encodeURIComponent()函数编码分享文本，设置meta标签以优化预览效果，以及如何通过官方文档获取更多信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

twitter分享

<a href="http://twitter.com/share?url=（要分享的网址）+'&text=' + encodeURIComponent(要分享带上的文本)" target="_blank">Twitter</a>

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
可以拼接上 + “%0A” +换行

twitter官方文档（需要科学上网）
https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

要分享的网站需要设置meta标签内容
twitter会从meta标签里面抓取信息

summary_large_image ==>大图展示
summary ==> 小图展示
  <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website" />
    <meta property="og:title" content="(标题)">
    <meta property="og:description" content="(描述)" />
    <meta property="og:url" content="(网址)" />
    <meta property="og:image" content="(要预览的图片)" />
    <meta property="og:image:width" content="686" />
    <meta property="og:image:height" content="390" />

twitter分享预览效果网址: https://cards-dev.twitter.com/validator
大图例子：在这里插入图片描述

小图例子：
在这里插入图片描述

Line分享

line官方文档（需要科学上网）
https://social-plugins.line.me/zh_TW/how_to_install#lineitbutton
Line分享也会从meta标签里面抓取信息
与上面的设置是一样的

https://line.naver.jp/R/msg/text/?' + encodeURIComponent(分享的文本) + "%0A" + encodeURIComponent(分享的网址)

Line 的效果需要Line账号才能预览（没有，无法展示）