So you’ve added a Facebook share button to your site, or a Facebook comments box to your blog, but the image that is linking is not the image you so carefully selected for your article. Bummer huh? That’s what happened to me when I recently added a FB comment box on my blog. I excitedly added the comments box and did a test, but the image coming up was the “subscribe for email updates” envelopes on my footer. Which is not what I want every single liked article to show! I was able to find some documentation on adding
og:image tag in order to have the right image pulled up, but I don’t want to have to do that manually for each post. And since I use WordPress, I don’t want to have to update individual meta data when I have a common header.
Fortunately I came across this great article on Moneytized, which walks you through automating this process. And they offer solutions whether your theme supports Featured Images or not. I’ve shared that portion below, as my main issue was the image, not so much the description or the title.
Setting the Featured Image as the default image Facebook will show
Many WordPress themes support the relatively new feature of “post thumbnail”. Usually, authors choose an image relative to the content; it would be a good idea to include it in the meta-information of the web page. Again, add this just below line 5 of the code above:
<meta property="og:image" content="<?php $post_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); echo $post_thumbnail; ?>" />
For themes not supporting post featured images, one may use the first image found inline in the main content:
<meta property="og:image" content="<?php preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); echo $matches; ?>" />
You can read the full article originally posted by Nikolaos Anastopoulos on 11/14/11 to Moneytized.
I definitely scored in finding this post from 1stwebdesigner that not only showcases some amazing and inspirational website effects, but also provides tutorial for recreating them!
My favorite effects has to be the Nike Better World Parallax effect, which I immediately posted on my Facebook wall. Go ahead, visit the Nike page and scroll down. Awesome, right? I’m definitely looking for an opportunity to implement something similar on an upcoming design.
Have you ever come across a website with such a great design or effects that your inner voice screams wow, making you wonder how it would be possible for you to recreate the effect? The purpose of this article is to provide you with resources and insights about how you can learn from your favourite websites, learning and taking advantage from real implemented effects and functionalities.
So let’s get started! […]
Just discovered Google Webmaster Central which has a ton of helpful tutorials and Q&A.
This is the official YouTube channel for Google Webmaster Central, your one-stop shop for webmaster resources that will help you with your crawling and indexing questions, introduce you to offerings that can enhance and increase traffic to your site, and connect you with your visitors.
Can coding errors affect how a page is indexed? Can switching to HTTPS harm ranking? Should internal links use rel=”nofollow”? Visit the Google Webmaster Central YouTube Channel for the answer to these and many more questions.
In the meantime, below is a sample video answering Is there a limit to how many 301 (Permanent) redirects I can do on a site?