• Home
  • About
  • Contact
  • Advertise

Devlounge

Design, Develop, and Grow

  • Home
  • Code
  • Design
  • Design Focus
  • Interviews
  • Publishing
  • Strategy
  • Webapps
  • Extras

Make your site more sociable with OpenGraph markup

July 6, 2015 By Sophia Lucero

The Art of Social Media

These days, before people click on your site they will probably see it through a link shared on your social network of choice, such as Facebook, Twitter, Google+, and so on. Usually these sites are smart enough to extract descriptive information about your page and display that so followers already get a good idea of what they’d be clicking on, but wouldn’t it be great if you could optimize that information to ensure you get more engagement?

With a bit of HTML knowledge (and perhaps some programming knowledge, depending on what website templates you’re using), you can make more sites more “sociable” by adding these tags to the <head> portion of your site. Text in {CURLY BRACES} are placeholders for the values you need to insert.

og:url

<meta property="og:url" content="{URL}">

Use this to show the canonical url of your page, free from various query variables or tokens. If you use a CMS like WordPress, this can be automatically generated for posts and pages through a function like the_permalink()

og:title

<meta property="og:title" content="{TITLE}">

Use this to show the title of your page. By default sites like Facebook usually get the text from the <title> tag, displayed on the browser title bar or tab name, but that usually contains extra stuff like the site description. With a custom OG tag you can opt to modify that to your liking.

og:type

<meta property="og:type" content="{TYPE}">

Use this to indicate the type of content your link is all about. Of course all links are websites, but they can also be more specific things like articles, products, books, movies, restaurants, and more.

og:image

<meta property="og:type" content="{IMAGE}">

A lot of times the images that displays with your link can encourage or prevent people from clicking, so make sure that you define this. There are optimal sizes for what Facebook, Twitter, and Google+ recommend, so be sure to check their individual documentation on that.

og:description

<meta property="og:type" content="{DESCRIPTION}">

Similar to title and image, you’ll want to optimize the description of your webpage since there is only so much text social networking sites can include in their link previews.

Closing note: on Twitter and Testing

When you’ve plugged in the above tags, you’ve pretty much guaranteed Facebook and Google+ to display your website links the way you customized it. However, Twitter has a couple more tags you might want to integrate, including twitter:site, where you can plug in the Twitter handle of your website, and twitter:creator, a different person or organization that is behind the website.

Twitter also has content types called Cards, which lets you specify the most appropriate layout for a link preview—whether it’s a summary card, a summary card with a large image, an app card, or a player card. Each card type emphasizes different data, so choose wisely or switch things up as you see fit.

Finally, it’s always the best practice to test things before rolling them out. Check out the links below for more detailed documentation and tips for sharing content on each social network:

  • Facebook Debugger Tool
  • Facebook Guide to Sharing for Webmasters
  • Google+ Platform for the Web
  • Twitter Cards Guide
  • Twitter Card Validator

 

How to add Pinterest’s “Pin It” button on your WordPress and Genesis Framework site

February 14, 2012 By Sophia Lucero

Pinterest website

Pinterest is probably the hottest sharing and organizing social network today, and if your website’s community has jumped on the pinning bandwagon, make sure it’s easy for them to share and save your stuff with the “Pin It” button. Here’s how you can add it to your WordPress site (including Genesis Framework-powered sites).

Install a Pinterest Pin It WordPress Plugin

The most painless route would be installing a Pinterest WordPress Plugin. There are already a few competing ones available at the official plugin repository such as Pin It On Pinterest (by bahia0019) and Pinterest “Pin It” Button (by pderksen).

If you’re using an existing social button service like AddThis, Slick Social Share Buttons, or Social Linkz, you’ll be happy to know that these plugins support Pinterest already.

Add the Pinterest Pin It button to your WordPress Theme

The button code which you can get from the Goodies page requires an image URL in addition to the usual post URL, so in this case we’re using the built-in Post Thumbnails feature.

In single.php and places where you call The Loop, add this code:

[php]
<?php $pimage = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()));
if ( $pimage ) { ?>
<div class="pinterest"><a href="http://pinterest.com/pin/create/button/?
url=<?php echo urlencode(get_permalink()); ?>
&amp;media=<?php echo urlencode($pimage[0]); ?>
&amp;description=<?php urlencode(get_the_title()); ?>"
class="pin-it-button" count-layout="horizontal">Pin It</a></div>
<?php } ?>
[/php]

Depending on the type of button you want, you can change the value “horizontal” to “vertical” or “none”.

In footer.php, add this code to the bottom, right before </body>:

[code lang=”js”]<!– Include ONCE for ALL buttons in the page –>
<script type="text/javascript">// <![CDATA[
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
// ]]>
</script>[/code]

Insert the Pinterest Pin It button to your Genesis Framework WordPress site

If you use the Genesis Theme Framework, just add the above JavaScript to the footer script text box in the Genesis Options page, then add this to the functions.php file in your child theme:

[php]
add_action( ‘genesis_post_content’, ‘pinterest_pin_it_button’ );
function pinterest_pin_it_button() {
$pimage = genesis_get_image( array(‘format’ => ‘url’) );
if ( $pimage ) { ?>
<div class="pinterest">
<a href="http://pinterest.com/pin/create/button/?
url=<?php urlencode(get_permalink()); ?>
&amp;media=<?php echo urlencode( $pimage[0] ); ?>
&amp;description=<?php echo urlencode(get_the_title()); ?>"
class="pin-it-button" count-layout="horizontal">Pin It</a>
</div>
<?php }
}
[/php]

This adds the button after the entry text. You can also choose from other Genesis Hooks for a different location on your blog.

Friday Focus 08/05/11: Masked Text

August 5, 2011 By Sophia Lucero

This week’s Friday Focus tackles exactly what it says on the tin: designs featuring imagery molded into the silhouettes of large type. Unfortunately all of them still use images to achieve the effect instead of actual text, but all are still noteworthy designs.

Designs of the Week

Fox Johnston website
Fox Johnston

Two photos switching in and out, one becomes the background while the other becomes the “content” of the masked text. What’s a little weird is that the “photo text” is in the same dimensions as the full-size images, with the rest of its canvas transparent—instead of using absolute positioning. Also, while I don’t mind that some parts of the text aren’t easily readable, I kind of wish there were more pictures. Of course the possible explanation for that is this is only a splash page, and perhaps the question I should be asking is: should it even still exist in 2011?

Gabriel Aloysius Pang website
Gabriel Aloysius Pang

There’s a little aliasing going on in the edges in my browser, but if you check the source images, including the smaller navigation headers at the right, you don’t find them there, so it could be due to JavaScript. There are a few small shapes used here and there, including triangles, double dots, plus signs, and dashes. Not to mention a slash to divide the content area from the navigation area, which is quite popular among designy portfolios.

Bradley Taunt website
Bradley Taunt

The combination of the colorful space background with the chunky and carved out foreground is a simple technique but creates a stunning look. I think a bit more tweaking is needed with some of the paddings and margins andparagraph text (especially for a wide, one-column layout). The taller text shadow on hover effect is another technique you can easily pull off with CSS3.

Social Media Weekly

Design, Business, Identity – The Personification of Design
How well designed and well maintained is your online persona via your social media profiles?

CSS – The future of CSS layouts
A discussion of new CSS3 modules for better control over laying out content.

User Experience – Think Outside the Box, but Don’t Forget the Box Exists
Have fun, but still be consistent and considerate!

The Best WordPress Social Media Plug-ins

July 15, 2010 By Hyde

If you write on a weblog for commercial purposes it’s of importance to make your content shareable through social networks like Facebook, Twitter and Delicious to name a few. Social media functionality is as unmissable as having a title for your weblog.

While having social media functionality is a must it must not be overdone. A lot of websites offer share options to all existing social networks, some I have never even heard off. I find that one of the most annoying things on weblog articles are the bazillion icons lining the post at the end or on the side.

It is best to think which social networks are more favorable for your kind of weblog and add those functionalities accordingly. Make sure the buttons won’t overflow in your design and that they are not a sore to the eye. For getting started you can’t go wrong with adding a Twitter, Facebook, StumbleUpon and Delicious button.

To get you started I’m giving you a list of 10 great social media plug-ins for your WordPress site. Plug-ins that contain most social networks and individual plug-ins for Twittter, Facebook and Google Buzz. All plug-ins let you define which social network buttons you want, use them wisely.

SexyBookmarks

sexybookmarks

Sociable

sociable

ShareThis

sharethis

TweetMeme Button

tweetmeme

Share on Facebook

facebooksharethis

fbshare.me

fbsharecount

Add to Any

addtoany

Light Social

lightsocial

Google Buzz Button

googlebuzzbutton

Facebook Like Button

facebooklikebutton

The Best Social Media Icons

May 20, 2010 By Hyde

Social Media has become the norm on websites and weblog, if you want more interaction, higher traffic and incoming links your website needs to be social media ready. And with that social media icons are indispensable.

I have listed twenty some top icons divided into two categories, a standard one with icons that will fit in most designs and an artistic category with icons that require a fitting design.

Standard uniform icons

Social Media Network Icons

62 unique icons of 32 by 32 and 16 by 16 in PNG format. The set includes some nice ones of WordPress, Readernaut, Evernote and even Google Voice. Off course it also has the popular ones like Facebook, Stumble and Twitter. These icons go well on a light or dark background and are thus usable in majority of designs.

Get it!

Glossy Social Icons

A set of 20 glossy icons of 82 by 82. This sets comes as one PSD file which means you can
easily customize the icons for your own use. Not handy for people without Photoshop or Photoshop skills but a jewel for others.


Get it!

A Life in Pixels Social Icons

Icons

Sixteen 32 by 32 PNG icons monochromatic which goes with all possible colors in a design.

Get it!

Circular Social Media Icons

Icons


Get it!

Chrome Social Media Icon

Icons


Get it!

Elegant Themes Social Media Icon Set

Get it!

Polaroid Icon Set

Icons


Get it!

Social Media Mini Icon Pack

icons


Get it!

Whitewashed Star Patterned Icons Social Media Logos

Icons

Get it!

Simple Black Square Icons Social Media Logos

Icons


Get it!
– Also in red

Matte White Square Icons Social Media Logos

Icons


Get it!
– Also in grey

Artistic Icons

The following icons are more artsy/artistic and don’t fit just like that in any design. You’ll need to have a very basic design or build your design around the icons. But these icons are more eye catching and out there then icons that are more uniform.

Yellow Comment Bubbles Icons Social Media Logos

Icons

Get it!

Yellow Road Sign Icons Social Media Logos

Icons

Get it!

Socialize Icons

Icons

Get it!

Pagepeel Social Icon Set

Icons

Get it!

Heart Social Icons Set

Icons

Get it!

Handycons

Icons

Get it!

Handycons 2

Icons


Get it!

Hand Drawn Doodle Icon Set for Bloggers

icons

Get it!

Social Icons

Icons

Get it!

Web 2.0 Origami

Icons


Get it!

Next Page »

Code & Tutorials

Which Front-End Development Languages Will Grow in 2017?

Your Guide to Leveraging APIs as a Developer

Bitcoin Processing Website Integration For Web Developers

Website Security For 2016 That All Developers Need To Know

5 Reasons You Need to Be Using jQuery

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge

5 Ways to Use Social Media to Make Money

Search