准备工作

1、首先需要在HTML的head添加下述meta标签内容,在分享时,Twitter和Facebook会爬取该网站页面的meta内容,然后生成分享卡片。

2、按照下述配置完成后,需要把内容发布上线,否则Twitter和Facebook无法爬取到网页配置的meta信息。

3、完成上面的两个步骤后,使用官方的测试工具测试分享效果,如果配置正确就可以预览到分享的效果:

4、Twitter和Facebook爬取内容填写的url位置有些区别,其中Facebook无法设置自定义内容。

切记: 配置完成后,请务必使用上述的测试工具进行测试,否则可能会出现即使配置正确了,在开发测试分享功能的时候,效果也可能没生效。

Facebook分享

  • meta标签内容:
<meta property="og:title" content="Remove Image Background for Free">
<meta property="og:description" content="Remove Image Background for Free">
<meta property="og:site_name" content="xxxxxx.com">
<meta property="og:url" content="https://xxxxxx.com">
<meta property="og:image" content="https://xxxxx.com/image_background.jpg">
  • 字段对应关系预览:

<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u='链接,分享爬取的内容就是这个从这个链接,该链接不会显示在分享卡片上'">Facebook分享</a>
  • 为了方便这里封装了方法:
/**
* 快速分享到Facebook
*/
export const facebookShare = () => {
const url = encodeURIComponent('链接,分享爬取的内容就是这个从这个链接,该链接不会显示在分享卡片上');
const facebook = `http://www.facebook.com/sharer/sharer.php?u=${url}`;
window.open(facebook, '_blank');
};

Twitter分享

  • meta标签内容:
<!-- 注:下述的twitter:url 链接,即为twitter从这个链接爬取分享的内容  -->
<meta property="twitter:url" content="https://xxxxxx.com">
<meta name="twitter:title" content="Remove Image Background for Free">
<meta name="twitter:description" content="Remove Image Background for Free">
<meta name="twitter:site" content="@PixCut">
<meta property="twitter:image" content="https://xxxxxx.com/image_background.jpg">
<meta name="twitter:card" content="summary_large_image">
  • 字段对应关系预览:

<a target="_blank"href="https://twitter.com/intent/tweet?text=自定义内容,可以文字链接之类的&amp;via=twitter账号名,会显示@XXX">Twitter分享</a>
  • 为了方便这里封装了方法:
/**
* 快速分享到twitter
*/
export const twitterShare = () => {
// 自定义内容
const content = '点击此处链接领取奖品,可选'
const url = encodeURIComponent('链接,可选');
const text = `${content} ${url}&via=${via}`;
// 分享后会显示 “via @张三”
const via = '张三';
// 拼接链接
const twitter = `https://twitter.com/intent/tweet?text=${text}`;
window.open(twitter, '_blank');
};

接入Twitter和Facebook分享踩坑记录的更多相关文章

  1. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  2. 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负责的模块connector就派上了用场. ...

  3. python发布包到pypi的踩坑记录

    前言 突然想玩玩python了^_^ 这篇博文记录了我打算发布包到pypi的踩坑经历.python更新太快了,甚至连这种发布上传机制都在不断的更新,这导致网上的一些关于python发布上传到pypi的 ...

  4. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  5. manjaro xfce 18.0 踩坑记录

    manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...

  6. [技术博客]iview组件样式踩坑记录

    [技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...

  7. DevOps落地实践点滴和踩坑记录-(2) -聊聊平台建设

    很久没有写文章记录了,上一篇文章像流水账一样,把所见所闻一个个记录下来.这次专门聊聊DevOps平台的建设吧,有些新的体会和思考,希望给正在做这个事情的同学们一些启发吧. DevOps落地实践点滴和踩 ...

  8. unionId突然不能获取的踩坑记录

    昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...

  9. CentOS7.4安装MySQL踩坑记录

    CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...

随机推荐

  1. HMS Core音频编辑服务3D音频技术,助力打造沉浸式听觉盛宴

    2022年6月28日,HDD·HMS Core.Sparkle影音娱乐沙龙在线上与开发者们见面.HMS Core音频编辑服务(Audio Editor Kit)专家为大家详细分享了基于分离的3D音乐创 ...

  2. Spring 核心概念

    Spring 核心概念 引言 本文主要介绍 Spring 源码中使用到的一些核心类 1. BeanDefinition BeanDefinition表示Bean定义,BeanDefinition 中存 ...

  3. k8s+crio+podman搭建集群

    前言 在传统的k8s集群中,我们都是使用docker engine做为底层的容器管理软件的,而docker engine因为不是k8s亲生的解决方案,所以实际使用中会有更多的分层.之前我们也讲过,k8 ...

  4. NC15665 maze

    题目链接 题目 题目描述 小明来到一个由n x m个格子组成的迷宫,有些格子是陷阱,用'#'表示,小明进入陷阱就会死亡,'.'表示没有陷阱.小明所在的位置用'S'表示,目的地用'T'表示. 小明只能向 ...

  5. for(int i=0;i<1000;i++)与 for(int i=1;i<=1000;i++)。 if ( i%500){}//前者表示0-501一个循环,后者1-500一个循环

    `package com.Itbz; import java.sql.Connection; import java.sql.PreparedStatement; /** 向mysql数据库批量添加数 ...

  6. 网络编程、OSI七层协议

    目录 软件开发架构 1.什么是软件开发架构 2.软件开发架构 3.架构优劣势 4.架构发展趋势 网络编程简介 1.如何理解网络编程 2.网络编程的目的 3.网络编程的意义 4.网络编程的起源 5.网络 ...

  7. 163_技巧_Power BI 一键批量建立自定义字段参数

    163_技巧_Power BI 一键批量建立自定义字段参数 一.背景 在 2022 年 5 月开始,Power BI 新增了一个非常有用的功能字段参数.再也不用写一串的 SWITCH 了.字段参数的效 ...

  8. Python 爬取途虎养车 全系车型 轮胎 保养 数据

    Python 爬取途虎养车 全系车型 轮胎 保养 数据 2021.7.27 更新 增加标题.发布时间参数 demo文末自行下载,需要完整数据私聊我 2021.2.19 更新 增加大保养数据 2020. ...

  9. Regular采样类定义和测试

    这个算法是均匀采样算法,继承于Sampler类. 类声明: #pragma once #ifndef __REGULAR_HEADER__ #define __REGULAR_HEADER__ #in ...

  10. 从0搭建Vue3组件库:button组件

    button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...