setkyar/laravel-customize-shares

Customize social sharing icons & design.

1.0 2016-11-23 09:57 UTC

This package is auto-updated.

Last update: 2024-04-11 15:35:18 UTC


README

Customize your social sharing icons easily. By Default, Package already include Facebook, Google+, LinkedIn, Twitter. But you can add more easily.

Install

Pull package through Composer. Run

composer require setkyar/laravel-customize-shares

Add service provider within config/app.php

'providers' => [
   SetKyar\CustomShares\CustomSharesProvider::class,
];

Run the following command for configuration

php artisan vendor:publish --provider="SetKyar\CustomShares\CustomSharesProvider" --tag="config"

Run the following command for views

php artisan vendor:publish --provider="SetKyar\CustomShares\CustomSharesProvider" --tag="views"

Usage

To customize your social icons add image with img tag. Customize like the following in config/shares-config.php

'facebook'	=> '<img src="your_custom_fb_icon_url" alt="Share to Faebook">'

or add social icon class like the following

'facebook'	=> '<i class="fa fa-facebook-official"></i>'

You can add one by one social share and can use collection as well.

One by one example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	@include('share::facebook')
    <br>
    @include('share::twitter')
    <br>
    @include('share::gplus')
    <br>
    @include('share::linkedin')
</body>
</html>

Collection example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	@include('share::social_collection')
</body>
</html>

Add new social

By default, Package already include Facebook, Google+, LinkedIn, Twitter. If you want to add more social media, add new on resources/views/vendor/customize-share . You can learn easily by checking other social media. If you want to add default value on config, you can add on config/shares-config.php

Popup (Small new window)

By default, if user click on share. The share link will open in new full window. But if you want to made small new window like the following image

Demo

You have to add the following JavaScript code

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>

    var popupSize = {
        width: 780,
        height: 550
    };

    $(document).on('click', '.your-class > a', function(e){

        var
            verticalPos = Math.floor(($(window).width() - popupSize.width) / 2),
            horisontalPos = Math.floor(($(window).height() - popupSize.height) / 2);

        var popup = window.open($(this).prop('href'), 'social',
            'width='+popupSize.width+',height='+popupSize.height+
            ',left='+verticalPos+',top='+horisontalPos+
            ',location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1');

        if (popup) {
            popup.focus();
            e.preventDefault();
        }

    });
</script>

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Security

If you discover any security related issues, please email setkyar16@gmail.com com instead of using the issue tracker.

Credits