Add Twitter oEmbed to the About 3.4 page

[nacin]

We likely underestimated the cool factor of the ability to embed tweets with just a URL. This could be a good time to refresh people on oEmbed while adding one more user feature to the page.

Things we need:

• A new section
• Text for that section
• A screenshot of some sort

[chexee]

Sounds like a good idea to me. I definitely think people will be excited about this.

[georgestephanis]

Suggested tweet to embed:

​https://twitter.com/WordPress/status/206804082080497666

Unless someone'd like to get on the Twitter Account and make a tweet specifically about the new tweet oEmbed feature, which would be really meta.

Potential screenshot of the frontend ...

​http://cloud.stephanis.info/2F0H3Q1M2z2r2P3G1S0P

and editing the post ...

​http://cloud.stephanis.info/1O1o3z0m1i2O0S3W212J

If the Tweet in question look good, I'll draft a summary and get a patch up.

[chexee]

Replying to georgestephanis:

Suggested tweet to embed:

​https://twitter.com/WordPress/status/206804082080497666

Unless someone'd like to get on the Twitter Account and make a tweet specifically about the new tweet oEmbed feature, which would be really meta.

Potential screenshot of the frontend ...

​http://cloud.stephanis.info/2F0H3Q1M2z2r2P3G1S0P

and editing the post ...

​http://cloud.stephanis.info/1O1o3z0m1i2O0S3W212J

If the Tweet in question look good, I'll draft a summary and get a patch up.

That's the one I was looking at! :)

Not sure we need a screenshot of the editor, I think some explanatory text would suffice. One image would fit in a bit better with the variety of left/right alignments that are already on the page.

[chexee]

Working on a patch:

​http://chx.mx/3e0K2I0y1A0Z2e1K3a0D

Also added 1px borders, allowing the shadows to show up so screenshots with white backgrounds don't blend in so much.

I'm going to adjust some of the alignment on the 3 column screenshots. They're a bit off at certain screen widths (especially full screen).

I'm not great with copy writing, so if anyone has some suggestions for the text block that would be great. I'll try to come up with something before I submit a patch :)

[georgestephanis]

Well, 'better captions' has two pictures, one of the back-end editor, one of the front-end result. And if you just say 'oEmbed works for Twitter' -- I almost feel that a second picture would be worth a thousand words showing how dead simple it actually is to use.

[chexee]

Replying to georgestephanis:

Well, 'better captions' has two pictures, one of the back-end editor, one of the front-end result. And if you just say 'oEmbed works for Twitter' -- I almost feel that a second picture would be worth a thousand words showing how dead simple it actually is to use.

I think the captions feature is a more difficult to explain in text and warrants the other screenshot. I think screenshots of the editor with URLs or code make things look more complicated than they actually are (this is totally debatable).

[georgestephanis]

Helenyhou is smart. And I fail at typing things. Tidied images:

​http://cloud.stephanis.info/1R3g1Q2G3x2G19191n2N
​http://cloud.stephanis.info/0O2M1g2B1K0b2j241r2Q

[chexee]

Updated the screenshot to read "embed" rather than "oEmbed" per nacin :)

​http://chx.mx/0t1C0h1z3b2c0u2L1u1E

Still getting the margins on that 3-column screenshot block right. It's a bit tricky.

[chexee]

First pass at a patch.

[chexee]

Twitter embed screenshet

[chexee]

Attached the screenshot and a patch.

[azaozz]

20796-2.patch includes the first patch and tweaks the structural css for the three-images-in-a-row (first is float:left, last is float:right and the middle is text-align:center).

Also noticed that the new screenshot as well as flex-header-media-library.png are larger than the maximum width (525px), so are always scaled. Perhaps better to either trim them or scale them beforehand reducing file size.

[SergeyBiryukov]

Minor cleanup:

• Spaces instead of tabs to align CSS rules (seems more consistent with other instances).
• Removed a line break from the text block.

While we're at it, is there a reason why the "Faster Translations" block ([20947]) is split into two strings?

Replying to azaozz:

Perhaps better to either trim them or scale them beforehand reducing file size.

Attached the resized images.

[nacin]

While we're at it, is there a reason why the "Faster Translations" block ([20947]) is split into two strings?

Because I didn't want to break the first half of the string so late. It's valid, even for RTL, to split up individual sentences.

[nacin]

I don't like the idea of having instructions in the screenshot, as this is only useful to English users, and we have not yet come up with a system for translating screenshots. Instructions should be included directly in the text, ideally as a second paragraph. This would also make the screenshot shorter, and balance out the height of the screenshot versus the height of the text.

[helenyhou]

"Twitter embeds allows you to display any individual tweet in a blog post or post comment, complete with the tweet's text, action links allowing readers to reply, retweet, and favorite tweets without leaving your site, inline links, links to hashtag pages, linked usernames, and a follow button in the tweet."

reads awkwardly. Perhaps shift the items around a bit:

"Twitter embeds allow you to display any individual tweet in a blog post or post comment, complete with the tweet's text, inline links, and linked hashtags and usernames, along with action links allowing readers to follow the user and reply to, retweet, and favorite the tweet without leaving your site."

Replying to nacin:

I don't like the idea of having instructions in the screenshot

The h4 gives you the very basic instructions for use - I would consider the text in the screenshot just additional, but maybe we can chop out the top and bottom text and put a text arrow between the URL and embed instead of words.

[nacin]

I would be okay with it being a URL and a downwards arrow like ↓, then the embed, in the screenshot.

[helenyhou]

Replying to nacin:

I would be okay with it being a URL and a downwards arrow like ↓, then the embed, in the screenshot.

Maybe like so? ​http://s.hyhs.me/H4cN

[helenyhou]

20796.4.diff​ with modified text. Also uploaded a new version of the screenshot without so much text; looks like this: ​http://s.hyhs.me/H3ZY

[chexee]

Replying to helenyhou:

Replying to nacin:

I would be okay with it being a URL and a downwards arrow like ↓, then the embed, in the screenshot.

Maybe like so? ​http://s.hyhs.me/H4cN

Took this and applied a subtle sharpening filter: ​http://chx.mx/0R2x3S3t0W1S0M0M161W

[nacin]

I guess the only concern I have is the <h4> is so long you almost skip it (and it contains the instructions), and then the paragraph is still one big run-on sentence.

[jane]

I think the screenshot is massively confusing for someone who doesn't know how to use it. Showing it in the editor and as the live view as two separate images would be better (like with captions).

[jane]

To be more clear than my comment above, showing the URL as part of the post as displayed on the live site (vs what is put into the editor) with an arrow is inaccurate, and using that as an informational graphic is bad ux. I do not want this method to be used.

[nacin]

I agree on two separate images.

[chexee]

Replying to jane:

To be more clear than my comment above, showing the URL as part of the post as displayed on the live site (vs what is put into the editor) with an arrow is inaccurate, and using that as an informational graphic is bad ux. I do not want this method to be used.

Agree with this, though not crazy about how the two screenshots show up in the layout. I think this is the better way given the above, but just pointing this out. There are a lot of 3-column spaces in a row.

Images on the left: ​http://chx.mx/0F3n2u0v043F142c2m00
Images on the right: ​http://chx.mx/0J243E1G1l431s3W3y42

I prefer right, as my eyes not jumping all over the page to find the text, but it starts to weigh down the right side of the layout.

[SergeyBiryukov]

Replying to nacin:

I guess the only concern I have is the <h4> is so long you almost skip it (and it contains the instructions), and then the paragraph is still one big run-on sentence.

We should probably make the header shorter to look more consistent with the others and move the instructions to the text block. How about:

Share Tweets Right in Your Posts

"Twitter embeds allow you to display any individual tweet in a blog post or post comment, along with action links allowing readers to follow and reply to, retweet, and favorite the tweet without leaving your site. Just paste a Tweet URL on its own line."

[nacin]

I would remove "follow and"... As it's for following the user, nor the tweet. It's okay if we don't describe the entire embed.

I would still like to remove all text from the images. A headline of "WordPress 3.4 + Twitter" seems fine, with just the URL.

[SergeyBiryukov]

Shorter text

[chexee]

Attached a patch and screenshots with one copy change: Removed the word "right" from "Share Tweets Right in Your Posts" to read "Share Tweets in Your Posts"

Result: ​http://chx.mx/1624101V0R0a1b26173M

[nacin]

With twitter-embed-1.png​ and twitter-embed-2.3.png​, and 20796.7.diff​, I think we have it: ​http://cl.ly/2e0s1R0Z3q2w3d3k0b2u.

Twitter embeds allow you to display individual tweets in posts. It includes action links that allow readers to reply to, retweet, and favorite the tweet without leaving your site. Just paste a tweet URL on its own line.

This works with other sites, too. For more, see the Codex article on <a>Embeds</a>.

[jane]

The new images are perfect.

Since it works in pages as well as posts, that subhead "Share Tweets in Your Posts" might be better as "Share Tweets with Style".

"This works with other sites, too" makes sense to those of us who think site = oembed provider, but I would bet cash money that lots of people would read that and think it meant you could paste the tweet into a Facebook post or in a discussion board somewhere and have it show the same. What we really mean is "This works with links from other sites, too."

[helenyhou]

Replying to jane:

What we really mean is "This works with links from other sites, too."

It'd be better to say URLs instead of links (as it says above that text), as oEmbed doesn't work for hyperlinked text.

[SergeyBiryukov]

With text tweaks from Jane and helenyhou

[nacin]

Looks good. How about "This works with URLs from some other sites, too." Note the addition of "some" (could also be "many") — because I would bet cash money that lots of people would read that and think it meant you could paste lots of URLs on their own line and have it show the same. I think the link to the Codex should alleviate those questions, but still, worth a consideration.

[SergeyBiryukov]

Replying to nacin:

How about "This works with URLs from some other sites, too." Note the addition of "some"

Makes sense, 20796.9.diff​

[nacin]

In [20977]:

New section on Twitter Embeds on the about page. props georgestephanis, chexee, azaozz, SergeyBiryukov, jane. fixes #20796.