How to preserve exact formatting when copy pasting from Facebook into WordPress (or elsewhere)?

Question

How can I copy and paste comment threads (and sometimes the original post) from Facebook into WordPress (or elsewhere) and preserve exact formatting?

Screenshot? ok, but text etc is better. Both + link would be ideal.

When I paste now, the thread/paragraph structure is intact, but the "likes" etc and profile pic thumbnails don't display.

I don't need my whole page/site to look like Facebook, just the content of some pasted posts.

Ideally a screenshot would be displayed as a thumbnail. I want to include the screenshot so people don’t think I made up or edited the posts.

I don’t want to only include the screenshot because I want people to be able to select and quote parts of the text.

If I copy and paste into Evernote, a link to the source is automatically included.

Can all 3 - screenshot, text etc, link - be pasted - with the text-etc preserving exact formatting? If not, how close is possible?

---

I was not using a browser sharing extension. Just now, however, I tried the "Press This" WP Plugin (bookmarklet??), but it only posted the core image of the facebook post, not the intro text, and not the comments.

---

I copy selected text from the comment thread (multiple comments, sometimes all the comments, and sometimes the original post too).

I did not try to paste a screenshot. I download screenshots - that's the only way I know to get full "screenshots" (including whatever is too long to appear on my screen). I could upload screenshots into my WP post, but as I wrote above, I want people to be able to select excerpts of the text, so I don't want to only include screenshots.

Ideally "Press This" or a similar brower-sharing extension would enter all 3 - the screenshot, the link, and the text plus-images-if-applicable. Preserving the exact formatting.

Next best: I paste the URL into my New-Post editor, click "fetch" or some such button, and the complete post and comments would appear, along with a screenshot and the link. I could then cut out irrelevant text.

3rd best: copy and paste

---

I'm pasting into WordPress' new post editor - I think it's the default settings. I'm willing to use a different editor if that would help. If this can't be done within WordPress, and if it's already possible elsewhere, I might switch from WordPress. I'm using the Gutenberg block editor; latest WP version. I'm not using Divi or Elementor or anything. The site I'm creating will be functionally a duplicate of DanceOrangeville.com but with different images.

(From Facebook posts, not Messenger.)

Answer 1

What you want isn't possible.

• Why doesn't it work?
• How Does gmail do it?
• How does evernote do it?
• What Can I Do Instead?

Why doesn't it work?

There is nothing to preserve. When you copy paste the most you get is the raw HTML and some limited richtext formatting.

Admittedly WordPress does strip some of that out, but if it did not you would not get the identical look you hoped for. Unless styling is inline you can't copy all the styling from CSS stylesheets Facebook uses. Even copy pasting into Facebook doesn't support it.

You can't preserve something that isn't there.

Proof The Formatting Was Never There

Lets use this original comment thread from a random group in Facebook:

If I copy it, we can directly look at the MacOS clipboard and inspect it using this applescript command:

osascript -e 'the clipboard as record' | less

Giving us this:

This is far too small to contain all the styling and image data from the comment, it's just a HTML text fragment.

How Does Gmail Do It?

It doesn't.

I copy pasted the previous FB comments into a new email and it copied over the HTML of what I copied, and only the HTML. Only inline CSS styles made it over, nothing from stylesheets:

How Does Evernote Do It?

It doesn't, it just takes the raw HTML without any styling:

Using Evernotes web clipper extension

The clipper has better results, but no copy paste is involved, if I install the extension, then right click and clip I get this, which is not what you described at all, but rather the entire HTML page saved and stored inside Evernote and shown inside an embed box:

Notice all the avatars are broken, and the theme is wrong, and what you're seeing is only possible because it was extracted using a browser extension, not copy paste. It's also showing like this because I zoomed out, if I go to normal zoom levels the pages layout is mangled.

What Can I Do Instead?

• Copying raw HTML
  • custom CSS
• screenshots
• Facebook embeds
• webclipper browser extensions

Note that none of the options available are interactive. If they were this would be a major security flaw in Facebook.

What If I copied the Raw HTML?

If you could modify the block editors paste handler to accept arbitrary HTML in the way gmail does, you too would get a similar result of mishmashed clashing inline CSS.

You can replicate this by opening the browser dev tools, copying the HTML as text, then inserting it into a custom HTML block but the results still aren't great:

Note that all of this HTML is still interactive, but not in a good way. You can click on like but it will not like the comment, none of the Facebook javascript is present.

This is the closest you'll get, if you write CSS that tries to make it look like facebook, and disable the links then that's the best you can hope for. You'll need to keep on top of facebooks changing markup though as it changes as time goes on.

Screenshots

As described this gives you exactly what you wanted, and can be uploaded as an image. However:

• It cannot be modified without Photoshop skills, so highlightng a phrase is out of the question
• It's totally innaccessible due to text inside images. A lot of tooling will be unable to expose this information
• That also means a lot of search engine crawlers will have difficulty too

Facebook Embeds

This is how FB posts are meant to be embedded:

• Copy the URL
• Paste it on a blank new line
• WP replaces it with an OEmbed instance
• The HTML and CSS for that embed are provided by Facebook itself

There are downsides though:

• FB controls what the embed looks like
• You can embed a single specific comment according to facebooks documentation, but not a comment thread. There is an option to include the parent comment if it exists, but other replies aren't shown.

See here for more information about embedding specific comments

Webclipper Browser Extensions

Browser extensions have more access to data than copy paste, you can go shopping across the extension stores to find a clipper that can extract the styles from the browser at runtime and embed them in the output.

This does mean though that you would need to implement some sort of custom embedding solution, as well as a storage solution. This data can't sit directly inside the post, it needs to be added via a block or shortcode that references the place it's stored, with code to process the output of the clipping extension you chose.