Responsive Social Sharing Buttons

Responsive Social Sharing Buttons 1.5.7

No permission to download
Overview FAQ Updates (16) Reviews (21) History Discussion
Daniel-SP said:
WhatsApp sharing. Yeah, I know that I have already pointed this and you told that it wouldn't be too useful btw, a huge % of my forum access are from mobile and a simple "share" click to open whatsapp and choose the conversation to share is way easier than selecting the title + copying the link. People simple don't do that. Since I have a specific forum market I use to be on 20+ groups full of people promoting texts and links and I can clearly see that if the website has a sharing button, they use it. If it don't have, people prefer to copy texts or just the link.
Click to expand...

I have been using this addon with whatsapp sharing added to it for some time now. If you don't mind editing it in by yourself, do this:

1. Open up file /js/rrssb/rrssb.min.js
replace line:
Code: 
e(this).find(".rrssb-whatsapp a").attr("href","whatsapp://send?text="+i.url+(i.title!==r?"&text="+i.title:""))
(I guess that's a leftover from @SimonV 's testing)
with:
Code: 
e(this).find(".rrssb-whatsapp a").attr("href","whatsapp://send?text="+(i.title!==r?""+i.title:"")+"%20"+i.url)

2. Edit template SV_rrssbShares

Add following to where you want the button to appear (lon mine I have it after END TWITTER line, so it appears after twitter icon)
Code: 
<!-- START whatsapp button --><li class="rrssb-whatsapp">
<a href="whatsapp://send?text=1sharerrssbtitle1&amp;url=1sharerrssburl1">
<span class="rrssb-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<path d="M13.693,1C6.991,1,1.557,6.433,1.557,13.138c0,2.292,0.637,4.436,1.742,6.267l-2.189,6.512l6.72-2.152  c1.737,0.961,3.735,1.508,5.864,1.508c6.701,0,12.132-5.429,12.132-12.134C25.825,6.436,20.395,1,13.693,1z M13.693,23.238  c-2.053,0-3.964-0.616-5.557-1.671l-3.883,1.245l1.263-3.751c-1.212-1.668-1.925-3.714-1.925-5.924  c0-5.57,4.531-10.103,10.103-10.103c5.572,0,10.104,4.53,10.104,10.103C23.799,18.711,19.263,23.238,13.693,23.238z  M19.384,15.894c-0.308-0.166-1.801-0.972-2.08-1.087c-0.282-0.111-0.486-0.172-0.703,0.129c-0.218,0.301-0.839,0.979-1.028,1.181  c-0.187,0.198-0.369,0.219-0.673,0.05c-0.303-0.169-1.29-0.531-2.435-1.632c-0.89-0.854-1.473-1.892-1.642-2.21  c-0.167-0.317,0-0.478,0.162-0.625c0.144-0.134,0.321-0.352,0.484-0.526c0.161-0.178,0.22-0.302,0.329-0.505  c0.111-0.204,0.069-0.385-0.003-0.545c-0.076-0.155-0.638-1.704-0.872-2.333c-0.235-0.63-0.498-0.537-0.678-0.543  S9.859,7.205,9.652,7.2C9.447,7.191,9.109,7.253,8.814,7.554C8.52,7.855,7.688,8.571,7.633,10.096  c-0.057,1.524,0.996,3.042,1.145,3.252c0.148,0.213,2.012,3.514,5.115,4.876c3.101,1.359,3.118,0.941,3.688,0.914  c0.568-0.031,1.862-0.681,2.145-1.394c0.287-0.714,0.311-1.333,0.238-1.466C19.891,16.146,19.688,16.063,19.384,15.894z"/>
</svg>
</span>
<span class="rrssb-text">whatsapp</span>
</a>
</li><!-- END whatsapp button -->

3. And last step: add following to SV_rrssbDefault.css (or extra.css)
Code: 
.rrssb-buttons li.rrssb-whatsapp a {
background-color: #5ED944;
}
.rrssb-buttons li.rrssb-whatsapp a:hover {
background-color: #39B51F;
}

Install addon Browser Detection (Mobile/MSIE)
and use this code instead in SV_rrssbShares
Code: 
<xen:if is="{$visitor.getBrowser.isMobile}">
<!-- START whatsapp button --><li class="rrssb-whatsapp">
<a href="whatsapp://send?text=1sharerrssbtitle1&amp;url=1sharerrssburl1">
<span class="rrssb-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<path d="M13.693,1C6.991,1,1.557,6.433,1.557,13.138c0,2.292,0.637,4.436,1.742,6.267l-2.189,6.512l6.72-2.152  c1.737,0.961,3.735,1.508,5.864,1.508c6.701,0,12.132-5.429,12.132-12.134C25.825,6.436,20.395,1,13.693,1z M13.693,23.238  c-2.053,0-3.964-0.616-5.557-1.671l-3.883,1.245l1.263-3.751c-1.212-1.668-1.925-3.714-1.925-5.924  c0-5.57,4.531-10.103,10.103-10.103c5.572,0,10.104,4.53,10.104,10.103C23.799,18.711,19.263,23.238,13.693,23.238z  M19.384,15.894c-0.308-0.166-1.801-0.972-2.08-1.087c-0.282-0.111-0.486-0.172-0.703,0.129c-0.218,0.301-0.839,0.979-1.028,1.181  c-0.187,0.198-0.369,0.219-0.673,0.05c-0.303-0.169-1.29-0.531-2.435-1.632c-0.89-0.854-1.473-1.892-1.642-2.21  c-0.167-0.317,0-0.478,0.162-0.625c0.144-0.134,0.321-0.352,0.484-0.526c0.161-0.178,0.22-0.302,0.329-0.505  c0.111-0.204,0.069-0.385-0.003-0.545c-0.076-0.155-0.638-1.704-0.872-2.333c-0.235-0.63-0.498-0.537-0.678-0.543  S9.859,7.205,9.652,7.2C9.447,7.191,9.109,7.253,8.814,7.554C8.52,7.855,7.688,8.571,7.633,10.096  c-0.057,1.524,0.996,3.042,1.145,3.252c0.148,0.213,2.012,3.514,5.115,4.876c3.101,1.359,3.118,0.941,3.688,0.914  c0.568-0.031,1.862-0.681,2.145-1.394c0.287-0.714,0.311-1.333,0.238-1.466C19.891,16.146,19.688,16.063,19.384,15.894z"/>
</svg>
</span>
<span class="rrssb-text">whatsapp</span>
</a>
</li>
</xen:if>
<!-- END whatsapp button -->


If possible, I would recommending testing it out at test environment first. Not much of a coder myself, so there might be some issues, so far it has been working fine at my site.

End result should be something like this:
Clipboard01.webp
 
TMC said:
I have been using this addon with whatsapp sharing added to it for some time now. If you don't mind editing it in by yourself, do this:

1. Open up file /js/rrssb/rrssb.min.js
replace line:
Code: 
e(this).find(".rrssb-whatsapp a").attr("href","whatsapp://send?text="+i.url+(i.title!==r?"&text="+i.title:""))
(I guess that's a leftover from @SimonV 's testing)
with:
Code: 
e(this).find(".rrssb-whatsapp a").attr("href","whatsapp://send?text="+(i.title!==r?""+i.title:"")+"%20"+i.url)

2. Edit template SV_rrssbShares

Add following to where you want the button to appear (lon mine I have it after END TWITTER line, so it appears after twitter icon)
Code: 
<!-- START whatsapp button --><li class="rrssb-whatsapp">
<a href="whatsapp://send?text=1sharerrssbtitle1&amp;url=1sharerrssburl1">
<span class="rrssb-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<path d="M13.693,1C6.991,1,1.557,6.433,1.557,13.138c0,2.292,0.637,4.436,1.742,6.267l-2.189,6.512l6.72-2.152  c1.737,0.961,3.735,1.508,5.864,1.508c6.701,0,12.132-5.429,12.132-12.134C25.825,6.436,20.395,1,13.693,1z M13.693,23.238  c-2.053,0-3.964-0.616-5.557-1.671l-3.883,1.245l1.263-3.751c-1.212-1.668-1.925-3.714-1.925-5.924  c0-5.57,4.531-10.103,10.103-10.103c5.572,0,10.104,4.53,10.104,10.103C23.799,18.711,19.263,23.238,13.693,23.238z  M19.384,15.894c-0.308-0.166-1.801-0.972-2.08-1.087c-0.282-0.111-0.486-0.172-0.703,0.129c-0.218,0.301-0.839,0.979-1.028,1.181  c-0.187,0.198-0.369,0.219-0.673,0.05c-0.303-0.169-1.29-0.531-2.435-1.632c-0.89-0.854-1.473-1.892-1.642-2.21  c-0.167-0.317,0-0.478,0.162-0.625c0.144-0.134,0.321-0.352,0.484-0.526c0.161-0.178,0.22-0.302,0.329-0.505  c0.111-0.204,0.069-0.385-0.003-0.545c-0.076-0.155-0.638-1.704-0.872-2.333c-0.235-0.63-0.498-0.537-0.678-0.543  S9.859,7.205,9.652,7.2C9.447,7.191,9.109,7.253,8.814,7.554C8.52,7.855,7.688,8.571,7.633,10.096  c-0.057,1.524,0.996,3.042,1.145,3.252c0.148,0.213,2.012,3.514,5.115,4.876c3.101,1.359,3.118,0.941,3.688,0.914  c0.568-0.031,1.862-0.681,2.145-1.394c0.287-0.714,0.311-1.333,0.238-1.466C19.891,16.146,19.688,16.063,19.384,15.894z"/>
</svg>
</span>
<span class="rrssb-text">whatsapp</span>
</a>
</li><!-- END whatsapp button -->

3. And last step: add following to SV_rrssbDefault.css (or extra.css)
Code: 
.rrssb-buttons li.rrssb-whatsapp a {
background-color: #5ED944;
}
.rrssb-buttons li.rrssb-whatsapp a:hover {
background-color: #39B51F;
}

Install addon Browser Detection (Mobile/MSIE)
and use this code instead in SV_rrssbShares
Code: 
<xen:if is="{$visitor.getBrowser.isMobile}">
<!-- START whatsapp button --><li class="rrssb-whatsapp">
<a href="whatsapp://send?text=1sharerrssbtitle1&amp;url=1sharerrssburl1">
<span class="rrssb-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<path d="M13.693,1C6.991,1,1.557,6.433,1.557,13.138c0,2.292,0.637,4.436,1.742,6.267l-2.189,6.512l6.72-2.152  c1.737,0.961,3.735,1.508,5.864,1.508c6.701,0,12.132-5.429,12.132-12.134C25.825,6.436,20.395,1,13.693,1z M13.693,23.238  c-2.053,0-3.964-0.616-5.557-1.671l-3.883,1.245l1.263-3.751c-1.212-1.668-1.925-3.714-1.925-5.924  c0-5.57,4.531-10.103,10.103-10.103c5.572,0,10.104,4.53,10.104,10.103C23.799,18.711,19.263,23.238,13.693,23.238z  M19.384,15.894c-0.308-0.166-1.801-0.972-2.08-1.087c-0.282-0.111-0.486-0.172-0.703,0.129c-0.218,0.301-0.839,0.979-1.028,1.181  c-0.187,0.198-0.369,0.219-0.673,0.05c-0.303-0.169-1.29-0.531-2.435-1.632c-0.89-0.854-1.473-1.892-1.642-2.21  c-0.167-0.317,0-0.478,0.162-0.625c0.144-0.134,0.321-0.352,0.484-0.526c0.161-0.178,0.22-0.302,0.329-0.505  c0.111-0.204,0.069-0.385-0.003-0.545c-0.076-0.155-0.638-1.704-0.872-2.333c-0.235-0.63-0.498-0.537-0.678-0.543  S9.859,7.205,9.652,7.2C9.447,7.191,9.109,7.253,8.814,7.554C8.52,7.855,7.688,8.571,7.633,10.096  c-0.057,1.524,0.996,3.042,1.145,3.252c0.148,0.213,2.012,3.514,5.115,4.876c3.101,1.359,3.118,0.941,3.688,0.914  c0.568-0.031,1.862-0.681,2.145-1.394c0.287-0.714,0.311-1.333,0.238-1.466C19.891,16.146,19.688,16.063,19.384,15.894z"/>
</svg>
</span>
<span class="rrssb-text">whatsapp</span>
</a>
</li>
</xen:if>
<!-- END whatsapp button -->


If possible, I would recommending testing it out at test environment first. Not much of a coder myself, so there might be some issues, so far it has been working fine at my site.

End result should be something like this:
View attachment 112314
Click to expand...
Oh man.. this is awesome.

I will try for sure ! Thanks
 
Am I the only one who keeps getting 'rrssb() is not a function' JS error on forum view? I'm assuming because there's no 'share this page' block on that page (after looking through the error message).

EDIT: Never mind, added:
Code: 
if ($('.share-container').length) { ...originalcode... }
on 'SV_rrssb_jsOptions' template.
 
Last edited:
I read a review that suggested that the copyright branding is pretty big. Can anyone comment on this. Is the branding a link to certforums and larger than the norm?

@SimonV
How much for branding removal? :)
 
Last edited:
@vij I don't think it can be said big, in my opinion. At best, it's as long as XenForo's copyright itself. Both font size and everything else matches XenForo's copyright as well. So it's pretty seamless. You can check my board. But I guess it does some callback or something to certforums, because sometimes the copyright won't appear (strangely, Waindigo's copyright also behaves this way on my board).

Also, the Overview page says:
Branding Removal

Branding removal is available for $20 via PayPal HERE and is for ONE forum only.

Once you have completed the branding removal purchase please start a conversation with me for the removal instructions and please include your Full Name, Forum URL and PayPal payment Confirmation Number (check your Paypal receipt email for this number)
Click to expand...
 
BobbyWibowo said:
@vij I don't think it can be said big, in my opinion. At best, it's as long as XenForo's copyright itself. Both font size and everything else matches XenForo's copyright as well. So it's pretty seamless. You can check my board. But I guess it does some callback or something to certforums, because sometimes the copyright won't appear (strangely, Waindigo's copyright also behaves this way on my board).

Also, the Overview page says:
Click to expand...

You have CSS hiding the copyright for this addon.

This css:
Code: 
.footerLegal > .pageWidth > .pageContent > div:nth-child(2) {
  display: none;
}
 
SimonV said:
You have CSS hiding the copyright for this addon.

This css:
Code: 
.footerLegal > .pageWidth > .pageContent > div:nth-child(2) {
  display: none;
}
Click to expand...
But Google can see the link and interpret it as hidden link maybe.... ? Or can it. Hv to check.
But thank you for pointing that :)
 
@SimonV Ehh, what? really!? ... Must be something that I overlook when I was manually porting our old Antiquark to the new one. Before, UI.X-based style didn't use an add-on. And the style structuring changed a lot as well. So yeah, I kinda simply copied things from the old EXTRA.css template to the new one. Back then, I kinda manually rewrote the copyright on footer template because it wasn't being applied correctly to my style's footer. And I didn't gave it much thoughts and all that.. bla bla bla. Oh well, I'll take a look at it soon.
 
I've enabled rrssb Share Buttons Top with Facebook, Twitter, G+, Tumblr, Pinterest and Email buttons activated.
Maximum width is 180px.

Everything works fine. However there is one little issue. During page load first six big buttons are shown, each of them approximately 100px x 25px.
Then they are rendered to their final size (180 max width). Because of this effect my page content jumps on every page load.
Can I only show the buttons when they have reached their final size, @SimonV ?
 
rhodes said:
I've enabled rrssb Share Buttons Top with Facebook, Twitter, G+, Tumblr, Pinterest and Email buttons activated.
Maximum width is 180px.

Everything works fine. However there is one little issue. During page load first six big buttons are shown, each of them approximately 100px x 25px.
Then they are rendered to their final size (180 max width). Because of this effect my page content jumps on every page load.
Can I only show the buttons when they have reached their final size, @SimonV ?
Click to expand...

Whats the URL of your site so I can see it happening.

Also does this post help? it sets the buttons to a fixed width. : Responsive Social Sharing Buttons
 
Am I doind something wrong ? When I try to share by email, the mail message open for me with the following text:

1sharerrssbtitle1 - 1sharerrssburl1
 
Daniel-SP said:
Am I doind something wrong ? When I try to share by email, the mail message open for me with the following text:

1sharerrssbtitle1 - 1sharerrssburl1
Click to expand...

That would mean the JS is failing, send me the URL for your site and I will see if I can track the cause.
 
You must log in or register to reply here.

Similar threads

A
New post & reply buttons in threads
Replies
0
Views
540
avalanch
A
JoyFreak
[JoyFreak] Open Graph Image
2 3
Replies
43
Views
3K
benFF
benFF
N
Auto OpenGraph for threads
Replies
17
Views
2K
Nicolas FR
N
XenConcept
[XenConcept] Pre-watched forum users [Paid]
Replies
2
Views
209
XenConcept
XenConcept
Ozzy47
[OzzModz] Thread Linked Data Image Remove
Replies
2
Views
167
Ozzy47
Ozzy47
Top Bottom