Share to Facebook / Twitter and login via Facebook / Twitter

[nedtwigg]

• [x] if somebody copy-pastes a link to a take, it should have a nice embed on facebook and twitter
• [x] if somebody copy-pastes a link to a foundation document, it should have a nice embed on facebook and twitter
• [x] integrate with Facebook Share API
• [ ] tweetstorm as self
• [x] email to me, so I can forward to my friends

[WebsByTodd]

Should we add a hashtag to posts? That will allow the MyTake community to connect outside of our own website on social platforms. #MyTake currently has a decent chunk of random content. We can hijack it or create our own, #MyTakeDotOrg.

[WebsByTodd]

To share to Facebook we need to add some meta tags to the head section. This has to be done server-side so that Facebook can scrape the page. The scrapers won't execute our javascript, so client-side stuff is no help here.

<meta property="og:title" content="Title Of Take" />
<meta property="og:description" content="Paragraph of Take that appears in the Take preview" />
<meta property="og:url" content="https://mytake.org/username/titleSlug" />
<meta property="og:image" content="https://mytake/org/full/path/to/image" />
<meta property="fb:app_id" content="1014270045380974" />

We will explore server-side rendering to make this work, but first we will get email sharing to work. Emailing a Take is a step towards sharing on other platforms.

[WebsByTodd]

Facebook

Our Facebook App Id is 1014270045380974

To use the FB Share dialog

Directly after opening tag add:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '1014270045380974',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.0'
    });
  };

  (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 = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Then when a share button is clicked call:

FB.ui({
  method: 'share',
  href: window.location.href  // can leave this off, defaults to window.location.href
}, function(response){});

Other relevent share parameters:

hashtag: string;
quote: string;

Facebook only allows 1 image per post, which means our Facebook posts will have to look similar to news feed cards, with a single fact and some text.

The flow:

1. A user publishes a Take and selects a preview fact block and a preview text block
2. We generate the Take preview image, which is a snapshot of the fact block with highlights (or the youtube image for videos)
3. On the published URL, the preview image URL is in a meta tag in the section of the HTML
4. A sharer goes to the published Take and presses the FB share button
5. A Facebook dialog comes up with a post that contains the image and about 195 characters of text. The sharer can also add their own text here before clicking the “post to Facebook” button

We do not need to implement Facebook login for this.

We do need to give user ability to choose a fact and a text block for their preview when publishing a take.

Twitter

Useful links

Adding images with tweet buttons Tweetstorms

--edit: Updated FB SDK version number in FB.init

[nedtwigg]

We have https://www.facebook.com/mytakedotorg Is the appid associated with it? Do we want it to be?

[WebsByTodd]

Go to https://developers.facebook.com/apps to see if you have access. I added you as an administrator when I created it. I think "people" have to manage the app, not "pages", so there is no such association.

[nedtwigg]

Roger, just confirmed that I have admin. Thanks.

[WebsByTodd]

Twitter Cards are the way to go. They only support image aspect ratios of 1:1 or 2:1. Our images will be cropped if they don't fit into that. Might consider updating the image function to conform to this.

[WebsByTodd]

For testing the Facebook share button on a Heroku deployment, you have to add the domain of the PR deployment to the App Domains field on the Facebook app dashboard for the MyTake.org - heroku.

Note, there is also a MyTake.org - localhost app for local development and testing and there is a MyTake.org app for production.

[WebsByTodd]

This issue is mostly resolved. Here's what's left:

1. Share a Take as a TweetStorm. Tutorial here.
2. Should we add a hashtag to posts? If so, what should it be?

[nedtwigg]

Let's let tweeting be a new issue, when we get to it.