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 --saveNPM
$ 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-Messenger
- 叽叽喳喳
- 谷歌
- tumblr
- Stumbleupon
- 缓冲
- DIGG
- 可口的
- VK
- 好的
- 口袋
- WordPress
- 翻转板
- 黑客
- Evernote
- 电报
- Viber
- Skype
- 短信
- 微博
请在小写( socialshare-provider="delicious" )中使用它们
Doc
( 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
( socialshare-provider="facebook-messenger" )
| 方法 | 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| 共享者 | socialshare-url =“” | URL | 页网址 | 设置要分享的URL |
叽叽喳喳
( socialshare-provider="twitter" )
| 方法 | 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| 共享者 | socialshare-url =“” | URL | 页网址 | 设置要分享的URL |
| 共享者 | socialshare-text =“” | 细绳 | 错误的 | 设置要分享的内容 |
| 共享者 | socialshare-via =“” | 字符串('用户名') | 错误的 | 设置Via分享 |
| 共享者 | socialshare-hashtags =“” | 字符串('哈希,标签,hastag') | 错误的 | 设置主题标签 |
( socialshare-provider="linkedin" )
| 方法 | 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| 共享者 | socialshare-url =“” | URL | pageurl | 设置要分享的URL |
| 共享者 | socialshare-text =“” | 细绳 | 错误的 | 设置您希望使用的标题值 |
| 共享者 | socialshare-deScription =“” | 细绳 | 错误的 | 设置您希望使用的描述值 |
| 共享者 | socialshare-source =“” | 细绳 | 错误的 | 设置内容的来源 |
( 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分享 |
( 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分享 |
( socialshare-provider="xing" )
| 方法 | 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| 共享者 | socialshare-url =“” | URL | 页网址 | 设置要分享的URL |
| 共享者 | socialshare-text =“” | 细绳 | 错误的 | 设置要分享的内容 |
| 共享者 | socialshare-Media =“” | URL | 错误的 | 设置媒体URL分享 |
| 共享者 | socialshare-follow =“” | URL | 错误的 | 设置Xing Page URL,然后建议您遵循 |
( socialshare-provider="whatsapp" )
| 方法 | 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| 共享者 | socialshare-url =“” | URL | 页网址 | 设置要分享的URL |
| 共享者 | socialshare-text =“” | 细绳 | 错误的 | 设置要分享的内容 |
电报
( socialshare-provider="telegram" )
| 方法 | 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| 共享者 | socialshare-url =“” | URL | 页网址 | 设置要分享的URL |
| 共享者 | socialshare-text =“” | 细绳 | 错误的 | 设置要分享的内容 |
Viber
( 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和/或允许软件允许与以下条件相关的软件,以下是以下条件。
上述版权通知和此许可通知应包含在软件的所有副本或大量部分中。
该软件是“原样”提供的,没有任何形式的明示或暗示保证,包括但不限于适销性,特定目的的适用性和非侵权的保证。在任何情况下,作者或版权持有人都不应对任何索赔,损害赔偿或其他责任责任,无论是在合同,侵权的诉讼中还是其他责任,是由软件,使用或与软件中的使用或其他交易有关的。
通过命令行克隆项目: