zoukankan      html  css  js  c++  java
  • facebook 推特. Line 领英 分享功能 带图标(最全,实测可用)

    这个问题,我发现目前现网上的资料很少有全的,都是不对。分享要么没图标,要么显示不对。经过采坑,分享记录一下,完全的如下:

    <a href="https://twitter.com/share?lang=zh&text=我的世界&url=https%3A%2F%2Ftest.koa.com%2Fregist%3Fid=99" class="share-twitter">Twitter</a>
    
    <a href="https://www.facebook.com/share.php?title=我的世界&u=https%3A%2F%2Ftest.koa.com%2Fregist%3Fid=99" class="share-facebook">Facebook</a>
    
    <a href="https://www.linkedin.com/shareArticle?mini=true&source=str&title=我的世界&url=https%3A%2F%2Fbeta.koa.com%2Fregist" class="share-linkedin">LinkedIn</a>
    
    
    <a href="https://lineit.line.me/share/ui?url=http%3A%2F%2Ftest.koa.com%2FproductDetails%3FproductId=1543" class="share-linkedin">LinkedIn</a>
    
    

    图解:

     上面是分享按钮,设置好之后  在要  head 上加上 如下 :这是给 sei抓取的,可以不加

    <!-- twitter-->
    
    <meta name="twitter:image" content="https://koa.com/logo_128x128.png" />
    
    <meta name="twitter:creator" content="@veroluiza" />
    
    <meta name="twitter:card" content="summary" />
    
    <meta name="twitter:url"   content="当前分享的链接--可要可不要" />
    
    
    
    <!-- facebook -->
    
    <meta property="og:updated_time" content="2019-01-22T21:34:21+00:00" />
    
    <meta property="og:image" content="https://koa.com/logo_128x128.png" />
    
    <meta property="og:image:secure_url" content="https://koa.com/logo_128x128.png" />
    
    <meta property="og:image:width" content="128" />
    
    <meta property="og:image:height" content="128" />

    =========================================================================================

    那么分享之后的,就会有 图标。 跟标题了。自动带链接过去!!图标必须是要url链接形式,直接写图标文件目录是不行的。

    最后一个问题呢,就是领英的分享 带图标的话,图标抓取只认 二级域名, 一级域名不认,虽然不知道为啥,但这是多次实验的结果,欢迎指正!!

    推特带图片分享

    https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.websiteplanet.com

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@website_planet" />
    <meta name="twitter:description" content="Want to build a website? You don't need technical know-how to buy a domain, choose a web builder, design a logo, and get content online. Read our steps to get you started." />
    <meta name="twitter:title" content="How to Build a Website in 2021: Complete Step-by-Step Guide" />
    <meta name="twitter:image" content="https://dt2sdf0db8zob.cloudfront.net/wp-content/themes/websiteplanet/img/websiteplanet_image.png" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@site_username">
    <meta name="twitter:title" content="0079">
    <meta name="twitter:description" content="this.isa测试">
    <meta name="twitter:creator" content="@creator_username">
    <meta name="twitter:image" content="https://dt2sdf0db8zob.cloudfront.net/wp-content/themes/websiteplanet/img/websiteplanet_image.png">
    <meta name="twitter:domain" content="www.websiteplanet.com">
  • 相关阅读:
    负载均衡软件LVS 三种实现模式对比
    论文学习笔记:High-level pattern-based classification via tourist
    论文学习笔记:A Network-Based High Level Data Classification
    第四章--度相关性和社团结构(复杂网络学习笔记)
    第三章--网络基本拓扑性质(复杂网络学习笔记)
    第二章--网络与图(复杂网络学习笔记)
    神经网咯基础-deeplearning.ai【笔记】
    前端Jquery-Ajax跨域请求,并携带cookie
    Django中解决跨域请求问题
    1- 基本概念(复杂网络学习笔记)
  • 原文地址:https://www.cnblogs.com/lllomh/p/14991920.html
Copyright © 2011-2022 走看看