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.
Related
I want to do the thing which is shown in this image
If you see in the above image the container contains the link URL and image which is fetched from that URL...
How it is achieved using HTML and CSS?
Well, to achieve such a thing you need to use the open graph protocol meta tags in your HTML <head>, to enable social media graph read your metadata. There are several tags that are available within the open graph protocol but the main ones are:
og:title: The title of your object as it should appear within the graph, e.g., "The Rock".
og:type: The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image: An image URL which should represent your object within the graph.
og:url: The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
NOTE From the moment that you add these meta tags to your HTML <head> it may take a while (1-2 weeks) until they get read by social media graphs.
Like normal web applications I want to implement social sharing by providing share button for this I have defined the meta tag in my current html component but It's not showing the image. I think in angular there is some different way of implementing social sharing.
share.component.html
<meta name="twitter:card" content="summary"/> <!-- Card type -->
<meta name="twitter:site" content="Pratyashi"/>
<meta name="twitter:title" content="Pratyashi From Title">
<meta name="twitter:description" content="Description" />
<meta name="twitter:creator" content="Creater"/>
<meta name="twitter:type" content="image"/>
<meta name="twitter:image:src" content="https://www.gstatic.com/webp/gallery3/1_webp_a.png" />
<meta name="twitter:domain" content="http://vmandi.com" />
tWITTER
This code just displays a text : Twitter which takes to a link. If you want image associated with it, just add an <img> tag. And kindly explain what you actually want to do. meta tag is mainly for SEO purpose.
More about meta tags: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
Hope it helps: Angular6 Social Share Demo
When I shared a link on the Facebook, Facebook only show the last or previous of my Website.
New title: Kirk Niverba | Official Website
Old Title: W3Schools Web Development
Picture Titles | Facebook
Note that in the "New Title" is scriptly edited on Facebook (Inspect Element edit)
Thanks for someone will notice this =)
I think i understand. In order for you to do this, look specifically at this link
https://developers.facebook.com/docs/plugins/like-button
Which gives you some ideas about how to specify the content shown on Facebook once someone shares your web page, on their FB page.
Also for some added reference, check this links as well.
https://developers.facebook.com/docs/sharing/web
It will give you what you need.
EDIT*** specifically, when you add it properly, these lines will give you exactly what you need alongside an image for your post/share.
<head>
<title>Your Website Title</title>
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
Otherwise, FB uses old/current page data at random i believe. Or based on a percentage of the top 1/3 of the page(if i remember correctly).
i'm using this meta tag to show description on facebook when user share the news. I'm using ShareThis to share the news...
<meta property="og:title" content="<%=RSnoti("Titulo")%>"/>
<meta property="og:image" content="http://alsite.com.br/robertoengler/<%=replace(RSnoti("foto"),"../","")%>"/>
<meta property="og:description" content="<%=RSnoti("texto")%>"/>
As you can see here: http://alsite.com.br/robertoengler/noticia2.asp?id=1.
I'm usign ASP Classic to call the Title, Image and Description, but only description is showing above the content page
How i can fix that??
try like this
<meta property="og:title" content='<%=RSnoti("Titulo")%>'/>
<meta property="og:image" content='http://alsite.com.br/robertoengler/<%=replace(RSnoti("foto"),"../","")%>'/>
<meta property="og:description" content='<%=RSnoti("texto")%>'/>
The content of the content contains HTML markup. It should contain only plain text. So the first quote in the content fouls up your page.
So you should sanitise what goes in there. Either remove all HTML markup, or change things like quotes into entity references like ".
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>