Frank D. Gomez, BSN, RN

Registered Nurse

Looking for a WordPress Instagram Plugin? Look No More.

By 3 Comments

They say a picture is worth a thousand words. Well, I don’t know how accurate that statement really is, but I love looking at pictures vs. reading text.

When I decided to really get in and revamp my placeholder website, I instantly Googled my options for adding my Instagram account and photos. I thought it would be a cool way to personalize my site and keep it updated pretty frequently. I came across this plugin called Instagram Feed by Smash Balloon. I installed it, tweaked some things in the plugin settings, and added it to a home page widget area.

Initially, I thought I’d have to do some sort of CSS customizations to get my Instagram shots looking great on all screen sizes.I was so happy to discover that the plugin does all this dirty work for you – it has a responsive setting that keeps your photos looking nice and neat depending on the screen size.

I chose a simple 3 by 2 layout that shows the 6 most recent photos that I’ve posted. You can easily change this number in the settings, too. This can come in handy depending on where you want to stick this feed.

If you choose to add this feed to the sidebar, keep it small – I’d recommend 3 or less photos so that your pages don’t require too much scrolling.

Another cool thing about this plugin is that is has a shortcode.

This makes it easy to enter:

to any page, post or widget area and have your recent Instagram shots shining bright.

I’ve had this plugin installed and running on my site while I’ve played with different Genesis themes and adding customizations along the way. So far, so good! I haven’t had to alter any of the plugin settings to make it look a better on smaller screens.

I love seeing the new photos I’ve posted on Instagram right there on my website without having to do any manual updating. If you’re looking for an Instagram plugin that shows your pics in their full glory, I’d definitely recommend the Instagram Feed plugin!

YouTube Video With JSON-LD Schema Markup

By 1 Comment

Here’s a super simple way to add schema to a YouTube video without having to wrap schema item properties inline with an embedded video. Adding schema markup inline has proven to be difficult, especially when adding it to a website that has already been designed and developed, sometimes with videos written in the actual page template.

It also seems that you can’t hide the video description on the front end of a site when the item property is written inline. So this can become redundant on a page where you’re already talking about the same topic as your video.

With this method, just grab the embed code for the YouTube video and paste that into your page body. Then, open up your favorite text editor and paste this as your template

<script type="application/ld+json">
{
 "@context": "http://schema.org/",
 "@type": "VideoObject",
 "name": "Light at the End of the Tunnel",
 "description": "Description",
 "thumbnailURL": "http://i.ytimg.com/vi/IbvuM5M87zE/hqdefault.jpg",
 "UploadDate": "2013-11-28"
 }
 </script>

Replace the name with the name of your video, as well as the description (make sure you copy and paste it so it’s consistent) and the upload date. This can all be found in the video description panel in YouTube.

Edit the thumbnail URL to remove the video ID and copy over your own. The YouTube video ID is just the last string of characters in the URL when you watch a video.

youtube-url

You can add additional markup as needed, like the author of the video. See schema.org for other item properties you can add to a video object.

Make sure you’re using the right quotation marks in the markup. It’s the tiniest mistake that can throw off Google’s bots. Take note:

Make sure your items are wrapped in "these" kind of quotes and not “these“.

After you’ve created the code (and tested it through Google’s Structured Data Testing Tool, add it to the <head> of the page the video is on. I’ve found the Per Page Add To plugin to be really easy to use. It creates a field in the page editor where you can paste your markup into.

Adding JSON-LD Schema Markup For a Business on the Genesis framework

By Leave a Comment

I’ve spent hours – no really, HOURS – messing with inline Schema markup for our client’s websites, trying to get everything set up so that Google knows what kind of data we’re using.

According to our SEO partners, schema is simply essential. But, it’s not always simple. Unless the info, (for example, an address and phone number) is wrapped in one div, Google’s Structured Data Testing Tool just doesn’t want to play nice.

We recently discovered the joy of JSON-LD and how easy it makes schema markup. If you regularly add schema to info on Genesis websites, you should consider using JSON-LD. I found this nifty plugin called Per Page Add to Head. It lets you easily add in content to the <head> of any page, so pages with different content can have different schema markup.

Here’s an example of the JSON-LD markup I used for a landscaping company’s website:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"address": {
"@type": "PostalAddress",
"addressLocality": "Haskell, NJ",
"postalCode": "07420",
"streetAddress": "7 Argyle Street"
},
"email": "staff@tapestrynj.com",
"name": "Tapestry Landscape Architecture",
"telephone": "(973) 850 4074"
}
</script>

Adding this to the <head> let me leave the address, phone number, and email untouched in the page body itself, instead of having to wrap it with span and item properties and then testing/tweaking it with the Structured Data Testing Tool.

So far, this has been working perfectly and makes my job SO much easier. If you have more data than the example above, just check out the JSON-LD playground for additional guidance.