【问题标题】:How to make a custom LinkedIn share button如何制作自定义 LinkedIn 分享按钮
【发布时间】:2012-05-23 04:41:05
【问题描述】:

我需要能够向我的自定义按钮添加共享功能。我对their generator 不感兴趣,因为我无法在那里更改 LinkedIn 图像。我想为 LinkedIn 分享按钮使用我自己的图片。

【问题讨论】:

  • 他们不希望您制作自定义按钮。事实上,他们的服务条款可能禁止这样做,因为他们希望他们的按钮看起来像他们的按钮。
  • 但是没有像 Twitter 这样的方法,你可以只使用链接来分享吗?然后用户被重定向到他只需要确认的页面......
  • 自定义LinkedIn登录按钮怎么样?
  • 请记住,如果 LinkedIn 无法访问您的网站,则任何基于 URL 的方法都将不起作用。这包括它是否在 BasicAuth 墙后面

标签: api share linkedin


【解决方案1】:

LinkedIn官方分享API:

https://developer.linkedin.com/docs/share-on-linkedin

阅读使用条款!

使用“自定义 URL”方法的示例链接:http://www.linkedin.com/shareArticle?mini=true&url=https://stackoverflow.com/questions/10713542/how-to-make-custom-linkedin-share-button/10737122&title=How%20to%20make%20custom%20linkedin%20share%20button&summary=some%20summary%20if%20you%20want&source=stackoverflow.com

您只需要使用 JavaScript 在弹出窗口中打开它或将其加载到 iframe。简单而有效 - 这就是我想要的!

编辑:附加到帖子的视频:

我检查了您不能真正将任何视频嵌入到 LinkedIn 帖子中,唯一的选择是将链接添加到带有视频本身的页面。

您可以通过将YT链接放入url参数来实现:

https://www.linkedin.com/shareArticle?mini=true&url=https://www.youtube.com/watch?v=SBi92AOSW2E

如果您指定 summarytitle,LinkedIn 将停止从视频中提取它,例如:

https://www.linkedin.com/shareArticle?mini=true&summary=youtube&title=f1&url=https://www.youtube.com/watch?v=SBi92AOSW2E

它与 Vimeo 的工作方式完全相同,并且可能适用于任何网站。希望它会有所帮助。

编辑 2:将图片拉到帖子中:

当您打开上面的链接时,您会看到 LinkedIn 加载了一些图像以及传递的 URL(以及可选的标题和摘要)。

LinkedIn 会自动执行此操作,您可以在此处阅读:https://developer.linkedin.com/docs/share-on-linkedin#opengraph

正如它所说的,这很有趣:

如果存在 Open Graph 标签,LinkedIn 的爬虫将不必 依靠自己的分析来确定将共享哪些内容, 这提高了共享信息的可能性 正是你想要的。

它告诉我,即使没有附加 Open Graph 信息,LinkedIn 也可以根据自己的分析拉取这些数据。在 YouTube 的情况下,似乎就是这种情况,因为我找不到任何添加到 YouTube 页面的 Open Graph 标签。

【讨论】:

  • 有没有办法在文本区域播种文字?我尝试了一堆不同的参数,都无法正常工作。
  • 不是真的@raphaelcm - 在新的 API 中,您可以添加摘要文本,但它不会显示在 textarea 中。
  • 示例链接应该在弹出窗口中打开 - 这样分享后您关闭弹出窗口并留在网站上,例如stackoverflow.com/a/14352248/571230
  • /shareArticle URL 不再像以前那样起作用。它重定向到https://www.linkedin.com/sharing/share-offsite/?url=...,丢失其他参数。
【解决方案2】:

您可以使用LinkedIn ShareArticle URL 制作自己的分享按钮,该网址可以有以下参数:

https://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource}

您可以找到文档here,只需选择“自定义URL”即可查看详细信息。

【讨论】:

  • 能否建议我在哪里添加图片?
  • @cracker 根据文档,没有自定义图像的选项。
  • LinkedIn ShareArticle URL 目前无法使用。您可以分享它,但它没有显示在新闻源中
  • 如何在上面的分享链接中包含图片?
  • 文档现已更新,使用新的 API:docs.microsoft.com/en-us/linkedin/consumer/integrations/…
【解决方案3】:

第 1 步 - 获取正确的 URL

这里的许多答案直到最近才有效。目前,ONLY支持的参数是url,新的分享链接如下...

https://www.linkedin.com/sharing/share-offsite/?url={url}

确保使用fixedEncodeURIComponent() 之类的方式对url 进行编码。

来源:Official Microsoft.com Linkedin Share Plugin Documentation。开发人员文档的所有 LinkedIn.com 链接现在似乎都是空白页 - 可能与 Microsoft 收购 LinkedIn 有关。

第 2 步 - 设置自定义参数(标题、图片、摘要等)

曾几何时,您可以使用这些参数:titlesummarysource。但是如果你仔细查看所有的文档其实还是有办法设置摘要、标题等的!把这些在您要分享的页面的<head> 块中...

  • <meta property='og:title' content='Title of the article"/>
  • <meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
  • <meta property='og:description' content='Description that will show in the preview"/>
  • <meta property='og:url' content='//www.example.com/URL of the article" />

然后LinkedIn 将使用这些!来源:LinkedIn Developer Docs: Making Your Website Shareable on LinkedIn

第 3 步 - 验证 LinkedIn 分享结果

不确定您是否做对了所有事情?获取您正在共享的页面的 URL(即 example.com,而不是 linkedin.com/share?url=example.com),然后将该 URL 输入到以下内容中:LinkedIn Post Inspector。这将告诉您有关如何共享您的 URL 的所有信息!

这还会拉取/使您页面的当前缓存无效,然后刷新它(以防您在 LinkedIn 的数据库中有页面的卡住、缓存版本)。因为它会拉取缓存,然后刷新它,所以有时最好使用 LinkedIn Post Inspector 两次,并使用第二个结果作为预期输出。

还不确定?这是我用 20 多个社交共享服务构建的 online demo。检查源代码并亲自了解 LinkedIn 共享的工作原理。

第 4 步 - 查找 更多 社交分享服务及其分享网址

我一直在维护一个自 2012 年以来一直在跟踪社交分享 URL 格式的 Github 存储库,请查看:Github: Social Share URLs

为什么不加入所有社交分享网址?

【讨论】:

    【解决方案4】:

    【讨论】:

    • 是的,已经有一段时间了,它在接受答案的编辑部分中
    • 这不再像以前那样起作用了。它重定向到https://www.linkedin.com/sharing/share-offsite/?url=...,丢失其他参数。
    • @PhilGyford 你找到方法来发布摘要和标题了吗?
    • @Mukus 不,我最终只传递了 URL,并依靠 LinkedIn 从页面本身获取标题。
    • @Mukus 我正在使用 Wordpress,看起来标题取自 example.co.uk/example_post/feed 。无论如何,我都不是高手,但我正在尝试找到一种方法来编辑/更改/覆盖“/feed/”文件。有什么想法吗?
    【解决方案5】:

    最好使用customize url的方式。它是最简单的。找到了这个。它将打开一个弹出窗口,您不需要任何 bs 身份验证问题,因为 w_share 等等。

    <a href="https://www.linkedin.com/shareArticle?mini=true&url=http://chillyfacts.com/create-linkedin-share-button-on-website-webpages&title=Create LinkedIn Share button on Website Webpages&summary=chillyfacts.com&source=Chillyfacts" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
      <img src="http://chillyfacts.com/wp-content/uploads/2017/06/LinkedIN.gif" alt="" width="54" height="20" />
    </a>

    只需将url 更改为您自己的网址即可。这是链接http://chillyfacts.com/create-linkedin-share-button-on-website-webpages/

    【讨论】:

    • mywin的作用是什么?我只在一个地方看到它。
    • @RazvanZamfir 这是弹出窗口的名称。my window 的缩写是 mywin。您可以添加任何名称。
    • 嗨,当我添加自己的网站时,这不起作用。但仍然适用于你的。有什么理由吗?我已经尝试了一切..非常感谢
    • 谢谢。这比官方的 MS 文档更有帮助和直接。没有弹出窗口的第二个链接选项正是我想要的。
    【解决方案6】:

    API 现已更新,之前的 API 将于 2019 年 3 月 1 日弃用。

    要为 LinkedIn 创建自定义分享按钮,您现在需要进行 POST 调用。你可以阅读更新的文档here 这样做。

    【讨论】:

    • 你在说什么分享文章 API 仍然有效。您能否分享一个包含实际折旧信息的链接?
    • 来自developer.linkedin.com/plugins,您将被重定向到新的 API。
    【解决方案7】:

    LinkedIn 最近修改了他们的网站,因此有大量旧链接只是重定向到开发人员支持主页。以下是 LinkedIn 支持网站上相关页面的更新链接(截至 2015 年 2 月 16 日):https://developer.linkedin.com/docs/share-on-linkedin

    【讨论】:

    • 这也已经过时了,现在微软拥有 LinkedIn,所有开发者文档都重定向到微软的文档
    【解决方案8】:

    LinkedIn 更新了他们的 api,分享网址不再有效。现在您只能使用url 查询参数。 LinkedIn 将从 url 中删除任何其他参数。

    现在您不得不使用 oAuth 并与 linkedin API 交互以代表用户共享内容。

    【讨论】:

    • 你在说什么分享文章 API 仍然有效。您能否分享一个包含实际折旧信息的链接?
    • @michal 您无法再找到有关https://www.linkedin.com/shareArticlehttps://www.linkedin.com/sharing/share-offsite/ 方法的任何官方文档。 @lcjury 提到的The official documentation 只谈论使用 oAuth。如果您发现不同的东西,请告诉我们。因此,虽然他们仍然在做某种工作,但它只是他们接受的 url 属性,谁知道他们将继续工作多久。
    【解决方案9】:

    这对我有用:

    https://www.linkedin.com/shareArticle?mini=true&url=articleUrl&title=YourarticleTitle&summary=YourarticleSummary&source=YourarticleSource
    

    您可以通过将其替换为您的内容来使用此链接。 100% 有效。

    【讨论】:

      【解决方案10】:

      页面加载后,您可以像这样自定义标准的 Linkedin 按钮:

      $(".IN-widget span:first-of-type").css({
                      'border': '2px solid #DCDCDC',
                      '-webkit-border-radius': '3px',
                      '-moz-border-radius': '3px',
                      'border-radius': '3px'
                      });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-03-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-08-30
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多