• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Aly-ve/Mastodon-share-button: Add autotically a button to share content with you ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

Aly-ve/Mastodon-share-button

开源软件地址(OpenSource Url):

https://github.com/Aly-ve/Mastodon-share-button

开源编程语言(OpenSource Language):

HTML 95.1%

开源软件介绍(OpenSource Introduction):

Mastodon share button

➡️ For a demo, click here.

As the same way than Facebook or Twitter, this "plugin" allows developers to append a button to share content to Mastodon.

You just need to append mastodon.js at the end of your <body>.

Create the elements

To create elements in page's DOM, you have to create a div with mastodon-share-button as a class.

For example:

<div 
  class="mastodon-share-button"
  data-target="https://framapiaf.org"
  data-name="Framapiaf"
  data-buttonstyle="btn btn-secondary"
  data-text="Share on Mastodon"
></div>

Some explanations

  • data-target: this is the URL which will be shared on Mastodon
  • data-name: Text to introduce the URL in your toot
  • data-buttonstyle: buttonstyle is the class which is added to the button as a DOM property
  • data-text: (Optional) Override default text for the button. If data-text does not exist, the default "Toot" button will be displayed.

Adapt Mastodon Share Button to your design

To open a homogenious modal, get the instance's address field [etc], you need to put a variable with your preferences. This variable contains callback to open and close modal and/or dialog, the id of the button to share and close modal.

Integration

Bootstrap or your own modal

In the example, addressFieldSelector is automatically autofocused. In the case of you are using Bootstrap with jQuery (like mine), you must add an event like below.

var msbConfig = {
  openModal: function () {
    $('#exampleModal').modal('show');
  },
  closeModal: function () {
    $('#exampleModal').modal('hide');
  },
  addressFieldSelector: '#mbs-address',
  buttonModalSelector: '#modalShareButton',
  memorizeFieldId: 'msb-memorize-instance',
  buttonDisplayText: false, 
  buttonIconHtml: '<i class="fa fa-mastodon" aria-hidden="true"></i>'

};

$('#exampleModal').on('shown.bs.modal', function() {
  $('#msb-address').focus();
}); 

Alertify.js

First of all, you have to write your own confirm's content yourself

<div id="mastodon-share-button">
    <div class="form-group">
        <label for="msb-address">Enter your instance's address </label>
        <input type="text" class="form-control" id="msb-address" placeholder="https://framapiaf.org">
    </div>
    <div class="form-check">
        <input type="checkbox" class="form-check-input" id="msb-memorize-instance">
        <label class="form-check-label" for="msb-memorize-instance">Memorize my instance</label>
    </div>
</div>
var msbConfig = {
    openModal: function (name, target) {
        alertify.confirm('Share on Mastodon', document.querySelector('#mastodon-share-button'), () => msbOnShare(name, target), function())
    },
    addressFieldSelector: '.ajs-body input#msb-address',
    buttonModalSelector: '.ajs-button ajs-ok',
    memorizeFieldId: 'msb-memorize-instance',
    buttonIconHtml: '<i class="fa fa-mastodon" aria-hidden="true"></i>'
};

Explainations

  • openModal: callback to open the modal when the user isn't running Firefox
  • closeModal: callback to close the modal
  • addressFieldSelector: The selector (.selector or #selector for example) of the model's input to complete the instance's link
  • buttonModalSelector: Select the modal to open the new window and share your toot on Mastodon
  • memorizeFieldId: It's the id of the checkbox to create a cookie and save the instance on user's browser
  • buttonDisplayText: (optional) By default, a text is displayed. If you put buttonDisplayText to false, only your icon (if setted) will be displayed.
  • buttonIconHtml: Contains HTML tags to append an icon (like Fork-Awesome's Mastodon icon)

Too see an concrete example, please see the Github Pages at the root of this repository.

And it creates all elements by itself.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap