Like any self-respecting small business, Smashing Boxes is working on its LinkedIn presence. When sharing posts from the SB blog to the LinkedIn company page we noticed that some images were cropped smack in the center. LinkedIn does not have an image cropping tool so there is no way to control the image preview. Unless images were marked as the “Featured Image” within WordPress, the thumbnails created by LinkedIn were pixelated and distorted. By attempting to solve the thumbnail issue we discovered a couple of workarounds.
Due to the centering of LinkedIn’s crop, the Stealz logo is missing a few elements.
Solution 1 (decent)
After a little sleuthing, it appears LinkedIn pulls in the first two pictures from shared WordPress posts. In order for pictures to appear as expected on LinkedIn we would have to upload an image that meets the LinkedIn thumbnail dimensions of 180 X 110. Considering the small size, inserting an image optimized for LinkedIn might not work well with the rest of the post’s content.The small image problem can be solved with a little tinkering. Once your image is scaled down and inserted into your post, change its width to 1 and the height to 1. Also, add a style of opacity 0 to your image, which will hide it completely. The new width, height, and opacity will ensure there is not a huge chunk of white space within your WordPress post. After publishing your post and sharing the url on LinkedIn, you should have a non pixelated, non stretched image as the thumbnail:
After applying our first workaround, the thumbnail displays as intended.Here’s the code for Solution 1:
<img style="opacity: 0;" alt="stealz3" src="<a href=" http:="" placehold.it="" 180x110"width="1" "=""><a href="http://placehold.it/180x110" width="1" "="">http://placehold.it/180x110"width="1"</a> height="1" />
Solution 2 (better)
While the first solution works as a quick fix, if you’re a styling perfectionist the previous work around may prove to be a little too hacky. Even though we made the image “disappear”, it’s still in the DOM and may cause more white space between paragraphs than wanted. Fortunately, we discovered a more stable (and intricate) fix which we are using on this very post.
Open Graph and WordPress Meta box
The Open Graph protocol is a single technology that provides information to represent your webpage. Using Open Graph meta tags allow developers more control over how a piece of shared content is displayed on social networks like Facebook, LinkedIn, and Google +, making it handy for cross-platform social strategies.
Adding Open Graph to your WordPress theme
As noted above, Open Graph tags have to be added within the HEAD tags. So we added the following code to our Header.php file:<meta property="og:url" content=""><meta property="og:title" content=""><meta property="og:description" content=""><meta property="og:type" content=""><meta property="og:image" content=""><br>By looking at the tags we can intuit their meaning: Og:url is the url of the post/page, Og:title is the title of the post or page, Og:description is the description of the content we are presenting, Og:type is the type of content (e.g., “article” or “video”), and Og:image is the url of the image you wish to describe/show.For a static HTML file we could simply hardcode the content. In other words we could put<meta property="”og:title”" content="”How" to="" implement="" open graph="" with="" wordpress“="">into the HEAD of a page and that title will appear when it is shared. Because WordPress pages are dynamic PHP code, that technique does not apply. Instead, the content of the meta tag will depend on the page or post. Using WordPress template tags to dynamically populate the metadata we get the following:<meta property="og:url" content="<?php the_permalink(); ?>"><meta property="og:title" content="<?php the_title(); ?>"><meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>"><meta property="og:type" content="article"><meta property="og:image" content="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>"><br>The highlighted code tells WordPress, “If I’m on the ‘Home’ page, output the homepage url, title, description, and featured image”, “If I’m on the ‘About’ page, output the data related to the about page.”From now on we’ll focus on the og:image tag since it’s where social networks such as LinkedIn and Facebook pull image data from.
Featured Image, to be or not to be?
The code above retrieves the selected featured image and inserts it into the og:image tag. What if you don’t always want to display a featured image? If you repost every piece of content from your blog onto a social network without selecting a featured image, the result will be no content pulled into the og:image tag. The solution is to always add a featured image with the option to choose whether or not to display it.In order to accomplish the stated goal of providing an option to display or hide the featured image within a post, we first made a meta box. Let’s grab a generic one from the WordPress codex:/* Define the custom box */add_action( ‘add_meta_boxes’, ‘myplugin_add_custom_box’ );/* Do something with the data entered */add_action( ‘save_post’, ‘myplugin_save_postdata’ );/* Adds a box to the main column on the Post and Page edit screens */function myplugin_add_custom_box() {$screens = array( ‘post’);foreach ($screens as $screen) {add_meta_box(‘myplugin_sectionid’,__( ‘My Post Section Title’, ‘myplugin_textdomain’ ),‘myplugin_inner_custom_box’,$screen);}}/* When the post is saved, save our custom data */function myplugin_save_postdata( $post_id ) {// First we need to check if the current user is authorised to do this action.if ( ‘page’ == $_POST['post_type'] ) {if ( ! current_user_can( ‘edit_page’, $post_id ) )return;} else {if ( ! current_user_can( ‘edit_post’, $post_id ) )return;}// Second we need to check if the user intended to change this value.if ( ! isset( $_POST['myplugin_noncename'] ) || ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) )return;// Third we can save the value to the database//if saving in a custom table, get “”"”"”"”"”"post_ID$post_ID”"”"”"”"”"” = $_POST['post_ID'];//sanitize user input$mydata = sanitize_text_field( $_POST['myplugin_new_field'] );// Do something with $mydata// either usingadd_post_meta($post_ID, ‘_my_meta_value_key’, $mydata, true) orupdate_post_meta($post_ID, ‘_my_meta_value_key’, $mydata);}/* Prints the box content */function myplugin_inner_custom_box( $post ) {// Use nonce for verificationwp_nonce_field( plugin_basename( __FILE__ ), ‘myplugin_noncename’ );// The actual fields for data entry// Use get_post_meta to retrieve an existing value from the database and use the value for the //form$value = get_post_meta( $_POST['post_ID'], $key = ‘_my_meta_value_key’, $single = true );echo ‘<label for="”myplugin_new_field”">’;_e(“To Show featured image type, ‘show’ “, ‘myplugin_textdomain’ );echo ‘</label> ‘;echo ‘<input type="”text”" id="”myplugin_new_field”" name="”myplugin_new_field”" value="”‘.esc_attr($value).’”" size="”25″">’;}?><br>After adding the above sequence to functions.php in your theme, notice you now have a meta box in your posts. Now let’s configure it to give us the option to display or hide the featured image. Notice the code in the red, the $value is the variable that points to the content we type in our meta box. We can use that value to decide whether or not we want to show the featured image.In your template find where the featured image is displayed. Generally, the image will be in the single.php file of your theme, but it may be in more than one location. For our purposes we just want the option to display or hide the featured image on a single post, which will be the single.php file in your template.The featured image syntax, once located, will typically look like the following:<?php the_post_thumbnail(); ?><br>Now edit the code to work with the meta box.<?php//Get the value$value = get_post_meta(get_the_ID(), $key = ‘_my_meta_value_key’, $single = true );//If the value is showif ($value == ‘show’) {//Show the thumbnailthe_post_thumbnail();}?><br>The code above retrieves the value of the meta box and if the value is “show”, it will display the featured image. If the “show” text is not in the meta box the featured image will not display, but the image’s information will still be pulled into the og:image tag.The workaround allows WordPress users to display or hide featured images by manipulating the og:image tag. By incorporating Open Graph, users allow social networks to display their featured images as appropriately scaled thumbnails.Smashing Boxes is a web and mobile app development company know for creating a lasting experience through bold design and disrupting the status quo. We are entrepreneurs and craftsmen first, and a digital creative agency second. Inspired by our visionary clients, we transform ideas into innovative web and mobile applications. Take a look at our work.Cover photo by Nan Palmero
