Share a random quote

1

Hi guys!
So, I’m having an issue with this and I don’t know why. I’m trying to share a random quote on facebook, but it’s not working. Am I using the correct link?

$(’.share-quote’).on(‘click’, function(event) {
event.preventDefault();
window.open(’’));

2

I’m no expert here, but I think the sharer.php only accepts url links. If it isn’t a valid url link, it gets kicked back. I also think that FB won’t allow you to prewrite the text of the “say something about this…” line. I may be wrong, but that is what I’m seeing. There are ways to share links and images, but not to write the main comment about them. (I think.)

1 Like
3

Twitter is easier.
It’s a little more complicated with FB. You need to have a registered App ID before you can use the sharer.php

Like so:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=xxxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

put this code on where you want the Recommend/Share/Like buttons to appear

<div class="fb-share-button" data-href="YYYYYYYYYYYYYY" data-layout="box_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=YYYYYYYYYYYYYYYYYYYYYYY">Share</a></div>

Replace xxxxxxxxxxxx with your own Facebook App Id.
Replace YYYYYYYYYYY with your page URL

Get your FB App ID from

Personally, I use the method below for dynamic pages populated from a database. But these can also be used for static pages. Just fill in the different meta properties.

First, we setup the page with the open graph tags:

<!-- Open Graph/Facebook -->
<meta property="og:title"     content="put yours here" />
<meta property="og:type"      content="article" />
<meta property="og:url"       content="the page url here" />
<meta property="og:description" content="the page description" />
<meta property="og:image"     content="main photo to use" />
<meta property="og:site_name" content="your site name" />
<meta property="fb:admins"    content="put your admin id here" /> 
<meta property="og:locale"    content="en_US"/>
<meta property="fb:page_id"   content="put your page id here" />

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '99999999999999999999',     // put your app ID here
      xfbml      : true,
      version    : 'v2.9'
    });
    FB.AppEvents.logPageView();
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

then add this code on where you want your FB social icons to appear

<div class="fb-like"
     data-share="true"
     data-width="450"
     data-layout="button_count" 
     data-action="recommend" 
     data-size="small" 
     data-show-faces="false">
</div>

You can customize settings, see/login to facebook developer site for options and explanations.

2 Likes
4

Thanks! I appreciate the assistance.