angular socialshare

其他类别 2025-08-18

angular socialshare

angular socialshare是AngularJS指令,用于在社交网络(例如Facebook,Google+,Twitter,Pinterest等)上共享URL和内容。

angular socialshare由720KB开发。

要求

Angularjs v1.3+

浏览器支持

铬合金 Firefox IE 歌剧 野生动物园
IE9 +

加载

要使用该指令,请在网页中包含angular socialshare的JavaScript文件:

 >
< html >
< body ng-app =" app " >
  //.....
  < script src =" src/js/angular-socialshare.js " >  script >
 body >
 html > 

安装

鲍尔

$ bower install angularjs-socialshare --save

NPM

$ npm install angular-socialshare --save

然后将其加载到您的HTML中

添加模块依赖关系

添加720KB.SocialShare模块依赖关系

 angular . module ( 'app' , [
  '720kb.socialshare'
 ] ) ;

在您想要的HTML页面中,请致电指令

 < a href =" # "
socialshare
socialshare-provider =" twitter "
socialshare-text =" 720kb AngularJS Socialshare "
socialshare-hashtags =" angularjs, angular-socialshare "
socialshare-url =" http://72*0*kb.n*et " >
Share me
 a >

或者

致电社交服务

  . controller ( 'Ctrl' , [ 'Socialshare' , function testController ( Socialshare ) {

    Socialshare . share ( {
      'provider' : 'facebook' ,
      'attrs' : {
        'socialshareUrl' : 'http://72*0*kb.n*et'
      }
    } ) ; 

用法

angular socialshare允许您通过attribute数据使用共享选项

共享提供商

您可以使用socialshare-provider=""属性设置要分享的社交平台。

提供者:
  • 电子邮件
  • Facebook
  • Facebook-Messenger
  • 叽叽喳喳
  • LinkedIn
  • 谷歌
  • Pinterest
  • tumblr
  • reddit
  • Stumbleupon
  • 缓冲
  • DIGG
  • 可口的
  • VK
  • 好的
  • 口袋
  • WordPress
  • 翻转板
  • XING
  • 黑客
  • Evernote
  • WhatsApp
  • 电报
  • Viber
  • Skype
  • 短信
  • 微博

请在小写( socialshare-provider="delicious" )中使用它们

Doc

Facebook

socialshare-provider="facebook"

截至2017年4月 - 如果您想共享照片并自定义预览,则必须使用open图元

simple sharer = Facebook简单共享, share = Facebook对话框共享, feed = Facebook对话框feed, send = Facebook对话框发送

方法 选项 类型 默认 描述
分享,喂食,发送,简单共享者 socialshare-url =“” 页网址 错误的 设置URL/链接共享
饲料,发送,分享 socialshare-type =“” 字符串(“ feed”或“发送”或“共享”) 简单的共享者 使用简单的共享者或对话框发送或对话框共享或对话框提要
饲料,发送,分享 socialshare-via =“” 细绳 错误的 设置FB应用ID值
饲料,发送 socialshare-to =“” 细绳 错误的 设置值
喂养 社交共享=“” 细绳 错误的 设置从价值
饲料,发送 socialshare-ref =“” 字符串('逗号,分开') 错误的 设置参考值
饲料,发送,分享 socialshare-display =“” 字符串('popup') 错误的 设置显示值
分享 socialshare-Quote =“” 细绳 错误的 设置显示文本
分享 socialshare-hashtags =“” 细绳 错误的 将显示值与#eg:#facebook一起设置(只有一个主题标签)
喂养 socialshare-source =“” URL 错误的 设置附加到此帖子的媒体文件(SWF或MP3)的URL
饲料,发送 socialshare-redirect-uri =“” URL 错误的 设置重定向URI
分享 socialshare-mobileiframe =“” 布尔 错误的 如果设置为TRUE,则共享按钮将在网站顶部的iframe中打开“共享”对话框。此选项仅适用于移动设备,而不是桌面。

Facebook Messenger

mobile only - (仅适用于元素,它是直接链接)

socialshare-provider="facebook-messenger"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL

叽叽喳喳

socialshare-provider="twitter"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-via =“” 字符串('用户名') 错误的 设置Via分享
共享者 socialshare-hashtags =“” 字符串('哈希,标签,hastag') 错误的 设置主题标签

LinkedIn

socialshare-provider="linkedin"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL pageurl 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置您希望使用的标题值
共享者 socialshare-deScription =“” 细绳 错误的 设置您希望使用的描述值
共享者 socialshare-source =“” 细绳 错误的 设置内容的来源

reddit

socialshare-provider="reddit"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL pageurl 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置文本内容以共享
共享者 socialshare-subreddit =“” 字符串(“技术”) 错误的 设置subreddit分享

VK

socialshare-provider="vk"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置标题共享
共享者 socialshare-deScription =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置图像源共享

好的

(ok.ru)

socialshare-provider="ok"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

DIGG

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置媒体URL分享

可口的

socialshare-provider="delicious"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置媒体URL分享

Stumbleupon

socialshare-provider="stumbleupon"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置媒体URL分享

Pinterest

socialshare-provider="pinterest"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置媒体URL分享

Google(plus)

socialshare-provider="google"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL

tumblr

socialshare-provider="tumblr"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置媒体URL分享

缓冲

socialshare-provider="buffer"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置媒体URL分享
共享者 socialshare-via =“” URL 错误的 设置缓冲区通过

口袋

socialshare-provider="pocket"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

翻转板

socialshare-provider="flipboard"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

Evernote

socialshare-provider="evernote"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

黑客新闻

socialshare-provider="hackernews"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

WordPress

socialshare-provider="wordpress"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置媒体URL分享

XING

socialshare-provider="xing"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-Media =“” URL 错误的 设置媒体URL分享
共享者 socialshare-follow =“” URL 错误的 设置Xing Page URL,然后建议您遵循

WhatsApp

mobile only - (仅适用于元素,它是直接链接)

socialshare-provider="whatsapp"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

电报

socialshare-provider="telegram"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

Viber

mobile only - (仅适用于元素,它是直接链接)

socialshare-provider="viber"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

Skype

socialshare-provider="skype"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

电子邮件

socialshare-provider="email"

方法 选项 类型 默认 描述
mailto 社交主题=“” 细绳 错误的 为电子邮件设置主题
mailto socialshare-body =“” 细绳 错误的 设置电子邮件的身体内容
mailto socialshare-to =“” 细绳 错误的 设置接收器 /接收器
mailto cocilesshare-cc =“” 细绳 错误的 为电子邮件设置CC / CCS
mailto socialshare-bcc =“” 细绳 错误的 为电子邮件设置BCC / BCC

短信

(仅适用于元素,这是一个直接链接)

socialshare-provider="sms"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容
共享者 socialshare-to =“” URL 错误的 设置联系人的电话号码

微博

socialshare-provider="weibo"

方法 选项 类型 默认 描述
共享者 socialshare-url =“” URL 页网址 设置要分享的URL
共享者 socialshare-text =“” 细绳 错误的 设置要分享的内容

选项

共享弹出大小

您可以使用socialshare-popup-height=""socialshare-popup-width=""属性设置特定的高度或宽度,以共享弹出窗口(有时,如果弹出窗口太小,则会由第三方调整大小)。

 < a href =" # "
socialshare
socialshare-provider =" reddit "
socialshare-url =" http://72*0*kb.n*et "
socialshare-text =" Sharing it! "
socialshare-popup-height =" 800 "
socialshare-popup-width =" 800 " >
Share with a bigger popup
 a > 

共享事件触发器

您可以选择使用socialshare-trigger=""属性绑定不同的事件触发器以显示共享者弹出窗口(您可以使用任何Angular element.bind()事件)

 < a href =" # "
socialshare
socialshare-provider =" reddit "
socialshare-text =" Sharing on mouseover "
socialshare-trigger =" mouseover " >
Share me when mouse is over
 a >

或一组

 < a href =" # "
socialshare
socialshare-provider =" reddit "
socialshare-text =" Sharing on mouseover "
socialshare-trigger =" focusout mouseleave " >
Share me when focusout or mouseleave
 a > 

服务

您可能需要从控制器分享(例如),这是使用Socialshare服务的方法:

  . controller ( 'Ctrl' , [ 'Socialshare' , function testController ( Socialshare ) {

    Socialshare . share ( {
      'provider' : 'facebook' ,
      'attrs' : {
        'socialshareUrl' : 'http://72*0*kb.n*et'
      }
    } ) ;

    Socialshare . share ( {
      'provider' : 'twitter' ,
      'attrs' : {
        'socialshareUrl' : 'http://72*0*kb.n*et' ,
        'socialshareHashtags' : '720kb, angular, socialshare'
      }
    } ) ;
    //every attrs must be in camel case as showed above
    //this will open the share popup immediately without any trigger event required

一些提供商(特别是移动提供商,例如:Viber,WhatsApp等)不使用服务呼叫,因为它们的API或使用不允许在其上触发事件

全球群体

提供商设置

有时,您可能需要为所有共享按钮设置默认值,这是如何设置此功能:

 . config ( [ 'socialshareConfProvider' , function configApp ( socialshareConfProvider ) {

  socialshareConfProvider . configure ( [
    {
      'provider' : 'twitter' ,
      'conf' : {
        'url' : 'http://72*0*kb.n*et' ,
        'text' : '720kb is enough' ,
        'via' : 'npm' ,
        'hashtags' : 'angularjs,socialshare,angular-socialshare' ,
        'trigger' : 'click' ,
        'popupHeight' : 800 ,
        'popupWidth' : 400
      }
    } ,
    {
      'provider' : 'facebook' ,
      'conf' : {
        'url' : 'http://72*0*kb.n*et' ,
        'trigger' : 'mouseover' ,
        'popupHeight' : 1300 ,
        'popupWidth' : 1000
      }
    }
  //and so on ...
  ] ) ;
} ] ) ;

NB如果定义了提供商设置,但是通过HTML属性更改选项值,则HTML属性值将是最终的(将被使用的值)

现场演示

贡献

如果您帮助我们使这个项目成长,我们将非常感激。随意通过分叉,开头问题,拉请请求等做出贡献。

执照

麻省理工学院许可证(MIT)

版权(C)2014 Filippo Oretti,Dario Andrei

特此免费获得许可,免费授予任何获得此软件副本和相关文档文件(“软件”)的人,以无限制地处理软件,包括无限制的使用权,复制,复制,修改,合并,发布,分发,分发,分发,分配,sublicense和/或允许软件允许与以下条件相关的软件,以下是以下条件。

上述版权通知和此许可通知应包含在软件的所有副本或大量部分中。

该软件是“原样”提供的,没有任何形式的明示或暗示保证,包括但不限于适销性,特定目的的适用性和非侵权的保证。在任何情况下,作者或版权持有人都不应对任何索赔,损害赔偿或其他责任责任,无论是在合同,侵权的诉讼中还是其他责任,是由软件,使用或与软件中的使用或其他交易有关的。

下载源码

通过命令行克隆项目:

git clone https://github.com/720kb/angular-socialshare.git