Blog 2014: Adding social media links

Where I learned how to add social media buttons, and where I found them

Today, I added custom social media links to my secondary menu, which appears on the left sidebar in the Twenty-Fourteen WordPress theme I’m using now. I did this because Twenty-Fourteen doesn’t have social links in the theme, and I wanted them near the top of my blog layout. To learn how to add them, I started by reading the WordPress Support article “Add Social Media Buttons to Your Sidebar or Footer.” When I did a Google Image search of ‘free social media icons’, as suggested in the support article, I found my favorite icon set at GraphicsFuel: 20 Popular Social Media Icons (PSD & PNG). Thank you, GraphicsFuel!

What code I used

I used the HTML shown on the support article, but I amended it with a bit of CSS to put some padding (space) to the right and bottom of the buttons so they didn’t look stuck together. While I was at it, I took the width and height properties out of the HTML and put them into the CSS where they belong (since they are style, not structure). Here is a sample of the style code I added to the img element for my customization:

style="width:35px;height:35px;padding-right:5px;padding-bottom:5px;"

How it looks today

Of course things will change with time as I change themes or widgets, but here is what my blog looks like as of this writing, with the new social media button links I added to the left sidebar:

A screenshot of the front page of my blog on July 7, 2014
A screenshot of the front page of my blog on July 7, 2014

Why I wrote this

I always like to share what I learn with others who might benefit, and I like to give credit where it’s due. I hope you find it helpful. Please let me know.

WordPress themes not showing author bylines explained

The other day, I expressed my concern on the WordPress Support Forums that my author bylines were gone from my posts in this blog using the Twenty Twelve theme. Today I got a response from staff explaining that, because of feedback from the WordPress community, they started using CSS (the style markup that composes the themes) to hide the author byline on some, but not all, themes. This makes the byline invisible in the normal, theme/CSS-enabled view, but if you view the page without the theme/CSS you will see the bylines.

Screenshot courtesy of Josh, a WordPress Happiness Engineer
Screenshot courtesy of Josh, a WordPress Happiness Engineer

This means the search engines can read the bylines and verify authorship. I checked this with Google’s Rich Snippet Testing Tool and found the search engine did, in fact, read my byline and verify my authorship. This is good to know!

For anyone who knows HTML and CSS and is curious, here is the HTML:

<span class="by-author"> by <a title="View all posts by Daniel Greene" href="https://danielgreene.com/author/danielgreene/" rel="author">Daniel Greene</a></span>

And here is the CSS that does the trick:

.by-author&nbsp;{display:&nbsp;none;}

If you are interested in viewing the code on your own blog, there are various ways to view source code.

What interpreters can learn from HTML

What could HyperText Markup Language (HTML) possibly have to teach interpreters? I learned HTML in the nineties, and I made the connection to interpreting the other day when I watched a colleague’s interpretation. The English sentence she interpreted was:

Also you can take them to a consignment shop, which– they’ll buy your clothes, which gives you a little extra money.

My colleague’s ASL interpretation was: (more…)

I want a Chromebook; in fact, I want a Chromephone. Easy on the OS, and hold the apps.

The coming of the Chromebook–the web-only netbook that boots in less than ten seconds–has me thinking how nice it would be if my Android phone booted up in 10 seconds instead of 60. But if it did, it wouldn’t be an Android phone, would it? It would be a Chromephone, and that’s all right with me.

If the telephony could be worked out, I don’t see why a phone couldn’t be made to run on a thin, browser-like OS that accesses almost all its content on the Cloud. As HTML5 is helping web content become more app-like, and as more of users’ content is stored online, there may soon be little need for onboard apps at all. We may be doing everything we need with Web apps. This may be the end of the OS as we know it. No more bloated platform-dependent apps. Microsoft never was a trailblazer, and Apple isn’t blazing trails anymore, either. Apple is announcing iCloud and OS X Lion tomorrow, and I’d say they’re just playing catch up. Microsoft say Windows 8 is going to have an HTML5 panel screen instead of a desktop, and by the time it comes out in a year or so, it will be as old news as Windows 95 = Mac 84.

As someone who embraced platform-independent Web development before it was popular, I am thrilled to see that HTML and CSS have now taken us to the point where just about any app can be a Web app. Pretty soon, there won’t be a need for five different Facebook apps; there will just be Facebook as a web app anyone can use the same way on any device. You won’t have to wait for your favorite Website to come out with an app for your device’s operating system, because web standards and powerful web functionality will make the question of device and OS moot.

I’m already doing just about everything online with the Chrome browser now except for editing photos and videos and opening Office documents on my iMac. The only thing I do on my laptop other that the Net is Microsoft Office if I have to, and I’m already using that less as I use Google Docs more. I’m ready to move away from bloated software and over to something simple, fast, and standard. Chrome is the OS of today.

Related Posts

Hyperlinks Weave the Web



Hyperlinks Weave the Web
Originally uploaded by Daniel Greene.

There would be no World Wide Web without hyperlinks. Hyperlinks are what allow us to add photos to web pages, link from one page to another, etc. These days, much of this hyperlinking is done for us automatically on sites such as Flickr. But Flickr also allows you to create hyperlinks yourself in many areas of the site, including photo descriptions, comments, and group threads. I create links between photos and members all the time, and it’s easy for me to do so because I’ve memorized the HTML. Once you learn the HTML for a hyperlink, you can be a hyperlinker yourself!

An HTML tag begins with a less-than sign, created by holding down the shift key while you tap the comma key. Then you type “a” for “anchor” and “href” for “hypertext reference”. Then you type the equals sign (=) followed by a quotation mark. This quotation mark is the beginning of a “container” for the URL, or “uniform resource locator.” The URL is the “web address” for the object to which you are linking. As a mnemonic device, I think of this opening tag as the English phrase, “Anchor hypertext reference is…”

Recently, I posted a photo I took of a fellow Flickrite at a FlickrMeet. I wanted to link to her photostream so that other people could appreciate her photos. This is a way of showing respect and giving credit, similar to the citations used by academic writers. So, what did I do? Well, first, I wrote the text, “katdavis kindly posed for a portrait.” Then, I decided to make “katdavis” (her username) into a hyperlink. In order to do so, I found her photostream and copied and pasted the URL from my browser’s address bar above the first page of her photostream (the URL being http://www.flickr.com/photos/katdavis/ ). Then, I returned to my photostream— specifically, the photo page containing the portrait of her (the URL being flickr.com/photos/danielgreene/2100926688/ ). I clicked in the description text so that I could edit it, and I placed my cursor just in front of her username. There, I inserted the magic of the Web: I typed <a href= and I pasted the URL I had copied from the first page of her photostream. The “aitch tee tee pee colon slash slash” is absolutely essential to the HTML expression. Immediately following that URL, I typed a closing quotation mark (a.k.a. “close quote” — same as an open quote in this case, since HTML uses only the “inch mark” type quote, not “curly quotes” or “typographer’s quotes”). I then completed my opening HTML tag by typing a greater-than sign. The greater-than sign signifies the end of an HTML tag.

But the tag would not be complete without the link text being bracketed by the closing HTML tag. So, after I typed the opening HTML tag and typed the link text “katdavis” I enclosed the link text with the closing HTML “anchor” tag which is a less-than sign, slash, a, and a greater-than sign. As you can see, enclosing HTML tags are bracket by less-than and greater-than signs. The slash mark represents a closing HTML tag which marks the end of an HTML expression. You can think of the end of the anchor tag in English as “end of anchor.”

The resulting hyperlink looked like so when I finished editing it:

katdavis

What the visitor to my pages sees is a hyperlink they can follow to jump to katdavis’s photostream, like so: katdavis

Hyperlinking creates virtual connections that can lead to or supplement the actual connections we have with each other in the real world. Hyperlinks are the sine qua non of the World Wide Web, and are even more important in the social, democratic "Web 2.0." Learning the HTML for creating hyperlinks is one of the steps to joining the ranks of the digerati and harnessing the power of the Web for yourself.

Have fun, and weave on!

Transforming My Site into a Blog

Over the last few days, I have transformed danielgreene.com into a blog. I resisted doing a blog for quite a while for several reasons. Blogs can take a lot of time to write and maintain— especially when there are a lot of comments to monitor. I didn’t know anything about the software I would need to create one. Most important, I was afraid that once I got started, there would be no stopping me from saying absolutely everything on my mind. I was afraid my candor might get me into trouble.

Then I had a talk with Will Pate, Community Ambassador for the Flock Browser, who said, “A professional blog is a great way to gain recognition in your profession.” It suddenly dawned on me— of course I don’t have to say everything on my mind! Of course it doesn’t have to be personal! A blog can be professional! Sure, why not? That one sentence from Will was all I needed to hear to open my mind. I had already been wanting a more interactive “Web 2.0” website. I wanted people to comment on my posts, comment on each other’s comments, blog about my blog, add me to their extended friends’ network, add “trackback” links to my blog, etc. Now the question was: what sort of blogging system will I use to “power” my blog?

Well, I noticed that Will had a web site with his name as the domain just as I do, and I noticed that his was “powered by WordPress.” I checked into it, and found out that my host, pair Networks, supports WordPress on its servers. Other than the few extra dollars I have to pay pair Networks per month to upgrade my account, WordPress is free. I also chose it because it allows me to have danielgreene.com host the blog natively, rather than having to host it somewhere else like BlogSpot or LiveJournal. I like the fact that it is customizable, and I don’t need to have any navigation bar at the top advertising the blogging system.

Now, when I go to YouTube or Flickr, I can actually click on those “Blog This” links and blog them. And I can right-click in Flock to “Blog This” anywhere on the Web!

CSS Font Properties Test

A Demonstration of CSS Font Properties

Property Value Display in Your Browser
Property Value Display in Your Browser
font-family serif The quick brown fox jumps over the lazy dog.
sans-serif The quick brown fox jumps over the lazy dog.
cursive The quick brown fox jumps over the lazy dog.
fantasy The quick brown fox jumps over the lazy dog.
monospace The quick brown fox jumps over the lazy dog.
font-style normal The quick brown fox jumps over the lazy dog.
italic The quick brown fox jumps over the lazy dog.
oblique The quick brown fox jumps over the lazy dog.
font-variant normal The quick brown fox jumps over the lazy dog.
small-caps The quick brown fox jumps over the lazy dog.
font-weight normal The quick brown fox jumps over the lazy dog.
bold The quick brown fox jumps over the lazy dog.
bolder The quick brown fox jumps over the lazy dog.
lighter The quick brown fox jumps over the lazy dog.
100 The quick brown fox jumps over the lazy dog.
200 The quick brown fox jumps over the lazy dog.
300 The quick brown fox jumps over the lazy dog.
400 The quick brown fox jumps over the lazy dog.
500 The quick brown fox jumps over the lazy dog.
600 The quick brown fox jumps over the lazy dog.
700 The quick brown fox jumps over the lazy dog.
800 The quick brown fox jumps over the lazy dog.
900 The quick brown fox jumps over the lazy dog.
font-size
<absolute-size>
xx-small The quick brown fox jumps over the lazy dog.
x-small The quick brown fox jumps over the lazy dog.
small The quick brown fox jumps over the lazy dog.
medium The quick brown fox jumps over the lazy dog.
large The quick brown fox jumps…
x-large The quick brown fox…
xx-large The quick brown…
font-size
<relative-size>
larger The quick brown fox jumps over the lazy dog.
smaller The quick brown fox jumps over the lazy dog.
font-size
<length>
(arbitrary
examples—
non-scalable
values)
12pt The quick brown fox jumps over the lazy dog.
1pc The quick brown fox jumps over the lazy dog.
72pt The…
1in The…
10mm The quick…
1cm The quick…
12px The quick brown fox jumps over the lazy dog.
font-size
<length>
(arbitrary
examples—
scalable
values)
1em The quick brown fox jumps over the lazy dog.
1.2em The quick brown fox jumps over the lazy dog.
1ex The quick brown fox jumps over the lazy dog.
1.2ex The quick brown fox jumps over the lazy dog.
font-size
<percentage>
(arbitrary
examples)
100% The quick brown fox jumps over the lazy dog.
120% The quick brown fox jumps over the lazy dog.
150% The quick brown fox jumps over the lazy dog.
225% The quick brown…
338% The quick…

Using the Shorthand font Property

{ font: 150% serif; }

The quick brown fox jumps over the lazy dog.


{ font: italic bold 100%/200% "Lucida Sans", Verdana, sans-serif; }

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. (Lines repeated to demonstrate the extra line-spacing, or “leading.”)


{ font: normal small-caps large Braggadocio, "Broadway BT", fantasy; }

The quick brown fox jumps over the lazy dog.


{ font: lighter x-large "Lucida Calligraphy", "Brush Script MT", "English 157 BT", cursive; }

The quick brown fox jumps over the lazy dog.

Daniel Greene originally published this page on danielgreene.com as fontprop.html in February 1998.