Hi everyone! This particular message is for anyone who has a blog (specifically through blogger) and is frequently posting links to their blog on other social media sites like Facebook. The default thumbnail that shows up when you copy a link to one of your blog posts into facebook is typically the first picture of your blog post, however, you may not necessarily WANT this to be the thumbnail that shows up. So I made a video to describe the process of how to change the html code of your blog to get Facebook to recognize a different image in your blog post as the default thumbnail. You can set this for as many of your posts as you want. The process is described in the video below and then I have some associated pictures, links, and coding that you will need to use below that (each of these is explained in the video). Hope this helps!
Screenshot of my coding which is in the header section of my html code of my blog template:
Code that you will need to copy:
<b:if cond='data:blog.url == "http://katelynlesk.blogspot.com/2016/01/how-treat-free-challenge-facebook-group.html"'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTNmBrgGf2Pi3erR5iJ6qYkVxkKxghahJc1rWwN1JsAdAD-ooa5NY94tslilI9mMMm2PKbdzM55s0eXrJ424w6Td2AW0Q96YiVmuPBHRZlqG9jm4wgMfrvajw-vLp0yrm7rSk98mzdhao/s320/20151229_103846.jpg' property='og:image'/>
</b:if>
Copy this code word for word- every symbol is important! You will need to replace http://katelynlesk.blogspot.com/2016/01/how-treat-free-challenge-facebook-group.html in the code with the link to your specific blog post and https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTNmBrgGf2Pi3erR5iJ6qYkVxkKxghahJc1rWwN1JsAdAD-ooa5NY94tslilI9mMMm2PKbdzM55s0eXrJ424w6Td2AW0Q96YiVmuPBHRZlqG9jm4wgMfrvajw-vLp0yrm7rSk98mzdhao/s320/20151229_103846.jpg with the link to the image that you want to be the thumbnail that shows up when pasting the link to your blog post in social media. The link to the image can be found in the blogger editor of that specific post as described in the video tutorial.
Debugger used to test your links and check for which picture is showing up as the open graph image:
Good luck! Let me know if you have any questions!
I'm having this issue but I don't find this helpful. As feed back can you:
ReplyDelete(1) please number each step of your instructions
(2) Each step should be manageable
Flawless! Thanks much :)
ReplyDeletethank you so much
ReplyDeleteI found that the instructions have changed since this was posted, but just having this and the video helped me find new instructions--and the debugger link was very helpful. Thank you for this post!
ReplyDelete