Every time I copy a link from popular news channels like TNW, Engadget, etc. I have a very nice sharing view (with a thumbnail that I may select, a bold title, and a short summary).
When I do the same with an article from my website, it does not look as nice.
How can I customize how my Facebook share will look?
You need to embed the Open Graph (OG) meta tags into your page to give the facebook page scraper a chance
http://davidwalsh.name/facebook-meta-tags
EDIT
the facebook debug tool should help interpret what is being read
Related
Trying to share a URL on Facebook that displays as a photo in the news feed, like what Flickr is doing. For instance, if you try to share this url on Facebook: https://www.flickr.com/photos/kylesipple/17537472375/
It shows up like this:
Using the open graph explorer/debugger, I don't see anything too terribly special with that page's meta tags:
Any one have ideas on what's needed to achieve something like this?
Not sure what are you asking exactly. If it is simply how to share a URL on Facebook that displays as a photo in the newsfeed you just need to set the proper Open Graphs tags (i.e. og:image). If it is something else, can you clarify?
You can find more information about photo sharing here:
https://developers.facebook.com/docs/sharing/webmasters
https://developers.facebook.com/docs/sharing/best-practices#images
This is my post featured image.
This is my post entitled "First post" with social icons at the bottom for sharing using social media feather plugin
This is what shows up when I clicked the facebook button
The image above shows that it doesn't return the right image set as featured image for the first post to be shared in facebook. I also encountered the same problem using WP Social Sharing. Can anybody help me solve this please. Thanks a lot.
Facebook, and other platforms that allow social sharing (LinkedIn, Twitter, G+, etc), all use a protocol called OpenGraph.
In it's simplest form, OpenGraph is a series of meta tags placed on a web page that describe that page. Common tags include a title of the page, description, image and a category. It is this OpenGraph image that Facebook uses in it's preview for the social share.
The tag itself is called og:image, and Facebook suggest it is at least 1200x630 pixels, although they will still use the image if it is less than that. As a side note for anyone viewing this thread and having the same issue with Facebook apps - you'll need to serve the image over HTTPS for that, something you don't need to do in this case.
I would suggest viewing the source of your page and finding the OpenGraph tags. If none are present (very possible) then Facebook is just doing it's best based on what it sees on the page. You can remedy this by adding your own tags, or using one of the many OpenGraph plugins available for WordPress.
More information on Facebook's best practices for social sharing are available.
This is my first attempt with social share buttons on a classic HTML website (not a CMS).
I understand that social meta tags are now the way to go as you have more control on what you are sharing (you can have more control on the title, the picture, the description, the content type etc..).
What I don't get is how to share a specific article only when you have ten articles displayed on the same page.
All the tutorials I read about sharing buttons are dedicated to a whole web page but I would like to share a specific section of the page per button, not the whole page (one page = 10 articles = 10 share buttons).
How would I achieve that?
Thank you.
(Bonus question: are social meta tags shared by FB, twitter and linkedin or are they only dedicated to FB?)
I don't know if you are still struggling with this, but I've just been thinking about a similar-but-different problem, with a one-page site where the content is swapped out dynamically so that it is not possible to change the og: tags in the header.
The solution requires generating individual pages for each specific article that have their own with dedicated og: tags. Then in your page which lists 10 articles, each one has a share button where the link points to the specific article page, e.g. <a href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/article1.html">.
When some clicks the share button, facebook will crawl the target url for og: tags, not the page you are currently on.
In your case the solution is pretty straightforward, as you presumably have individual pages for the articles already. Mine is slightly trickier because I have to generate extra pages which won't be navigated to from my site but exist for facebook to crawl (and to display the right content when people arrive via the social shares).
I am currently working on a rebranding with my company, and I am having some issues with the thumbnails which are appearing next to the facebook posts when someone shares our website. The issue is that our old logo is still appearing in the thumbnail image, and not our new one - not ideal. Is there an easy way of updating the choice of these thumbnails to give the choice of our new logo?
Make sure you have the correct OpenGraph og:tags in your HTML markup and use the Facebook Debugger to scrape your URL and refresh Facebook's caching of your URL; it will show you what metadata Facebook can see for your URL.
So, I've searched and searched this site before posting this question -- I know there is a lot of facebook like questions -- but I can't find an answer to mine.
I have a page VERY similar to Mashable.com. They have multiple teaser articles with LIKE buttons next to each. When you click the LIKE button, you see the article thumbnail, and the article description.
I already have this set-up and it works EXCEPT for the thumbnail and description. They are wrong or not showing up at all. How can I make sure these LIKE buttons are pulling the correct thumbnails and descriptions for each of my articles.
(They are not using Open Graph I don't think, because Mashable.com has no facebook meta tags (and even if they did, the meta tags only specify one thumbnail image, and one title, and one link).
Can anyone tell me how to customise the thumbnails and descriptions for each individual news story?
Thank you!
The href in each like button needs to point to the full URL of that article, which needs to have a full set of open graph meta tags.
Run the (article) page through the debugger at http://developers.facebook.com/tools/debug to make sure the correct tags are present and being detected by Facebook's crawler.
The crawler will fall back to using tags and other non-Open Graph meta tags if there aren't a full set present, but the behaviour in that case isn't easy to debug, especially in relation to the images.
Mashable's like buttons are pointing at page which do have open graph meta tags by the way, e.g. https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmashable.com%2F2011%2F10%2F28%2Fsteve-jobs-tributes%2F