登录
当前位置： 首页 > 软件库 > Web应用开发 > Web框架 >

angular-socialshare

授权协议 Readme
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 金高轩
操作系统 跨平台
开源组织 无
适用人群 未知
软件官网
软件文档
官方下载
安全指数
 软件概览

Angular Socialshare

Angular socialshare

Angular Socialshare is an angularjs directive for sharing urls and content on social networks such as (facebook, google+, twitter, pinterest and so on).

The Angular Socialshare is developed by 720kb.

Requirements

AngularJS v1.3+

Browser support

Chrome Firefox IE Opera Safari
✔ ✔ IE9 + ✔ ✔

Load

To use the directive, include the angular socialshare's javascript file in your web page:

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

Installation

Bower

$ bower install angularjs-socialshare --save

npm

$ npm install angular-socialshare --save

then load it in your html

Add module dependency

Add the 720kb.socialshare module dependency

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

Call the directive wherever you want in your html page

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

OR

Call the Socialshare service

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

    Socialshare.share({
      'provider': 'facebook',
      'attrs': {
        'socialshareUrl': 'http://720kb.net'
      }
    });

Usage

Angular socialshare allows you to use sharing options via attribute data

Sharing Provider

You can set the social platform you want to share on using the socialshare-provider="" attribute.

Providers:

Please use them all in lowercase (socialshare-provider="delicious")

Doc

Facebook

(socialshare-provider="facebook")

As of April 2017 - If you want to share a photo and customize the previews you must use Open Graph Metas

simple sharer = Facebook simple share , share = Facebook Dialog Share, feed = Facebook Dialog Feed, send = Facebook Dialog Send

Method Option Type Default Description
share, feed, send, simple sharer socialshare-url="" page URL false Set the url/link to share
feed, send, share socialshare-type="" String('feed' or 'send' or 'share') simple sharer Use a simple sharer or Dialog Send or Dialog Share or Dialog Feed
feed, send, share socialshare-via="" String false Set the FB APP ID value
feed, send socialshare-to="" String false Set the to value
feed socialshare-from="" String false Set the from to value
feed, send socialshare-ref="" String('comma,separated') false Set the ref value
feed, send, share socialshare-display="" String('popup') false Set the display value
share socialshare-quote="" String false Set the display text
share socialshare-hashtags="" String false Set the display value along with # Eg:#facebook (one only hashtag)
feed socialshare-source="" URL false Set the URL of a media file (either SWF or MP3) attached to this post
feed, send socialshare-redirect-uri="" URL false Set the redirect URI
share socialshare-mobileiframe="" boolean false If set to true the share button will open the share dialog in an iframe on top of your website. This option is only available for mobile, not desktop.

Facebook Messenger

mobile only - (works only for <a> elements, it is a direct link)

(socialshare-provider="facebook-messenger")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share

Twitter

(socialshare-provider="twitter")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-via="" String('username') false Set the via to share
sharer socialshare-hashtags="" String('hash,tag,hastag') false Set the hashtags to share

Linkedin

(socialshare-provider="linkedin")

Method Option Type Default Description
sharer socialshare-url="" URL pageURL Set the url to share
sharer socialshare-text="" String false Set the title value that you wish to use
sharer socialshare-description="" String false Set the description value that you wish to use
sharer socialshare-source="" String false Set the source of the content

Reddit

(socialshare-provider="reddit")

Method Option Type Default Description
sharer socialshare-url="" URL pageURL Set the url to share
sharer socialshare-text="" String false Set the text content to share
sharer socialshare-subreddit="" String('technology') false Set the subreddit to share on

Vk

(socialshare-provider="vk")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the title to share
sharer socialshare-description="" String false Set the content to share
sharer socialshare-media="" URL false Set the image source to share

OK

(ok.ru)

(socialshare-provider="ok")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Digg

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-media="" URL false Set the media url to share

Delicious

(socialshare-provider="delicious")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-media="" URL false Set the media url to share

StumbleUpon

(socialshare-provider="stumbleupon")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-media="" URL false Set the media url to share

Pinterest

(socialshare-provider="pinterest")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-media="" URL false Set the media url to share

Google (Plus)

(socialshare-provider="google")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share

Tumblr

(socialshare-provider="tumblr")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-media="" URL false Set the media url to share

Buffer

(socialshare-provider="buffer")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-media="" URL false Set the media url to share
sharer socialshare-via="" URL false Set the buffer via

Pocket

(socialshare-provider="pocket")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Flipboard

(socialshare-provider="flipboard")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Evernote

(socialshare-provider="evernote")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Hacker News

(socialshare-provider="hackernews")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Wordpress

(socialshare-provider="wordpress")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-media="" URL false Set the media url to share

Xing

(socialshare-provider="xing")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-media="" URL false Set the media url to share
sharer socialshare-follow="" URL false Set the Xing page url which will be then suggested to you to follow

Whatsapp

mobile only - (works only for <a> elements, it is a direct link)

(socialshare-provider="whatsapp")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Telegram

(socialshare-provider="telegram")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Viber

mobile only - (works only for <a> elements, it is a direct link)

(socialshare-provider="viber")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Skype

(socialshare-provider="skype")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Email

(socialshare-provider="email")

Method Option Type Default Description
mailto socialshare-subject="" String false Set the subject for the email
mailto socialshare-body="" String false Set the body content for the email
mailto socialshare-to="" String false Set the Receiver / Receivers
mailto socialshare-cc="" String false Set the CC / CCs for the email
mailto socialshare-bcc="" String false Set the BCC / BCCs for the email

Sms

(works only for <a> elements, it is a direct link)

(socialshare-provider="sms")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share
sharer socialshare-to="" URL false Set the phone number of the contact

Weibo

(socialshare-provider="weibo")

Method Option Type Default Description
sharer socialshare-url="" URL page URL Set the url to share
sharer socialshare-text="" String false Set the content to share

Options

Sharing Popup Size

You can set a specific Height or Width for the sharing popup using the socialshare-popup-height="" and socialshare-popup-width="" attributes (sometimes, if if the popup is too small, it gets resized by third parties)

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

Sharing Event Trigger

You can choose to bind a different event trigger for showing up the sharer popup using the socialshare-trigger="" attribute (you can use any angular element.bind() event you want)

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

or a set of

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

Service

You may need to share from a controller (for example), this is how to use the Socialshare service:

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

    Socialshare.share({
      'provider': 'facebook',
      'attrs': {
        'socialshareUrl': 'http://720kb.net'
      }
    });

    Socialshare.share({
      'provider': 'twitter',
      'attrs': {
        'socialshareUrl': 'http://720kb.net',
        '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

Some providers (specially mobile provider, such as: Viber, Whatsapp etc..) do not work with a Service call, because their API or Usage does not allow a trigger event on them

Globals

Provider setup

Sometimes you may need to set default values for all the sharing buttons, here is how to setup this:

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

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

NB if you define the provider settings, but then you change the option value by html attributes, the html attribute value will be the final one (the one that will be used)

Live demo

Contributing

We will be much grateful if you help us making this project to grow up.Feel free to contribute by forking, opening issues, pull requests etc.

License

The MIT License (MIT)

Copyright (c) 2014 Filippo Oretti, Dario Andrei

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

 使用案例
  • Angular material mat-icon 资源参考_Social

    Icon Icon Name mat-icon code cake cake icon <mat-icon>cake</mat-icon> domain domain icon <mat-icon>domain</mat-icon> group group icon <mat-icon>group</mat-icon> group_add group add icon <mat-icon>grou

  • angular sse_Angular和服务器发送事件（SSE）

    angular sse In this post I will show you how to connect to Server Sent Events (SSE) source in Angular app. We will create a small prototype that will connect to Server Sent Events (SSE) endpoint using

  • angular 最佳实践_干净高效的Angular应用程序的最佳实践

    angular 最佳实践 by Vamsi Vempati 由Vamsi Vempati 干净高效的Angular应用程序的最佳实践 (Best practices for a clean and performant Angular application) I have been working on a large scale Angular application at Trade Me,

  • angular——分享按钮的上拉菜单

    <button class="btn gray_text_btn list_item" ng-click="action.toShare()"><i class="icon ion-share"></i></button> <!-------------------- 底部按钮 -----------------------> <section class="bar bar-foote

 相关资料
  • Angular

    Angular 是一款十分流行且好用的 Web 前端框架，目前由 Google 维护。这个条目收录的是 Angular 2 及其后面的版本。由于官方已将 Angular 2 和之前的版本 Angular.js 分开维护（两者的 GitHub 地址和项目主页皆不相同），所以就有了这个页面。传送门：Angular.js 特性 跨平台 渐进式 Web 应用 借助现代化 Web 平台的力量，交付 app

  • Angular 2

    即将到来的Angular 2框架是使用TypeScript开发的。 因此Angular和TypeScript一起使用非常简单方便。 Angular团队也在其文档里把TypeScript视为一等公民。 正因为这样，你总是可以在Angular 2官网(或Angular 2官网中文版)里查看到最新的结合使用Angular和TypeScript的参考文档。 在这里查看快速上手指南，现在就开始学习吧！

  • Angular CLI

    从头开始创建项目 lint你的代码 运行您的单元测试和端到端测试。 Angular 2 CLI目前只在TypeScript中生成框架，稍后还会有其他版本。

  • Why Angular?

    这小节内容是译者加的，因为我认为对于新手而言，学习一个框架是有成本的，特别是对于一个不算简单的技术来说，我希望这篇教程是对新手友好的，所以我首先要让你放心的将时间和精力投入到Angular2 中。那我们先不谈技术细节，先用数据说话。 这里我多说一句，最近看一些文章中谷歌趋势截图，大都没有把范围限定在“编程”上。图中可以看出Vue2非常少，所以在下面比较中不再单独统计。 教程数量 这里我选取的主要是

  • Angular Gauge

    我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置 。 下面给出角度计图表的示例。 配置 (Configurations) 现在让我们看一下所采取的其他配置/步骤。 chart.type 将图表类型配置为基于计量。 将类型设置为“规格”。 var chart = { type: 'guage' }; pane 此类型仅适用于极坐标图和角度

  • Angular Gauges

    角度计图表用于绘制仪表/仪表类型图表。 在本节中，我们将讨论不同类型的角度计图表。 Sr.No. 图表类型和描述 1 角度计 角度表。 2 实心仪​​表 实心图表。 3 Clock 时钟。 4 带双轴的仪表 带双轴的仪表图。 5 VU表 VU表图表。

同类工具

angular-cli-ghpagesJ-HIRevelPAMngx-slickgale_webcancanCool-Node

相关阅读

angular-route和angular-ui-router有什么区别？Angular 2 简单类扩展angular的Http类Angular 2 链管Angular ui.bootstrap.pagination分页Angular-Websocket和$ rootScope.apply（）

相关文章

相关问答

Angular 6和karma '无法加载“@angular-devkit/build-angular”，它没有注册'angular-route和Angular-UI-Router有什么区别？Angular hybrid app - angular 2路由器不工作找不到模块“@angular-devkit/build-angular” [重复]错误：在Angular CLI>6.0中，Karma插件现在由“@Angular-devkit/build-Angular”导出

相关文档

Angular Material 中文教程Angular 2 中文教程Angular 4 中文教程Rangle's Angular 2 Training Book 中文版Element Angular 组件帮助中文文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.