Sharrre
Sharrre copied to clipboard
Multi sharrre buttons without repeating using the same JS code
First off, thank you very much for creating the cool pulgin!
I was working on a web page that has many blog posts and each post will have the FB, Twitter, and G+ sharrre buttons. I could get them work no problem, but is there a way to just do not repeat the similar JS code for each post? For example, in example 6, it uses id to target the sharrre buttons, I don't want to create the very similar JS code with different ids each time.
Is there a better solution?
Replace $('#twitter').sharrre() by $('.twitter').sharrre() and in HTML :
:)
Thx Julienh, I made it work last night by using the following:
<div id="twitter_1" class="twitter" data-url="" data-text=""></div>
<div id="twitter_2" class="twitter" data-url="" data-text=""></div>
<div id="twitter_3" class="twitter" data-url="" data-text=""></div>
...
Then attach sharrre to each share button
$('.twitter').each(function(){
var a = $(this).attr('id');
var e_id = parseInt(a.split("_")[1]);
$('#' + a).sharrre({
share: {
twitter: true
},
template: 'template html goes here',
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('twitter');
}
});
});
Your version seems easier and I'll try them out.
An example : http://jsfiddle.net/JulienH/3Xamb/ :)
Yes, it works, just tested. No need to apply each() for twitter and facebook button.
thanks for this! i used this to share links on a page in a grid for a store.
$('.linktoitem').append('<div class="sharebox"></div>');
$('.sharebox').each(function(){
var self = this;
$link = $(this).closest('.linktoitem').attr('href');
$(this).sharrre({
share: {
facebook: true,
pinterest: true
},
url: $link
Thanks guys! I got this working on my wordpress blog as well, documented the whole thing here: Custom Social Media Buttons for Wordpress!