Lightweight, Responsive, SVG Social sharing Buttons

Varma

Varma

Member
I have been trying to implement a nice lightweight social sharing feature to the Xenforo instead of the default sharing buttons that's slows up the website.

So have found this - Ridiculously Responsive Social Sharing Buttons - http://kurtnoble.com/labs/rrssb/

It's simple, stylish and super flexible to work with and can be customized by tweaking a few variables. In addition SVGs allow for tiny file size and retina support. :)

Now coming to the main part - Implementation

First just need to add two files to your PAGE_CONTAINER
Code: 
<link href='//oss.maxcdn.com/rrssb/1.6.0/css/rrssb.css' rel="stylesheet">
( preferably before the closing head section) and,
Code: 
<script src="//oss.maxcdn.com/rrssb/1.6.0/js/rrssb.min.js"></script>
( preferably just above the closing body tag </body>)

Now create a new template under your style - name it something unique like rrssb_sahring and add this code -
Code: 
<ul class="rrssb-buttons clearfix">
     <li class="facebook">
        <a href="https://www.facebook.com/sharer/sharer.php?u={$url}" class="popup">
            <span class="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="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434
                        c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726
                        c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"/>
                </svg>
            </span>
            <span class="text">facebook</span>
        </a>
    </li>
    <li class="twitter">
        <a href="http://twitter.com/share?text={$thread.title}&url={$url}&via=digitallyhot" class="popup">
            <span class="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="M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32
                    c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155
                    C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965
                    C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683
                    c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851
                    C26.275,7.229,25.39,8.196,24.253,8.756z"/>
                </svg>
            </span>
            <span class="text">twitter</span>
        </a>
    </li>
                        <li class="googleplus">
                        <!-- Replace href with your meta and URL information.  -->
                        <a href="https://plus.google.com/share?url={$url}" class="popup">
                            <span class="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">
                                    <g>
                                        <g>
                                            <path d="M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663
                                                c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027
                                                C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068
                                                c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562
                                                c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41
                                                c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511
                                                c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478
                                                c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492
                                                c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479
                                                c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z"/>
                                            <polygon points="23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004
                                                23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89      "/>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                            <span class="text">google+</span>
                        </a>
                    </li>
</ul>

It adds the default Facebook, Twitter and Google + sharing buttons. Note the {$url} tag in the href of the share links - it will add the current thread url to be shared. So using that you can add any sharing websites link including linked in, pinterest, email or more (more sharing buttons can be found here - https://github.com/kni-labs/rrssb/blob/master/index.html)

Now open up your thread_view template and include this newly created sharing templet to it. I have add this to the top section of the thread just below the title.

Code: 
Find </xen:description>
and add below -
<xen:include template="rrbss_sharing( your template name)">
    <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
    </xen:include>

Done you have now a fully functional responsive sharing button on your site :). You can add more buttons or customize the width or other style by adding the desired styling in your Extra.css.

Ok, so how is it? useful?
 
@JABRONI here is the demo.. (PM me for the live site ;))

lAXoY0Q.jpg
 
Hey @Varma, looks really good there :). Any reason why the google+ is already collapsed?

I'd also submit this as an official resource, would probably get a little more attention that it deserves (y)
 
Russ said:
Hey @Varma, looks really good there :). Any reason why the google+ is already collapsed?

I'd also submit this as an official resource, would probably get a little more attention that it deserves (y)
Click to expand...
It's normal in my site. Well, a little too big honestly. :D

Can we change the position of the button to below, like how xenforo does? Or maybe, replace xenforo share button?
 
Sheratan said:
It's normal in my site. Well, a little too big honestly. :D

Can we change the position of the button to below, like how xenforo does? Or maybe, replace xenforo share button?
Click to expand...

Without testing it you could probably set a max-width on:

.rrssb-buttons
{
max-width: 300px;
}
 
@Russ really thanks for that :)

On G+ actually there are two reason for that-
  • For my website i get most of the social traffic from FB then twitter and then G+, so mostly highlighting the two main ones :) - but of course you can have the full size ( i have added a div around the buttons and defined a width for them to occupy)
  • Next is the responsive side where we can't possibly show all the three in full size. Originally the buttons will collapse and show only the icons on mobile. But i need to show the buttons exactly what they look on desktop. So done that way (here is the screen from my mobile)
XjKJ6zX.jpg


@Sheratan Yup you have to put a div around the whole buttons and set a max-width ;)
 
Varma said:
Just create a normal temple under Styles & Templates -> Templates (your current style) -> Create new temple

And add the above codes ;)
Click to expand...

yes. tried it but too difficult for me......just messed it up and deleted all because it's too complicated. i will find a simpler solution. thanks
 
Echelon said:
yes...learning.....now my system is broken down due to this socalled learning. I'm just a user...no codenerd
Click to expand...
It's just some basic skills that you should need when handling such scripts :).. anyway next time i will try to make this less complicated :)
 
Varma said:
It's just some basic skills that you should need when handling such scripts :).. anyway next time i will try to make this less complicated :)
Click to expand...

damnit....just when i tried to create a new template my whole system cracked down......no i cannot change or translate any phrases anymore because of see visual

damn.webp
 
These social share buttons are overlapping the page numbers. Here's a video of the issue (from one of my site's users) ..

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Anyone experienced this, and/or have a fix?
 
Mouth said:
These social share buttons are overlapping the page numbers. Here's a video of the issue (from one of my site's users) ..

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Anyone experienced this, and/or have a fix?
Click to expand...
Can you share the website where you are using it (message me). It's probably due to some CSS.. will fix it. :)
 
You must log in or register to reply here.

Similar threads

Osman
[XTR] Unlimited Social Sharing Buttons [Paid]
Replies
16
Views
1K
Osman
Osman
Back
Top Bottom