facebook - 带有自定义图标的社交分享链接

Question

我正在寻找有关为以下内容创建自定义共享图标的任何可靠的当前信息。

Facebook
推特
谷歌+
领英
Pinterest

我不断获得的所有文档似乎都是关于使用他们的社交喜欢/分享按钮——我认为大多数时候这不是很吸引人。诸如 socialite.js 之类的东西有助于处理在使用“本机”喜欢/分享按钮时出现的其他一些问题（抱歉，不知道该怎么称呼它们），但老实说它们并不是很漂亮。

任何参考资料/教程或指导都会很棒。

干杯。

score 180 · Accepted Answer

下面，我将为您提供各种服务 URL

推特

http://twitter.com/home?status=[TITLE]+[URL]

掘客

http://www.digg.com/submit?phase=2&url=[URL]&title=[TITLE]

Facebook

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

偶然发现

http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

美味的

http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]

领英

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

斜线点

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]

技术

http://technorati.com/faves?add=[URL]&title=[TITLE]

棒棒哒

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

红迪网

http://www.reddit.com/submit?url=[URL]&title=[TITLE]

谷歌书签

http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]

新闻藤

http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]

ping.fm

http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]

印象笔记

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

谷歌+

https://plus.google.com/share?url=[URL]

score 16 · Accepted Answer

只是对这些链接的快速更新，这里是 Google+ 的链接

https://plus.google.com/share?url=[URL]

现在，如果您希望这些链接在新窗口中打开，只需在 href 之后添加以下 javascript 代码：

onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"

此 javascript 代码适用于 Twitter、Google+ 和 Facebook（可能还有其他一些，但我没有测试任何其他社交网络）。

WordPress 示例：

<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Here you can add text, image, whatever.</a>

score 7 · Accepted Answer

Grzegorz 建议的解决方案已被弃用，这并不是最好的方法。对于 Facebook，您只需要加载 JS SDK ( https://developers.facebook.com/docs/reference/javascript/ ) 并在单击自定义按钮时调用 UI 提要方法。UI方法的更多细节：https ://developers.facebook.com/docs/reference/javascript/FB.ui/

对于 Twitter：https ://dev.twitter.com/docs/tweet-button#build-your-own

对于 LinkedIn、Google+ 等，您将有其他选择，但我不知道它们是否从我的头顶上知道，并且不确定它们是否提供替代方案。

继续搜索，你可能只是挖得不够深，我花了 2 分钟才找到 Twitter 的链接 :)

score 7 · Accepted Answer

下面提供了您所需的社交媒体自定义共享链接。

Facebook

http://www.facebook.com/sharer.php?u=[EncodedURL]

推特

http://twitter.com/share?text=[TITLE]&url=[URL]

谷歌+

https://plus.google.com/share?url=[EncodedURL]

领英

http://www.linkedin.com/shareArticle?mini=true&url=[EncodedURL]

Pinterest

http://pinterest.com/pin/create/button/?url=[EncodedURL]&media={[MEDIA]}&description=[TITLE]

您可以从此处找到一些其他社交媒体自定义 URL 链接和实施指南 -如何创建自定义社交分享链接

score 4 · Accepted Answer

对于 Facebook 共享，您只需将此链接添加到任何对象：

<a href="http://www.facebook.com/sharer.php?u=<url to share>
&t=<title of content>">link or image</a>

其余的：对不起，我帮不了你。

score 3 · Accepted Answer

为了自定义按钮以及来自不同社交网络和 url 共享服务的共享计数，您可以使用代理服务器。社交按钮服务器Meddelare正是这样做的（仅供参考，我是 Meddelare 背后的开发人员）。

Meddelare：这是一个开源和自托管的替代共享服务，如 AddThis 和 ShareThis。因为您自己运行代理服务器，所以您也在保护您的用户的隐私免受社交网络的跟踪。用户只有在决定点击分享按钮后才会选择加入他们的跟踪 - 绝不会因为他们访问了您的页面而隐含。

有几个版本：独立服务器、Express.js 服务器中间件和完全自定义解决方案的单独后端。

Meddelare 示例的屏幕截图

请参阅Meddelare 的示例，了解您从服务器获取的 JSON/JSONP 以及脚本使用情况。

score 2 · Accepted Answer

社交分享网址 ~ 在 Github 上！

一个定期更新和重新测试的 github 存储库，其中列出了大约 50 或 60 个服务。

https://github.com/bradvin/social-share-urls

这比公认的答案要好得多。NewsVine、Delicious、Slashdot、Ping.fm 等，在今天都是不存在的服务。另外，缺少一些重要的，Skype等。

score 1 · Accepted Answer

Twitter 链接格式http://twitter.com/home?status=[TITLE]+[URL]已弃用，将不再适用于 Twitter iOS 应用程序。

请改用以下格式

https://twitter.com/intent/tweet?text=[TITLE]+[URL]

来源： https ://dev.twitter.com/web/tweet-button

score 1 · Accepted Answer

这是我在 php 中的 facebook 解决方案。猜猜你可以为其他社交网络做类似的事情。

function customFShare() {
    $like_results = @file_get_contents('http://graph.facebook.com/'. get_permalink());
    $like_array = json_decode($like_results, true);
    return (isset($like_array['shares']) ) ? $like_array['shares'] : "0";
}
function fShareButton() {
    return "<a data-share='http://www.facebook.com/sharer/sharer.php?u=". $your_url_here ."' href='#' rel='nofollow'><i>Icon</i> <span>". customFShare() ."</span></a>";
}

HTML

<div class="facebook-share">
    <?php echo fShareButton(); ?>
</div>

jQuery

jQuery(document).on("click",".facebook-share > a", function (e) {
        e.preventDefault();
        var winHeight = 350,
            winWidth = 520,
            winTop = (screen.height / 2) - (winHeight / 2),
            winLeft = (screen.width / 2) - (winWidth / 2),
            link = $(this).data('share');
        window.open(link, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
    });

您将获得带有图标和计数器的漂亮 facebook 按钮。

score 0 · Accepted Answer

这里的答案似乎都没有真正回答 OP 问题。所以这是我的尝试：

许多社交网络实际上提供了有关如何使用其徽标、共享图标和其他链接的指南。在该主题上，有些人比其他人更灵活。

当然，在大多数情况下，它们不太适合您的设计，您可能希望使用自己的主题/网站颜色自定义它们。

“这样做需要您自担风险”可能是您得到的最佳答案。

我不是律师（所以这不是法律建议！）但从我在不同文章中看到的内容来看，一些销售带有定制社交网络徽标的图标集的网站被要求将其从产品列表中删除。

Facebook、Twitter 或任何其他社交网络公司几乎不可能起诉您（尽管他们可能会）为您的个人博客或网站定制图标/徽标，但如果您想保护自己，您可能需要考虑遵循他们的指导方针......

以下是社交网络品牌指南的一些链接：

脸书：https ://www.facebookbrand.com/
推特：https ://about.twitter.com/company/brand-assets
Google+：https ://developers.google.com/+/branding-guidelines
StumbleUpon： http: //www.stumbleupon.com/press/stumbleupon-image-use-guidelines
美味：http ://delicious.com/branding
领英：https ://brand.linkedin.com/
豆瓣：https ://www.tumblr.com/logo
Reddit：https ://www.reddit.com/about/alien/
等等

您可以在网络上搜索“[brandname] 品牌指南”，以找到适用于几乎所有社交网络的这些指南。

如果您想阅读更多信息，可以获取上述信息的一些来源：

希望这可以帮助。

facebook - 带有自定义图标的社交分享链接

10 回答 10

Related

Reference