facebook share with customization...almost working, how do I {{ request.build_absolute_uri }}(->this shows url I'm in) with javascript?

I'm trying to customize facebook share. I'm using this fantastic app;https://github.com/kni-labs/rrssb to do this. I tried meta tags facebook provide, and it's not working for me. but with java-script, it kinda works.

<ul class="rrssb-buttons clearfix">

  <li class="rrssb-facebook">

<a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}" class="popup">facebook-share</a>
</li>
</ul>


<script type="text/javascript">

jQuery(document).ready(function ($) {

  $('.rrssb-buttons').rrssb({
    // required:
    title: 'email',
    url: 'http://www.reddit.com/',

  });
});
</script>

this shows the picture of reddit, description of reddit, etc.. so I thought I should put the domain user is trying to share in url instead of reddit url. I googled around, and I saw how some people post images and description in url...so my question is how do I put the url user is trying to share in the url? how do I put image there?

Answers 1

  • You can use window.location.href as URL to use current page's URL. To specify image you just need to add image key when initializing rrssb. As if you see source code of rrssb.js you will see what parameters it supports when initializing. Which are

    // Settings that $.rrssb() will accept.
    var settings = $.extend({
        description: undefined,
        emailAddress: undefined,
        emailBody: undefined,
        emailSubject: undefined,
        image: undefined,
        title: undefined,
        url: undefined
    }, options );
    

    So your code will change to

    jQuery(document).ready(function ($) {
      $('.rrssb-buttons').rrssb({
        title: 'email',
        url: window.location.href,
        image: your_image_url
      });
    });
    

    Edit (Only URL is being used not image):

    I don't think that you can use image for facebook or twitter. As if you see source code of rrssb.js you will see that only URL is shared to facebook. URL and description are shared to twitter. So some of the settings are shared to some of the social sites.

    Also in the readme.md of the rrssb.js if you see facebook sharing example

    <li class="rrssb-facebook">
        <!--  Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
        <a href="https://www.facebook.com/sharer/sharer.php?u=http://kurtnoble.com/labs/rrssb/index.html" class="popup">
          <span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"/></svg></span>
          <span class="rrssb-text">facebook</span>
        </a>
      </li>
    

    in the comment you can see stated that

    For best results, make sure you page has the proper FB Open Graph tags in header

    Which means, facebook will pick image information from FB Open Graph meta tags of the header section of the page.


Related Articles