1. 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

Discussion in 'Resource and Add-on Discussions' started by Varma, Jul 14, 2014.

  1. 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?
     
    WoodiE, sami simo, Russ and 1 other person like this.
  2. Mike Creuzer

    Mike Creuzer Well-Known Member

    Nice resource. Quite useful.
     
    Varma likes this.
  3. JABRONI

    JABRONI Well-Known Member

    demo on xf site?
     
  4. Varma

    Varma Member

    @JABRONI here is the demo.. (PM me for the live site ;))

    [​IMG]
     
  5. Russ

    Russ Well-Known Member

    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)
     
  6. Sheratan

    Sheratan Well-Known Member

    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?
     
  7. Russ

    Russ Well-Known Member

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

    .rrssb-buttons
    {
    max-width: 300px;
    }
     
    Varma likes this.
  8. Varma

    Varma Member

    @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)
    [​IMG]

    @Sheratan Yup you have to put a div around the whole buttons and set a max-width ;)
     
    Russ likes this.
  9. Enguerran A

    Enguerran A Well-Known Member

    Damn it looks great, thanks !
     
    Varma likes this.
  10. Echelon

    Echelon Active Member

    what kind of new template do i have to create?
     
  11. Varma

    Varma Member

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

    And add the above codes ;)
     
    Echelon likes this.
  12. Echelon

    Echelon Active Member

    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
     
  13. Varma

    Varma Member

    It's not that difficult :) do it by learning.. :)
     
    Echelon likes this.
  14. Echelon

    Echelon Active Member

    yes...learning.....now my system is broken down due to this socalled learning. I'm just a user...no codenerd
     
  15. Varma

    Varma Member

    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 :)
     
    Echelon likes this.
  16. Echelon

    Echelon Active Member

    thanks
     
  17. Echelon

    Echelon Active Member

    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
     
  18. Mouth

    Mouth Well-Known Member

    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. Varma

    Varma Member

    Can you share the website where you are using it (message me). It's probably due to some CSS.. will fix it. :)
     
  20. SimonV

    SimonV Well-Known Member

    Last edited: Jan 15, 2015
    RoldanLT and Varma like this.

Share This Page