Basically i want to pass an Image url from a post to the open graph image meta tag so i can choose which image to show on a facebook post.
I found this solution, but it only work if your fist image is what you want be shown, it didn't give you control.
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='[The image url]' property='og:image'/>
</b:if>
Thank you
Blogger added the first image as post thumbnail. So you don't have option to show og:image as other one.
Related
Bit of a silly question but when I'm linking my portfolio to external sites like Linkedin, a randomly selected image shows up. How do I change the source for my image so that I can use my logo as the image shown instead?
You can just include your logo as a source to the image in your source code:
<img src="url-to-your-logo" alt="alternative text">
What you need to do is add a reference to the image you want to display in a meta tag with a property="og:image" attribute.
Such meta tags control which information will be displayed when sharing your link:
<meta property="og:title" content="Title Of My Site">
<meta property="og:description" content="This description will appear below the title in a smaller font.">
<meta property="og:image" content="http://mysite.example.com/show-this-instead-of-linkedin-logo.jpg">
<meta property="og:url" content="http://mysite.example.com">
You can check this CSS Tricks article for more information.
Over the last weekend, I installed Twitter Cards on my Blogger blog, however, when I post a link to a post on Twitter, the preview image seems a bit blurry.
https://twitter.com/DailyNickNews/status/986395296350527488
https://twitter.com/DailyNickNews/status/986395007216209920
https://twitter.com/DailyNickNews/status/986394831470637056
When I open the image in a new tab, I get a URL such as
https://pbs.twimg.com/card_img/986394838189924352/9Nw874O_?format=jpg&name=600x314
However, the actual image size displayed is much smaller. In the above example, the image is 392x205.
The code I’m using is:
<b:comment> Twitter Cards for Blogger XML </b:comment>
<meta expr:content='data:view.featuredlmage ? "summary_large_image": "summary"' name='twitter:card'/>
<meta content='https://4.bp.blogspot.com/-qANmiWyhUFg/WtPAtPo65NI/AAAAAAAA5Yw/CJoYJyvpUKMrKEGHxtj0vTLS_x9AJWyDQCLcBGAs/sl600/nickelodeon-logo-nick.png' property='og:image/>
<meta content='# Daily NickNews' name='twitter:site'/>
<meta content='# Daily NickNews' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl.canonical' name='twitter:domain'/>
<meta expr:content='data:view.url.canonical' name='twitter:url'/>
<meta expr:content='data:view.title' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription ? data:view.description : ""' name='twitter:description'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredlmage' name='twitter:image:src'/>
</b:if>
I’m a novice at Twitter Cards and have no idea what to change. The top META tag already says ‘summary_large_image’.
I've tried changing the value of the last META tag to twitter:image from twitter:image:src, however, nothing changed.
The issue is with the data tag data:view.featuredlmage which picks up the image size as set via the post editor. To make sure that the image size picked up by Twitter is always the largest, modify the code as follows -
<meta expr:content='resizeImage(data:blog.postImageUrl,1600)' name='twitter:image:src'/>
I've been working on a blog (blogger) for a friend, and she want's the shared posts to show the post title and not the blog title... How can I accomplish this?
I've already tried to delete the title tag...
<meta property="og:title"/>
But the result is the same... What line of code should i delete or add?
Now, I only have this 4 lines of og code
<meta content='http://lostinthegoodlife.blogspot.com/' property='og:url'/>
<meta content='http://3.bp.blogspot.com/-rVflDp3_oW8/VajTpnLQAxI/AAAAAAAAAig/stX7spBEFts/s320/rita2.jpg?t=12345?' property='og:image'/>
<meta content='567' property='og:image:width'/>
<meta content='567' property='og:image:height'/>
It's my first time editing code on blogger and i'm not really familiarized whit it... So could anybody help?
Step 1: Ensuring correct title of the article
Go to your template editor and paste this(Make necessary changes where applicable in the below code)
<b:if cond='data:blog.url == "http://www.YOOURBLOG.BLOGSPOT.COM/2014/12/YOUR ARTICLE URL.html"'>
<meta content='Can you guess what do these World Maps Indicate ?' property='og:title'/>
<meta content='http://www.YOOURBLOG.BLOGSPOT.COM/2014/12/YOUR ARTICLE URL.html' property='og:url'/>
<meta content='The Best thing on the Internet,today!' property='og:description'/>
<meta content='https://lh5.googleusercontent.com/-XO6XJlYyh6M/VbONBkKs8CI/AAAAAAAANbk/Dt-wbrYGSwY/w1200-h628-no/map%2Bquiz.jpg' property='og:image'/>
</b:if>
Step 2: Ensuring FB cache is cleared
Go to
https://developers.facebook.com/tools/debug/
Click on debug
Then click on Fetch New scrape information.
I'm having a problem with my facebook like button and the webpage. The webpage contains banners and random images as well as the article image, now facebook have removed the share button, though it still works, but with the current like button. Facebook chooses the image automatically, and sometimes it chooses the banners instead of the article image. Is there any alternate way instead of adding properties to the article images? Like exculding all the images but the article image.
This answer isn't necessarily helpful for "excluding" specific images, but you can control what Facebook scrapes off of your page via Open Graph protocol with meta tags. For example:
<meta property="og:title" content="This is my title" />
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://www.mysite.com/redirect/" />
<meta property="og:image" content="http://www.mysite.com/logo.jpg" />
<meta property="og:site_name" content="I'm on Facebook!" />
<meta property="og:description" content="Hello World!" />
This will force Facebook to reference http://www.mysite.com/logo.jpg to use as thumbnail.
Additionally, my blog post on the related subject matter might help you: http://weblogs.asp.net/kon/archive/2011/06/07/trick-facebook-scrapping-of-facebook-tab-url.aspx
I had the same problem. Kon has a good suggestion, but I'd rather have Facebook use the article image and not the logo, so what I did is put all logos and ad banners as background-image through CSS.
Something like this:
<span style="background-image: url('IMAGE OF AD'); width:Xpx; height:Xpx; display:block;"></span>
http://new.sonikastudios.com
I tried everything to get my logo image to be picked as the thumbnail, but this is eluding me! It keeps defaulting to either the Twitter or Facebook button when I try to share this link on Facebook.
<meta property="og:image" content="http://new.sonikastudios.com/images/sonika_logo.png"/>
<link rel="image_src" type="image/jpeg" href="http://new.sonikastudios.com/images/sonika_logo.png" />
Those are specified on the section.. not to mention the img tag is straight-foward:
<img src="/images/sonika_logo.png" title="Sonika Studios Inc." alt="Sonika Studios Inc." />
What am I missing to make my logo the main thumbnail for Facebook shares? Thanks in advance.
Probably because you specified the MIME type as image/jpeg when your image is actually a PNG.
Just remove the type attribute - it's not required by Facebook Share.