How do I use my Jquery plugin in the Rails asset pipeline?

Question

My company introduced a way to use social share buttons without providing tracking data to the social sites on page load: jquery.socialshareprivacy .

How can I use it in a Rails 3.2 asset pipeline?

Answer 1

The plugin consists of a JS file and a directory with css and images.

Rails 3.2 comes with jQuery 1.9.x and the jquery.socialshareprivacy.js uses functions, removed in 1.9 ( .live $.browser ), so you have to patch it (get patch at first gist ) Using the asset pipeline requires to use different file paths for the images, so I patched the CSS (see second gist ) and turned it into an SCSS (append .scss to the filename).
I basically turned three url() into image-url() .

I put the JS in vendor/assets/javascripts and the whole CSS+images folder (socialshareprivacy) under vendor/assets/stylesheets

When I place the share buttons on a page (see this documentation ), I set the image urls in the options:

<div id="socialshareprivacy"></div>
<script type="text/javascript">
    $(function(){
        $('#socialshareprivacy').socialSharePrivacy({
            'css_path': '<%= asset_path 'socialshareprivacy/socialshareprivacy.css' %>',
            services: {
                facebook: {dummy_img: '<%= asset_path 'socialshareprivacy/images/dummy_facebook.png' %>'},
                twitter: {dummy_img: '<%= asset_path 'socialshareprivacy/images/dummy_twitter.png' %>'},
                gplus: {dummy_img: '<%= asset_path 'socialshareprivacy/images/dummy_gplus.png' %>'}
            }
        });
    });
</script>

If you need it in several places, consider turning it into a partial.