社交共享链接自定义图标

时间:2012-09-16 15:23:34

标签: facebook twitter linkedin google-plus pinterest

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

  • 微博
  • Google +
  • LinkedIn
  • Pinterest的

我一直关注的所有文档似乎都是关于使用他们的社交类似/共享按钮 - 我认为大部分时间都不是很吸引人。像socialite.js这样的东西有助于处理在使用" native"时出现的一些其他问题。喜欢/分享按钮(抱歉不知道还有什么可以称之为),但他们说实话并不是很好。

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

干杯。

10 个答案:

答案 0 :(得分:177)

下面,我将为您提供各种服务网址

微博

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

Digg的

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

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

的StumbleUpon

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

美味

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

LinkedIn

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

Slashdot的

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

的Technorati

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

的tumblr

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

书签交易

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

Google书签

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

Newsvine

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

Ping.fm

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

Evernote的

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

谷歌+

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

答案 1 :(得分:15)

只需快速更新这些链接,此处就是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>

答案 2 :(得分:7)

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的链接:)

答案 3 :(得分:7)

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

<强>实

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

<强>微博

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

Google +

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

<强> LinkedIn

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

<强> Pinterest的

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

您可以在此处找到其他一些社交媒体自定义网址链接和实施指南 - How to Create Custom Social Share Links

答案 4 :(得分:4)

对于Facebook分享,您只需将此链接添加到任何对象:

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

其他人:对不起,但我帮不了你。

答案 5 :(得分:3)

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

  

Meddelare:这是一个开源和自托管的替代方案,可以共享AddThis和ShareThis等服务。由于您自己运行代理服务器,因此您还可以通过社交网络跟踪来保护用户的隐私。用户只有在决定点击共享按钮时才会选择加入跟踪 - 从不隐瞒他们只是因为他们访问了您的网页。

有多个版本:standalone servermiddleware for your Express.js server和单独的backend for completely custom solutions

Screenshot of a Meddelare example

有关从服务器获取的JSON / JSONP以及脚本用法,请参阅Meddelare's examples

答案 6 :(得分:1)

这是我在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按钮。

答案 7 :(得分:0)

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

答案 8 :(得分:0)

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

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

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

&#34;请自行承担风险&#34; 可能是您获得的最佳答案。

我不是律师(所以这不是法律建议!)但是从我在不同文章中可以看到的内容,一些销售图标集和自定义社交网络徽标的网站被要求删除他们来自他们的产品清单。

Facebook,Twitter或任何其他社交网络公司几乎没有机会起诉你(虽然他们可能)为你的个人博客或网站定制他们的图标/徽标,但如果你想要掩盖自己,你可能我想考虑遵循他们的指导方针......

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

您可以在网络上搜索&#34; [brandname]品牌指南&#34; ,以便为几乎所有社交网络找到这些指南。

如果您想了解更多内容,可以获得上述信息的一些来源:

希望这有帮助。

答案 9 :(得分:0)

定期更新和重新测试的github仓库,列出约50或60个服务。

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

这比接受的答案要好得多。 NewsVine,Delicious,Slashdot,Ping.fm等等,今天都是不存在的服务。此外,还有一些重要的缺失,Skype等。