Using Open Graph for Facebook link sharing - facebook

I've set up some OG meta data on my site so that when sharing a link, it displays a nice logo which I have created specifically for Facebook (it's square on a nice coloured background so it looks good on the site.)
However with this in place I am now no longer able to choose any other image. I was hoping for the logo to be the default but for the link sharing to still allow me to scroll through thumbnails from the page. Now it just gives me the option for the logo and nothing else.
Is it possible to set both a specific og:image and still have access to the thumbnails functionality on Facebook?
Here is my metadata:
<meta property="og:image" content="http://www.mysitehere.com/images/oglogo2.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />

You find your answer here:
How does Facebook Sharer select Images and other metadata when sharing my URL?
Quote: "You just need to add multiple image meta tags in the order you want them to appear in. The user will then be presented with an image selector dialog."

Related

Facebook sharing image not showing up

I have implemented AddThis sharing functionality in my Umbraco CMS website.
<meta property="og:title" content="AddThis Tour" />
<meta property="og:description" content="Watch the AddThis Tour video." />
<meta property="og:image" content="http://i2.ytimg.com/vi/1F7DKyFt5pY/default.jpg" />
In their documentation they mentioned if we pass image in meta tage like below it will showing up in share popup. I have puted all meta tags in my pages and tried that but image, description and title are not coming up from meta tags.
http://www.addthis.com/academy/how-to-optimize-facebook-sharing/
Even while in facebook popup window in URL Description, Title and Image are same as that provided in meta tags but in Actual sharing, it is displaying different title and description.
I tried Addtoany sharing tool but in that also not get success same thing happening in that also.

facebook share button not displaying content

Alright so I have set my meta tags exactly how it says on the facebook developer page, and the scraper even shows the data that will be showed to be correct, but when using the facebook share button on my website http://www.etdigitaldesign.com/, all that it shares is the website url, it doesn't include any of the information from the meta tags, that the scraper says it should. No site name, no description, no image. just the website URL.
This is really confusing to me because the scraper says the share button should be showing the proper info, and I'm using a copy/pasted code snippet from the fb developers page, so I can't see what my error could possibly be...
here is what the scraper shows:image at http://i.imgur.com/zNIyhfg.png since I can't post images yet.
and here's my meta code:
<meta property="og:url" content="http://www.etdigitaldesign.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ET Digital Design" />
<meta property="og:description" content="Currently doing a grand opening special, making several free websites to get my name out there. Visit the site if you are interested!" />
<meta property="og:image" content="http://www.etdigitaldesign.com/images/etlogobig.png" />
All facebook's examples have self-closing meta tags, so try that and then re-scrape, if that still doesn't work add a fake parameter eg http://example.com/?20 and scape
At the moment the title and image are showing, just not the description. It shows HHTP status 206,which is partial content, but that's not a problem

Change photo for facebook like pop up window

Just add Facebook like button into my website. After clicking it, a window pop up to let user input comments and with the text content from my website. There is no problem for it after I input correct site URL. However, the photo in the pop up windows is still the default one (like a sun). How do I replace it with the photo of the logo of my website?
Add og tags to your url. Here's the doumentation for the same.
You just have to add some meta-tags:
<meta property="og:title" content="{title}" />
<meta property="og:image" content="{img_url}" />
<meta property="og:description" content="{description}" />
<meta property="og:caption" content="{caption}" />
and so on..
You can also check if the og:tags are read by facebook properly or not in Debugger, just put your url in there and facebook will show you the tags or show errors if any.

Custom image for facebook link sharer

Using graph API, I can set a custom image to be displayed when sharing link from my app. But, when a user shares a link of my website manually, a random image of my website comes in rather than my logo. So, is there a meta tag or something using which I can set a custom image as the image to be displayed in the link description box of facebook? Thanks in advance...
What you want to add are the Open Graph tags so that Facebook can parse your website more easily than its default parsing. The <meta> tags required are
<meta property="og:title" content="Page's Title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://yourwebsite/article" />
<meta property="og:image" content="http://yourwebsite/images/displayImage.jpg" />
Thank you Anvesh. I applied your suggestion, but in my case it is not working, as it should.
If I post my link page to the wall, it's ok, the image is showing. But if I post via url share/sharer.php, image is hidden, except on some web image host like imagilive.com (weird).
But, anyway, after posting the page url in the facebook debugger, all I did which failed before, is done with success.
I can handle the issue this way, but I have to do it with every page. Just imagine you have a photo gallery with each image shareable.
I need a better solution or a fix.

The image to show when a web page is shared in facebook

I've a web page and I want to share it in facebook but the image shown is not ok.
In the HTML code of the web I have:
<link href="http://www.example.com/img/logo2.png" rel="image_src" />
In the options to select the image, there are other images, but not logo2.png
I've tried to delete facebook cache with facebook debugger, but the result is the same.
Edit:
If I add ?v=1 to the end the URL when I share it, the logo option is shown. It means that facebook debugger is not deleting the cache.
Also, I want that the logo image be the first option.
Can you help me?
Solved:
<!-- facebook tags -->
<meta property="og:image" content="http://www.example.com/img/logo.png"/>
<meta property="og:url" content="http://example.com">
<meta property="og:title" content="Portfolio | web">
<meta property="og:description" content="Portfolio">
I think that you may be using the wrong tag. I haven't done this in a while, but I believe that it should be a <meta tag with a property="og:image" and then content set to your image. The following (really old) question addresses this issue/conforms to what I remember: How does Facebook Sharer select Images and other metadata when sharing my URL?
Let me know if it works :)