• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Lightweight, Responsive, SVG Social sharing Buttons

#1
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?
 

Russ

Well-known member
#5
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)
 

Sheratan

Well-known member
#6
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)
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?
 

Russ

Well-known member
#7
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?
Without testing it you could probably set a max-width on:

.rrssb-buttons
{
max-width: 300px;
}
 
#8
@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)


@Sheratan Yup you have to put a div around the whole buttons and set a max-width ;)
 

Echelon

Active member
#12
Just create a normal temple under Styles & Templates -> Templates (your current style) -> Create new temple

And add the above codes ;)
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

Active member
#17
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 :)
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.png
 

Mouth

Well-known member
#18
These social share buttons are overlapping the page numbers. Here's a video of the issue (from one of my site's users) ..


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


Anyone experienced this, and/or have a fix?
Can you share the website where you are using it (message me). It's probably due to some CSS.. will fix it. :)