Wallogit.com
2017 © Pedro Peláez
Customize social sharing icons & design.
Customize your social sharing icons easily. By Default, Package already include Facebook, Google+, LinkedIn, Twitter. But you can add more easily., (*1)
Pull package through Composer. Run, (*2)
composer require setkyar/laravel-customize-shares
Add service provider within config/app.php, (*3)
'providers' => [ SetKyar\CustomShares\CustomSharesProvider::class, ];
Run the following command for configuration, (*4)
php artisan vendor:publish --provider="SetKyar\CustomShares\CustomSharesProvider" --tag="config"
Run the following command for views, (*5)
php artisan vendor:publish --provider="SetKyar\CustomShares\CustomSharesProvider" --tag="views"
To customize your social icons add image with img tag. Customize like the following in config/shares-config.php, (*6)
'facebook' => '<img src="your_custom_fb_icon_url" alt="Share to Faebook">'
or add social icon class like the following, (*7)
'facebook' => '<i class="fa fa-facebook-official"></i>'
You can add one by one social share and can use collection as well., (*8)
<!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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
@include('share::social_collection')
</body>
</html>
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, (*9)
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, (*10)
, (*11)
You have to add the following JavaScript code, (*12)
<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>
If you discover any security related issues, please email setkyar16@gmail.com com instead of using the issue tracker., (*13)
Customize social sharing icons & design.
MIT
customize setkyar customshare
Customize social sharing icons & design.
MIT
customize setkyar customshare