Suppose you want a homegrown share widget: perhaps for page load speed, perhaps for styling control, perhaps to avoid adding a vendor’s tracking code to your site. As it turns out, this is straightforward to do for a lot of social networks with a little JavaScript: add an onclick attribute opening a window at the appropriate URL, and you’re done.

Email is even simpler – no JavaScript required. Mailto: links have been around since the early days of the web. (Not that everyone’s browser is configured correctly to use their preferred mail client.) For a share button the destination is omitted but the subject and body are set via parameters.

href="mailto:?subject=[encoded string]&body=[encoded string]"

I found just one complication: if you encode the ampersand between subject and body in the mailto link, as most places instruct, the body will be cut off in many circumstances. One of the problematic setups is Outlook on Windows, yet even MSDN says to encode the ampersand!

Twitter, Facebook, and Pinterest sharing buttons follow. For each of them, you will be opening a window at a specific address. The links get the following attribute:
onclick="window.open('[network-specific link]', 'window', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=600, width=600')"

Twitter is the second-simplest to set up. Its network-specific link is
https://twitter.com/intent/tweet?text=[encoded string]

Facebook’s complication is that you need an app ID. This ID will be exposed, so do not use an app that Facebook users sign up for. A special app that is used for nothing but this widget is best. Incidentally, if someone clicks the Facebook share button when they are not logged in, they will see the name of the app (a la “Sign in to Facebook to use XYZ”), so you may want to give it a name that will make sense to the user.

Facebook makes its own decisions about what to show for a shared page, so you only provide it the URL:
https://www.facebook.com/dialog/share?app_id=[app ID]&href=[encoded page URL]

The minimalist network-specific link for Pinterest is almost as simple as Twitter’s:
https://www.pinterest.com/pin/create/button/?url=[encoded page URL]&description=[encoded text]

That will open a window that allows you to choose an image from the page to pin, as though you’d pinned by URL from within Pinterest itself. It’s great … provided you’re not trying to manage which images are pinnable.

Once upon a time, to exclude an individual image from being pinned, you gave it the attribute nopin="nopin". That’s not valid HTML5, though, so now there is also the attribute data-pin-nopin="true". If you are using, say, the Pinterest browser extension, adding the data-attribute to exclude images works great and allows your page to validate. However, in the context of choosing an image to pin after inputting a URL to Pinterest, nopin="nopin" is still current. Imagine my joy upon discovering my sitewide update from nopin to data-pin-nopin attributes was not as much of an update as I thought!

Fortunately, it isn’t too complicated to build an image selection overlay which excludes disallowed images regardless of syntax. Mine also kicks out any images that are too small (using size as displayed) or too landscape-oriented, but pulls in anything that appears to have special Pinterest markup – whether that be from a data-pin-media attribute or based on a CSS class name. And then why not take it a step further – if there is only a single pinnable image, go straight to a Pinterest window to pin that image.

Here’s a pseudocode skeleton for a pinnable image gate:

showPinnableImages:
  A. grab all images with neither data-pin-nopin="true" nor nopin="nopin" attribute; set a counter to 0.
  B. for each image, check
    1. does it have a data-pin-media attribute or a class including "pinterest"?
      > if so, push the data-pin-media value (falling back to src and then to srcset) into a media array, and the alt text (falling back to title + metadescription) into a description array; increment the counter.
    2. if not, is it at least 236px wide with a height at least 2/3 of its width?
      > if so, push the src (falling back to srcset) into the media array, and the alt text (falling back to title + metadescription) into the description array; increment the counter.
  C. if there is more than one image, build HTML of an overlay displaying the images with their description value as alt text.
  D. if there is only one image, open a Pinterest window to pin that image.
  E. set a click handler for the overlay and its contents, to close or pin as desired.

Once you’ve chosen an image, the network-specific link for Pinterest for the window.open command looks like this:
https://www.pinterest.com/pin/create/button/?url=[encoded page URL]&description=[encoded text]&media=[encoded image URL]

The one major limitation to the home-grown share button is that if the Pinterest gate finds zero pinnable images, it will simply do nothing. There does exist open source code to generate a “text on solid color” image, but if that is overkill you can add another “if” to the block about number of pinnable images and pop up a pin window with a default image.

Other than the six-week period where Facebook was rate-limiting apps severely (and contrary to its documentation), these have worked quite well, eliminating problems with slow and obvious loading. I was really pleased with them!

Root beer float original by Darin House via Wikimedia Commons.

The post Coding a Social Share Widget appeared first on rweber.net.

If you embed a Google map into your page via Google’s embed code, you can set a location marker and a zoom level (on the Google Maps side, before you click the “share” button), but other tweaks are reserved for users with API accounts. I was recently in a situation where we simply wanted to disable scroll-to-zoom, because it is super annoying – especially on mobile.

Somewhere online I found the idea to cover the map with a transparent div (you can see through it, but you can’t click through it or “scroll through” it) and add a line of JavaScript to remove that div if it is clicked on. It seemed hacky to me at first but the more I thought about it the more I liked it. We decided to use it and not even to worry about putting a “click to interact”-type note. If someone clicks once without effect they are going to click again, and then what they wanted to do will work.

If you are setting up your maps in a responsive iframe wrapper, the setup is very simple. Just tuck a second div in after the iframe (second so it will be on top), give it the same styling as the iframe, and add a line of JavaScript in the footer of your page.

Here’s the code for the embedded map above (view on pastebin):

The post Improving Embedded Google Maps appeared first on rweber.net.

As various clients want various interactions with their social media accounts, I’ve gathered notes on what’s available and how to do it. This is mostly about drawing or embedding content from social media to standalone sites.

For single items, the built-in WordPress functionality oEmbed covers a lot. You simply paste in the URL of the content you want to embed, and oEmbed pulls the appropriate HTML from the source site. This will frequently result in an iframe, of course, so you may wish to visit my post on making iframes responsive.

I have some notes on feeds and specific social media sites, too. Twitter makes it incredibly easy to get whatever kind of feed you want, provided you have an account. Users, hashtags, search terms, any criteria you could reasonably desire. While logged in, simply visit the timeline widget creation page, fill out the form, and grab the code from underneath the preview. It can go in a post or page – in the Text editor view only, not the Visual editor view – or in a WordPress text widget.

For YouTube, note that the embed URL begins with //. This is great for avoiding HTTP vs HTTPS conflicts, but I’ve had trouble with localhost sites figuring out what to do with it and have had to add http: to get the embed to happen. You can embed playlists queued up to any specific video in the list, but unfortunately not to the latest addition dynamically. Ads will still be in place and benefit Youtube and the video owner on Youtube, not the owner of the site where the video is embedded (unless, of course, that individual also owns the video).

While personal Facebook badges have many options, including exporting a photo stream (public photos only), page badges are limited to name, most recent status, current profile picture, and number of fans. Here is the badge page.

If you want to get in deep with Pinterest, there are all kinds of Pinterest-specific data attributes you can add to your images. That article also covers Rich Pins. I haven’t had any clients for whom Pinterest is important enough to put that kind of time into, and there don’t seem to be any plugins to facilitate adding the attributes, but they’re there for you if you do use Pinterest heavily for marketing.

Conversely, you can prevent pinning of your images with a meta tag (in the <head></head> section): <meta name="pinterest" content="nopin" description="Optional message text"> If you don’t set the description attribute the message displayed upon attempted pinning will be “This site doesn’t allow pinning to Pinterest. Please contact the owner with any questions. Thanks for visiting!” Individual images can be disqualified from pinning by adding the attribute nopin="nopin" to the img tag.

Bell Systems switchboard photo found on Wikimedia Commons.

The post Social media connections appeared first on rweber.net.

The iframe is still state of the art for embedding content from a number of other webpages, but it is not a naturally responsive object. You can make it responsive, but it takes some effort. I’ve selected some Youtube videos to illustrate.

Doing nothing

Here is a video in standard Youtube syntax:

Since my theme gives iframes a max-width of 100%, it will narrow when you narrow the window, but it won’t change height, adding black bars above and below the content to maintain the aspect ratio of the video itself. This isn’t a big deal when the video is small, but gets more problematic when you want a larger display.

Doing something worse than nothing

Next we can remove the explicitly-set height and width, but that gives you this:

You have to enclose the iframe in a div that adapts its size, but even that takes some effort. Here is the video where the iframe has had its height and width replaced by the tag style="width: 100%;", and is enclosed in a div with style="width: 600px; max-width: 100%; position: relative;".

You can make it wider or narrower by changing the width style, but it won’t get any taller.

Doing enough

The answer is to play the aspect ratio trick and enclose the iframe in two divs. The outer div controls the width and placement; here it’s set with style="width: 100%; max-width: 700px;" (700 for dramatic effect). The inner div accommodates the changing height of the box with style="height: 0; padding-bottom: 56.25%; position:relative;", where the 56.25% comes from original height 315 divided by original width 560. The iframe has its height and width declarations replaced by style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;". Absolute positioning allows it to take up the padding space of its container rather than just the content space (which of course is 0 because of the 0 height). The rest forces it to do so.

All of this styling is inline, so you can see it in the source of this page.

Frames photo by Michael Möller, via Wikimedia Commons.

The post As responsive as iframes get appeared first on rweber.net.