Giter Club home page Giter Club logo

kirby-sharingbuttons's Introduction

Kirby Sharingbuttons

Version Kirby

With this plugin for Kirby 2 you can easily include the sharingbuttons by @mxstbr.

Super fast and easy Social Media Sharing Buttons. No JavaScript. No tracking.

Requirements

  • Kirby CMS, Version 2.3+

Installation

Kirby CLI

If you are using the Kirby CLI, you can install this plugin by running the following command in your shell from the root folder of your Kirby installation:

kirby plugin:install flokosiol/kirby-sharingbuttons

Download

Of course you can also download and unpack the zip file (or simply clone the repository). If necessary, rename the folder to sharingbuttons and put it into site/plugins of your Kirby installation.

Please make sure, that the plugin folder structure looks like this:

site/plugins/sharingbuttons/

Git Submodule

If you want to add this plugin as a Git submodule.

$ cd your/project/root
$ git submodule add https://github.com/flokosiol/kirby-sharingbuttons.git site/plugins/sharingbuttons

Usage

1. Include CSS

Add the path to the default css together with your existing stylesheets to your html head section.

<?= css('assets/plugins/sharingbuttons/css/sharingbuttons.css'); ?>

2. Template

Simply use the sharingbuttons() method in your template like this:

<?= page()->sharingbuttons(); ?>

Customization

1. CSS

You can easily adjust the css by copying the original file from site/plugins/sharingbuttons/assets/css/sharingbuttons.css to assets/plugins/sharingbuttons/css/sharingbuttons.css. Kirby will then use your file instead of the one included in the plugin directory.

Of course you can also include the file to your build process. I guess you know how to do this properly โ€ฆ

CSS font-size

The buttons are sized using em units, so the only step to change the size of the buttons is to set the font-size property of the .resp-sharing-button class. Seriously, that's it!

2. Configuration

You can change the default appearance in your config.php file, e.g. site/config/config.php.

<?php
  // define the size (small, medium, large)
  c::set('plugin.sharingbuttons.size', 'small');

  // define the style (normal, solid, circle, solidcircle)
  c::set('plugin.sharingbuttons.style', 'solid');

  // define the url field
  c::set('plugin.sharingbuttons.urlField', 'url');

  // define the description field
  c::set('plugin.sharingbuttons.descriptionField', 'title');

  // define the networks, their title and the order of the buttons
  c::set('plugin.sharingbuttons.networks', array(
    'twitter'     => 'Twitter',
    'facebook'    => 'Facebook',
    'google'      => 'Google+',
    'linkedin'    => 'LinkedIn',
    'email'       => 'E-Mail',
    // 'tumblr'      => 'Tumblr',
    // 'pinterest'   => 'Pinterest',
    // 'reddit'      => 'Reddit',
    // 'xing'        => 'XING',
    // 'whatsapp'    => 'WhatsApp',
    // 'hackernews'  => 'Hacker News',
    // 'vk'          => 'VK',
    // 'telegram'    => 'Telegram',
  ));
?>

Override your own config

In case you need different styles, URLs, or descriptions for different templates, you can override your own settings by adding params to the page method like this.

<?= page()->sharingbuttons([
    'size' => 'medium',
    'style' => 'circle',
    'urlField' => 'shareURL',
    'descriptionField' => 'shareMessage',
    'url' => 'https://getkirby.com',
    'description' => 'Check this out.',
    'networks' => ['facebook' => 'Facebook','twitter' => 'Twitter']
    ]) ?>

The parameter url, if provided, takes precedence over urlField.

The parameter description, if provided, takes precedence over descriptionField.

3. Translations

You can find some translations in site/plugins/sharingbuttons/languages/. You need to copy them to site/languages/.

<?php
  l::set('plugin.sharingbuttons.facebook', 'Auf Facebook teilen');
  l::set('plugin.sharingbuttons.twitter', 'Auf Twitter teilen');
  l::set('plugin.sharingbuttons.google', 'Auf Google+ teilen');
  l::set('plugin.sharingbuttons.tumblr', 'Auf Tumblr teilen');
  l::set('plugin.sharingbuttons.email', 'Per E-Mail teilen');
  l::set('plugin.sharingbuttons.pinterest', 'Auf Pinterest teilen');
  l::set('plugin.sharingbuttons.linkedin', 'Auf LinkedIn teilen');
  l::set('plugin.sharingbuttons.reddit', 'Auf Reddit teilen');
  l::set('plugin.sharingbuttons.xing', 'Auf XING teilen');
  l::set('plugin.sharingbuttons.whatsapp', 'Per WhatsApp teilen');
  l::set('plugin.sharingbuttons.hackernews', 'Auf Hacker News teilen');
  l::set('plugin.sharingbuttons.vk', 'Auf VK teilen');
  l::set('plugin.sharingbuttons.telegram', 'Auf Telegram teilen');
?>

Credits

kirby-sharingbuttons's People

Contributors

flokosiol avatar malvese avatar neildaniels avatar thiousi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kirby-sharingbuttons's Issues

This is awesome!

Can we maybe integrate PHP output back into the http://sharingbuttons.io website? So you could choose between HTML and PHP output, which might be usable in Kirby and Wordpress and many more?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.