Tag Archives: HTML

How to Embed a Tweet in a Blog Post or Website

Posted on by
Comment

Finding and using a new feature on Twitter.com.

Twitter’s getting a facelift. In fact, as I write this, I’m one of a limited number of early adopters who have sped the arrival of the new version by installing and using the iPhone (in my case) or Android app.

The new Twitter is a dramatic change in the interface — one I plan to review in a video for Lynda.com soon. In the meantime, I’m picking out a few new features to explore in detail here in Maria’s Guides.

In this post, I’ll explore the new ability to embed a tweet — like the one shown here — within a blog post or web page.

  1. On Twitter.com, point to the tweet you want to embed and then click the Open link that appears to open it. (You could also simply double-click the tweet.)
    Open the Tweet
  2. Click the Details link to display the tweet in its own window.
    Click the Details Link
  3. Click the Embed this Tweet link.
    Click Embed this Tweet
  4. The Embed this Tweet pop-up window appears. It has three tabs:
    • HTML enables you to embed the tweet in a blog post or website using HTML. You select the alignment option you want by clicking a button and then copy and paste the code at the top of the tab. In this example, I’ve clicked Right because I want the tweet right aligned (as you see above).
      HTML Embed Code
    • Shortcode enables you to embed the tweet in a blog post on a blogging platform that supports short codes, such as WordPress. Again, set the alignment option you want by clicking a button and then copy and past the code at the top of the tab.
      Shortcode
    • Link displays a direct link to the tweet that you can copy and paste anywhere you like: email message, Facebook, Google+, comment form, or HTML editor to create your own link manually.
      Link

    In this example, I simply pasted the code in the HTML tab into the beginning of this blog post, which I wrote in HTML (I’m a bit old-fashioned that way). If you use WordPress and prefer Rich Text mode, you can do the same thing with the shortcode.

That’s all there is to it.

What’s handy about this is that not only does it display the tweet in its entirety with the tweeter’s profile picture and name, but it has live links to follow that person on Twitter, Reply, Retweet, and Favorite. Cool, no?

Let me teach you more about Twitter!

Get more from your software.You can watch seven videos from my Twitter Essential Training course for free. Click here to get started.

Useful HTML Tricks for Bloggers

Posted on by
Comment

Formatting can help draw readers in and keep them reading.

Amit Agarwal has written a nice little article that provides a few quick and easy-to-use HTML coding tricks that you can use in your blog posts to make them more visually appealing. After all, no one wants to big, fat, unbroken paragraphs of text.

From Useful HTML Tricks for Bloggers on :

Though knowledge of HTML or CSS is not essential to writing a blog, it is always nice to have some basic idea of these languages to make your blog posts stand-out – after all, readers have such short attention spans and we, as bloggers, desperately want them to read our content.

This is the new HTML thing I learned today. I can now put text in a box and have text wrap around it. It’ll be a nice effect for making points in an article.

My favorite tip? Putting text in a box and having other text wrap around it.

Although I’m no stranger to HTML and CSS, I’m no expert, either. I learn from getting the basics in articles like this one, then experimenting on my own to fine-tune the effect. For example, Amit’s article displays a fixed width/height box with borders on top and bottom only. My box here is a true box (borders on all sides) that’s just tall enough to fit the text I want to put into it.

I’ll have to do an article about this effect in the future. Stay tuned.