0

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.)

10
  • 3
    Can you be more specific about what it is you're copy pasting from Facebook? Are you just copying the lnk and pasting it into WP and expecting an embed? Or are you trying to copy text from FB? Which editor are you pasting it into? Your post doesn't say if it's a page builder, classic editor, block editor, etc. Use the edit link to add more information to your question, I think there's a lot of assumptions in this question that aren't being shared, I'm struggling to picture what it is that you want, and can think of several things it could be that are very different
    – Tom J Nowell
    Jun 26, 2020 at 12:01
  • Thanks. Edited 3 times. I think I answered your questions. Copying comment threads and sometimes also the original post. By Page Builder do you mean Divi or Elementor or something? I'm using Gutenberg block editor - not sure if I love it, but that's what I'm currently using. Jun 27, 2020 at 13:38
  • I have an "Expand All" bookmarklet that expands all the comments. I know one way to screenshot the entire post and thread - ctrl-shift-i, ctrl-shift-p, then type "scre", choose "screenshot full". Jun 27, 2020 at 13:43
  • Can you be clearer about what you mean by pasting? I still don't know what it is that you copied. Like did you screenshot the FB post and you're pasting the screenshot? Or did you select the FB post with a click and drag and copied? Selected the text? Or is this a URL? Drag and drop? A browser sharing extension? Your question is incomplete, until the basics of your question are clear it's not answerable. I understand that to you it might seem obvious, so state the obvious. It's also unclear what you're expecting once pasted, there are no examples and the description is open to interpretation
    – Tom J Nowell
    Jun 27, 2020 at 15:30
  • Thanks. Do you get notified when I edit, or do I need to add a comment to tell you I've edited my post? Jun 28, 2020 at 20:59

1 Answer 1

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:

enter image description here

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:

enter image description here

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:

enter image description here

How Does Evernote Do It?

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

enter image description here

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:

enter image description here

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:

enter image description here

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.

7
  • Thank you. I somehow missed a notification that you posted this. Mar 19, 2022 at 9:49
  • @JonathonNeville If this answers your question, consider marking it as the accepted answer by clicking the tick button under the voting controls. If not please leave a comment explaining why so that I can update the answer, or so that somebody else can leave a better answer
    – Tom J Nowell
    Mar 19, 2022 at 21:30
  • I just commented under my question about how formatting is preserved when pasting into Gmail and (i think) webclipping into Evernote. Do you know how that's possible? Mar 20, 2022 at 22:49
  • @JonathonNeville if you have a new question about unrelated software you should ask that somewhere else, WordPress has nothing to do with GMail or Evernote, they are completely different products and they will have independent copy paste handling that has zero overlap with WordPress. I'm only interested in your original question, did I answer it? If not please explain. Remember this isn't a discussion thread, it's a question answer site, I can only answer the question you asked.
    – Tom J Nowell
    Mar 20, 2022 at 22:53
  • My questions about Gmail and Evernote were not new questions, nor conversations, but an attempt to find the answer to my original question. If pasting into Gmail and Evernote almost perfectly preserves formatting, why is that not possible with WordPress? Does Gmail have the css and js that Facebook uses pre-loaded? Presumably not. Do they use another approach that doesn't require having the source's css and js? Dec 10, 2022 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.