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.
Related
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.
I have created a gallery page, and I want to enable users to share it over facebook. To display the thumbnails I use OG images in the meta tag (dynamically adding them based on the link).
My problem is that when I share the link with the Javascript SDK as well as when I share the link by copy&pasting it to the timeline for the first time, Facebook will only display the first OG image.
If I copy&paste and link for the second time to a timeline (can be of another facebook user as well), it will display all the OG images, with a choice to navigate between them (left and right arrows), but same link shared with Javascript SDK for the 2nd, 3rd, nth time will still display only the first og image.
This is the relevant part of my page construction:
echo"
<meta property='fb:app_id' content='XXXXXXX' />
<meta property='og:title' content='My $VAR1 album' />
<meta property='og:type' content='website' />
<meta property='og:url' content='http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]'
<meta property='og:description' content='This is my album with my photos from $VAR1.' />
";
foreach($db->query("SQL QUERY") as $row)
{
echo "
<meta property='og:image' content='http://linktoimage_$row[0]' />
<meta property='og:image:height' content='350' />
<meta property='og:image:width' content='1200' />
";
}
There is nothing you can do about that; Facebook decides how to display it.
Btw., that you’re most likely creating an XSS vulnerability here (if that’s your actual code) is something you’re aware of I hope? (I am referring to the part where you output $_SERVER[REQUEST_URI] without any further checks or escaping/masking.)
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
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."
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 :)