Since then i have learned quite a few things and made my Blog better. It's still far from over, and i'm still far from being an expert, but i am progressing, and that's what matters... Every long journey begins with a single step, or something like that hehe...
Today i want to discuss something which has tortured me for 3 days, and i wasted around 8 hours in total just on this one small detail, it drove me crazy. I asked on forums, talked to other bloggers, read other blogs articles, watched Youtube videos, tried a few things i found out about, Nothing Worked!!! I was going crazy and decided to give up a couple of times during those 3 days, but i didn't, and i finally figured it out...
The problem was that when i was sharing my Blog on Facebook, i was only given 1 Option as a thumbnail picture, and that 1 option was my Google+ profile picture of my face. I didn't want my face as the thumbnail every time someone shared my blog, no way... I don't mind my face displayed on my Blog, but not every time it's shared on facebook...
So what i basically wanted was to choose a specific picture to appear as the thumbnail every time my blog is shared. Remember, I'm not talking about a Blog Post, i am talking about my Blog, the Blog's URL, not a post's URL...
Basically, here is how you tell Facebook which picture to give as a thumbnail...
Go to your Blog's Template --> Edit HTML
Then at the beginning find where it says: "<head>" --> Should be on Line: 4
Make a space, and on Line: 6 paste the following code:
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6ilSCBSv_MlxZ6WssqDKCJut2XNoSdimznuSPNWR5FzYNHnoXoq82qOGDFUHDkHBnTZ_Ed_FCb9osDn12dG3I2WgIqXTjaqq5RDbUI8vX3ooQX7rVWgVlUi_i8TCZ0zqGlakxJF-wuFu/s320/soap-bubbles-land-blogspot-com.jpg' property='og:image'/>
</b:if>
In the code, the Red bit, change that URL with your own image that you want to use as thumbnail. Then click on Save template.
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6ilSCBSv_MlxZ6WssqDKCJut2XNoSdimznuSPNWR5FzYNHnoXoq82qOGDFUHDkHBnTZ_Ed_FCb9osDn12dG3I2WgIqXTjaqq5RDbUI8vX3ooQX7rVWgVlUi_i8TCZ0zqGlakxJF-wuFu/s320/soap-bubbles-land-blogspot-com.jpg' property='og:image'/>
</b:if>
In the code, the Red bit, change that URL with your own image that you want to use as thumbnail. Then click on Save template.
Then it's done, Facebook will always give the picture who's URL you wrote in the code. The one problem you may still encounter is the fact that Facebook caches the old image, so it will take some time until facebook makes the change. If you don't want to wait - "Like i didn't, and like i know you won't" - go to this link:
https://developers.facebook.com/tools/debug/
In the box, enter your website's URL, and click debug. This will reset how Facebook views your page, and it will load up the new information. It's done. Now whenever you share your Blog on Facebook, it will give you as the thumbnail the picture you have specified. If you want to have 2 or more pictures as options, simply add as many times the first code with different image URL, and as many as you add, that's how many pictures facebook will give you as thumbnail options... Good luck :)
================================================
Here is my Blog, it's a humor blog, hope you like it :)
http://seriouslyfunnyhumor.blogspot.com/
============================
Find me on Twitter:
https://twitter.com/Lionsnr892
============================
Find me on Google+
https://plus.google.com/+JamesYoung24
============================
+Blog +Free-blog +Blogger +Blogspot +Create-blog +Blog-creation +Starting-a-blog +Starting-blogspot +Creating-blogspot +Gmail +Google +Website +Personal-blog +Blogger-tutorial +Facebook +Facebook-thumbnail +HTML +Blogger-HTML +Facebook-cache +Facebook-preview +Website
Picture --> I took the Screenshot from Blogger's page
↠ This post was originally published on Bubblews in the Tutorials category by me (Bubblerian) on August 13th 2013.
No comments:
Post a Comment