Random Quote Generator Tumblr and Facebook Buttons

Random Quote Generator Tumblr and Facebook Buttons
0

#1

Hi everybody!

I’ve worked very hard on the Random Quote Generator but I’m struggling with two aspects. I’ve gone above and beyond and added a Facebook share button as well. My Twitter button works but I cannot figure out how to make the buttons for Facebook and Tumblr include the text when I’m trying to share. If you could, would somebody please recommend an environment where I could learn how to do these things? I can find links that embed Facebook posts into my page but nothing to push posts onto Facebook or Tumblr.

If needed, here is the link to my GitHub where I have been doing this work: https://github.com/chriswolfdesign/FreeCodeCamp/tree/master/master/FrontEndDevelopmentCertification/Project3_RandomQuoteMachine

thanks everybody!


#2

You’ll want to look for something like “tumblr share api”. That took me to this page which describes how to set the title and body of your Tumblr post by setting data-title and data-content on your button, respectively.

Facebook is quite a bit different. A similar search takes me to this page. The prevailing paradigm in Facebook is to share an entire page rather than just some text, so instead of changing the button’s properties to send your quote, you’ll want to configure your site to look good when shared. When you share a page on Facebook, their server sends a request to your page and then looks at some values in your header. Here’s the example from the page I linked to:

<head>
  <title>Your Website Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>

Configuring these values will determine what the Facebook share looks like. Creating a post on the user’s behalf would require using OAuth, and I’d advise you wait until you’re doing backend programming to even think about that. You can hack your way to success by manipulating the above <meta> tag properties in JavaScript - update the url to include the current quote and author as query parameters. The challenge here is to then parse the query parameters as your page loads, either loading the parameters as your quote data or fetching a new quote if they don’t exist.


#3

Thank you for your reply!

I’ve decided to remove the Facebook button for now and come back to it later.

I’m trying to do what you recommended with the Tumblr button. I’ve decide to make my own button but whenever I type in the URL that they recommend it tells me that the page doesn’t exist. Is this supposed to be happening or am I doing something wrong?


#4

There is a reason the Facebook button aren’t on the demo (Facebook not allowing anonymous, means you need to get a pirate key for your site/app to talk to their API, which is wrong to be post on Codepen).

For Twitter and Tumble, I found out it’s not fitted to just use their quick drop in button, and I don’t remember the reasons. Maybe the inability of styling the buttons. The way other people and that demo do is calling the share API. It’s all about constructing the href URL with the right parameters. Have a good look at the doc, they are well written. Not many of API docs are well written and well guided. You will find it out soon enough XD.

For styling the button, you can do whatever you want with the share API method.


#5

I’m not entirely certain how their system works and I don’t even have a Tumblr account to test with. It’s best to stick with the code they provide in their documentation as it will format the request properly when your users click the link to create a post.