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!