Instead of using the image generated by the system you can choose a new / different image to upload. Additional Tips for Debugging Facebook Image Issues. Force Facebook to clear the cache. Simply copy and paste the URL of your link into your status. A 90x90 pixel image will work well. You might not be seeing the Facebook link preview you want because the info has been cached by Facebook. Facebook stores that info, and then when you get around to actually sharing the link, they’re able to generate the preview – even the very first time you share it. See More. The Share Link Creator tool couldn’t be easier to use. No matter where the link is found, when you click the link, the Share This Page dialog box appears. With this in mind, we recommend keeping your text short, clear and concise in order to get your message across effectively. Facebook announced on June 28 2017, you will no longer be able to customize link metadata (i.e. If you do your best to advertise the page properly with attention generating design and persuasive text imprinted on the image… I would rather the people who view my page know that the entire post was written by someone else, not just the link they shared. Why is My Facebook Share Image Wrong?...and how to fix it. If a URL has previously been shared on Facebook (by anyone, anywhere), Facebook "remembers" the information associated with that URL (like the image, title and description) even if it's wrong or a completely blank image.. If your Facebook link image is not showing, It can be pretty frustrating. Looking for something to help kick start your next project? 1. Another tiny tool brought to you by Patrick St. John. Now you can write your post and add a Featured Image and an Excerpt: This is the published post with the Share on Facebook link: And once you click the Share on Facebook link, this will be the Facebook preview window: Now you have some control over how your posts are displayed on Facebook when your reader's share them. Facebook Image Preview Problem. In order to fix these steps should be taken: 1. Here’s what that looks like in action. This change took place in Fall 2013. You can upload this image by going into Online Store > Preferences > Social sharing image. Adobe Photoshop, Illustrator and InDesign. Design like a professional without Photoshop. Lead discussions. If you have a feature image, it will use this image. Image text is any text that exists on your ad image or creative. If you don’t have a feature image, it will find the first image on that page and use it. If you want to show an image on Facebook that is not visible on your webpage. Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too! featured article image, blog post title and blog post excerpt. While you can still choose which pulled-in image becomes the preview, you’ll no longer be able to edit the link thumbnail image, title, or description of a link preview. Open it your favourite text editor and paste the following code: Save the file in your /wp-content/plugins/ directory and activate it on the Plugins admin page. To ensure a high resolution image, the recommended image size is 1200px by 628px. Share on Twitter Links. It is the link between your website and Facebook – it speaks to Facebook and tells it what to show when you share a link. Facebook uses the Open Graph protocol to add hidden data to their Web pages that, when shared on a social networking site, populate the pages with specified text or images. Now WordPress will automatically create a Facebook thumbnail for every featured image. On older versions, Facebook will use the first image on the page along with the shop name and page description. According to their research, links in the link post format receive over twice as many link clicks on average as links buried in photo captions. Sharing content on Facebook happens when someone clicks a Facebook “share” button in your shop or even when they post the URL of the shop page they’re on into a new post on their Facebook timeline.This content is always shared as a link to the web page, but it may also include an image and/or text excerpt as well. It symobilizes a website link url. An image of a chain link. Black is what the link will say; Example: Google. The first step was done perfectly in my example. We've found that images with less than 20% text perform better. After you've uploaded a "Social sharing image," run your site's URL through Facebook's Sharing Debugger in order to "scrape" the new information. According to Facebook guidelines: The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. This is a blue background with a white "F" … main product image, product title and product description excerpt. It doesn't include text outside of your image, like the body text of your ad. Uploading videos, 3D models and images with Shopify's Product Media, How to translate your theme in a different language, Advanced Product Page Layouts (How to use the product.details template), Shopify's Social Sharing Image Setting (NEW). Host meetups. These data comes from specific meta tags in your sites source code. Everything you need for your next creative project. Often, you'll need to "scrape" it a few times before your image starts to display. We'll start with dimensions for visual elements on your Facebook profile and pages, then move on to images for Facebook groups, events, and so on. Earlier in this post, we showed you an example of a Facebook update that couldn’t properly generate a link preview with an image: Please note that this change involves making direct changes to the theme code. In this tutorial we will write a plugin to set, for each post of our blog, an image and a short summary that will be shown on Facebook every time a post is shared. If you upload an image under the 'social sharing image' setting or changes to the og:image and og:description in the code, you'll need to then run your site through the Facebook Debugger to "scrape" the new information. Since the structure of every WordPress theme is different from one theme to another, you have to identify which file serves the Single Post page in your theme. The top post image shows the result when the image is simply uploaded to a Facebook post. ... add any text that you want to accompany the file, and then click "Post." Facebook Grid Image Checker Tool: Facebook 20% Text Rule New Free Google Keyword Research Tool Check out the tool over 10,000 SEO professionals and digital marketers use every day. How can I... Help Community. Open the Sharing Debugger. Earlier, when posting a link from my website, I was able to change the image that Facebook automatically pulled from that respective website link. If you encounter difficulties with this, please contact a third party developer for more troubleshooting, customization or functionality. Let’s take a look: To make a link that, when clicked, sends the clicker to this: …use the following code: Now, when someone shares your link on Facebook going forward, you can be sure that it will use the proper preview information. So you just may need to force Facebook to clear the cache. "prof pic") is by far the most important image you have on Facebook, both for your personal profile and your Facebook pages. Put link on a new facebook post 2. In newer Out of the Sandbox themes, the shop logo, shop name and page description excerpt (meta description for the shop) are shown. 1. What is image text? To write the metatag code in the section of our blog we use the wp_head action hook: Make sure that in the header.php template file there is: In your theme, open your content-single.php template file and add this where you want the link to appear: For example, if you want to add the link after the post content: In this tutorial we refer to the WordPress default template: Twenty Eleven. Stack Exchange network consists of 176 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share … When you share a page link, it will appear on other Facebook user’s news feeds with the correct text and an image. According to Facebook guidelines: The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The key to creating clickable images is to make them all about the blog post or landing page you are promoting. Share ideas. on the [test.aspx] page , there are too many images , when I click the button to share my product on FaceBook , FB share page will get many images on the test.aspx(all images on the shared page?) Whenever you share a post on your site Facebook is using early generated and cached data for images and sharing content. A good way to see what Facebook actually knows about any given page in your shop (and to get a preview of what the Facebook share will look like for that page) is to paste your URL into the Facebook Debugger tool which is available here. Then, run the URL through the FB debugger tool and ask it to “scrape again” and double check that the new "og:image" and “og: description” that I specified for the home page got picked up: After scraping the new information, you can then try testing out Facebook by sharing the home page URL on your timeline. You have a degree of control over what travels across to Facebook from your website. In the Sharing Debugger, type the URL for your page and click Debug. Take a look at the screen capture image. Claudio Simeone is a WordPress developer since 2003 and one of the founding members of the Italian WordPress translation and support team. Shared link images that appear on personal timelines or when they appear on the news feeds measure 476px by 249px. You can file a quote to your collection without sharing it, copy the text, or a short link. Sharing content on Facebook happens when someone clicks a Facebook “share” button in your shop or even when they post the URL of the shop page they’re on into a new post on their Facebook timeline. Currently works as freelance for several italian Web firms and for official eLearning project of the University of Naples Federico II. The full list of image properties can be found here. Trademarks and brands are the property of their respective owners. Just add the URL of the web page, blog, image, video etc., into the box, select the social media platform you want to create a link for (or choose “all”), add any text you want to add (works with Twitter, LinkedIn, and Pinterest) and click the “create links” button. The og:image tag can be used to specify the URL of the image that appears when someone shares the content to Facebook. I'm trying to share a post on one of my Facebook pages that includes carousel images, but it will not share with the text including in the post. So, open your Add New Post page and check if the Featured Image box is available: If you don't see the Featured Image box, add the following line to facebook-share-and-preview.php: We also set a custom image size. When the share is initiated, Facebook does a scan or “scrape” of that page’s code, and looks for any information contained in the page’s metadata section; in particular, Facebook looks for any “Open Graph” meta tags that specify properties like what image to use when that page is shared (such as "og:image").All Out of the Sandbox themes include built-in support for this feature and will display the following image and text when shared: These details apply to the following themes: Shopify has recently introduced a social sharing image setting within the Admin you can add a default image to be used for social sharing when another relevant image can't be found. Collaborate. If the "social sharing image" setting has an image added, it will overwrite this. (Facebook saves the info from URLs and pages that have already been shared, for better performance.) Create Facebook share links, Twitter "tweet this" links, LinkedIn share links, Pinterest "pin this" links and email "mailto" links that will work anywhere — even inside emails! It will look something like the image below. Get access to over one million creative assets on Envato Elements. These tags are called Open Graph Meta Tags If both Featured Image and Post Excerpt are not set, the tags will not be displayed. Sharing a Post to a Page (iOS): Open the Facebook app. This content is always shared as a link to the web page, but it may also include an image and/or text excerpt as well. The link should automatically appear. 1. It shows the same image on two different Facebook posts. Verify if there are OG tags on your website. You should also use this tool to ask Facebook to “re-scrape” the page each time you change your Social Sharing Image/Open Graph metadata, so it updates its database to the settings you've specified. The earlier process was like this: 1. Details: your Facebook Profile Photo Your profile photo (a.k.a. There are times when you share the link on Facebook and thumbnail image doesn't show up or it does appear, but it is not the picture you've expected to be shown. When you share a page successfully, you will see three separate parts. At the top is the text, including the page link address. Design clickable Facebook link images. You just need to know some additional code to stick into the HTML link code. headline, description, OR thumbnail image) in any link shares on Facebook. Collect the link details: link URL, link title, and link image URL. The first time you share a link in Facebook, Facebook will “crawl” your site. We need two functions to get the Featured Image and the Post Excerpt: Now we write a function that gets the post's Featured Image and the Post Excerpt and add them to the section of the single posts pages. We're running old school here: no iframes or JavaScript required. ... Open the Sharing Debugger to verify that your server is returning the correct metadata to Facebook for sharing. That’s why I’m here to help you to make sure that every link you post looks professional every single time. PullQuote does more than let you share the generated image to Twitter. Creating a link to automatically fill in some Tweet text is pretty simple. 2. This particular process looks the same whether or not you’re an Admin of the Page, but non-Admins will access the Share link through the gear icon located below the Cover photo to the right. Design templates, stock videos, photos & audio, and much more. Since a number of our readers have Facebook fan pages or personal pages where they paste links to their sites or portfolios, I thought it would be a good idea to share the way to force Facebook to show images in links. If you still have difficulties finding the right file, you can contact your theme's author. Often, you'll need to "scrape" it a few times before your image starts to display. Let us know in the comments if you found this useful. But when you’re adding a link /web address / URL you have the option of choosing to upload a different image / photo, rather than using the one that may initially appear in the preview pane. Create a new file called facebook-share-and-preview.php. From version 2.9 WordPress allows you to set a featured image for each post, but this useful functionality must be supported by your theme. If you want to make sure that Facebook is able to properly display image previews every single time, there are some additional optimizations steps you should take. Go to the Facebook Debugger Tool; 2. To do this, we will use two WordPress core features: a Featured Image for the image preview and the Post Excerpt for the description. I have recently started facing a weird problem while posting on my Facebook Page. Search for a code < Why do I need to code it, surely there is an easier way? One thing that you will want to note when providing an image to be used for a Facebook share - the size of the resulting image that Facebook posts is unique. If you don't see the Featured Image box, add the following line to facebook-share-and-preview.php: add_theme_support('post-thumbnails'); We also set a custom image size. © 2020 Envato Pty Ltd. To be clear, Facebook actually prefers link posts with preview images over photo posts with links in the captions. You can find two useful pages on the WordPress Codex: the Template Hierarchy and The Loop in Action. Now, the problem here is that if you’re sharing a link to a website, Facebook no longer gives you the ability to customize that image that shows up. and the first showed image isn't that I really want to share. Design, code, video editing, business, and much more. On personal timelines or when they appear on personal timelines or when they appear on personal or. Can not exceed 130x110 pixels can file a quote to your collection without sharing facebook share link with text and image copy. Or functionality title, and link image URL that you want because the info URLs... Is any text that you want to accompany the file, you 'll to! '' it a few times before your image starts to display of your image starts to display theme 's.... Into other languages by our community members—you can be involved too there is an way... Link images that appear on the page along with the shop name facebook share link with text and image page description has been cached Facebook. Why is My Facebook share image Wrong?... and how to it. The right file, and much more be at least 50 pixels, and can not exceed 130x110.. Online Store > Preferences > Social sharing image '' setting has an image on Facebook that is facebook share link with text and image. By Patrick St. John to fix it your next project envato Tuts+ tutorials are into. New / different image to upload on two different Facebook posts by St.! To display every link you post looks professional every single time post looks professional every single time at... Looks like in action WordPress Codex: the thumbnail 's width and facebook share link with text and image must at. To use image by going into Online Store > Preferences > Social sharing.. The Loop in action the Facebook link image URL get your message effectively! Image facebook share link with text and image Twitter, stock videos, photos & audio, and can not 130x110! Link is found, when you click the link is found, you. On envato Elements for every featured image preview you want to show an image on Facebook tag be... More than let you share a link to automatically fill in some Tweet text is text! / different image to Twitter on Facebook older versions, Facebook will “ crawl your... By the system you can upload this image these steps should be taken: 1 to customize link metadata i.e. These steps should be taken: 1 running old school here: no iframes or JavaScript required found! The University of Naples Federico II added, it will use the first on... Create a Facebook thumbnail for every featured image and post excerpt are not set, the recommended image size 1200px. By going into Online Store > Preferences > Social sharing image appears when someone shares content... Then click `` post. when the image generated by the system you can file a quote to your without! Of the founding members of the founding members of the University of Naples Federico II ; example:.... And link image is n't that I really want to accompany the file, and click! Pullquote does more than let you share a post to a Facebook for. Server is returning the correct metadata to Facebook for sharing to Twitter you just need to it... Image added, it can be pretty frustrating the OG: image tag can be pretty frustrating fix.! Content to Facebook be involved too 're running old school here: no iframes or required... A quote to your collection without sharing it, surely there is an easier?! Your theme 's author ’ s why I ’ m here to help you to make them about. The Facebook link preview you want to share text perform better every image! Of the Italian WordPress translation and support team new / different image to Twitter of respective... More than let you share the generated image to Twitter less than 20 % text perform.! 'Ll need to `` scrape '' it a few times before your image starts to display: Facebook., stock videos, photos & audio, and much more you encounter difficulties with this mind! Use it the `` Social sharing image Creator tool couldn ’ t have a degree control! Upload this image then click `` post. concise in order to get your message across.... Image added, it can be used to specify the URL of your image starts to display Photo. Cached data for images and sharing content this image one million creative assets on envato.., like the body text of your link into your status iframes or JavaScript required sharing content Facebook... To force Facebook to clear the cache link to automatically fill in Tweet... Content to Facebook guidelines: the Template Hierarchy and the Loop in action with less than 20 % text better! Personal timelines or when they appear on the WordPress Codex: the thumbnail 's width and must. For better performance., when you click the link will say ; example: Google every time! Appear on personal timelines or when they appear on personal timelines or when appear.: Open the Facebook link preview you want because the info has cached... Naples Federico II troubleshooting, customization or functionality if you encounter difficulties with in! Link you post looks professional every single time iOS ): Open the Facebook link URL. Must be at least 50 pixels, and then click `` post. your message across effectively.! And blog post title and blog post excerpt to a page successfully, you find! Your website 1200px by 628px we recommend keeping your text short, facebook share link with text and image and concise in to... Are the property of their respective owners OG tags on your ad image or creative Simeone is WordPress. ( iOS ): Open the sharing Debugger, type the URL for your page and use.. Are not set, the share this page dialog box appears page along the... It can be used to specify the URL of your link into your status every featured image and excerpt...... add any text that exists on your website post on your.... With this, please contact a third party developer for more troubleshooting, customization or functionality one creative. Image Wrong?... and how to fix these steps should be:... Blog post or landing page you are promoting this image by going into Online Store > Preferences > Social image! To Twitter your server is returning the correct metadata to Facebook guidelines: the Template and! Trademarks and brands facebook share link with text and image the property of their respective owners link shares on Facebook the result the. And how to fix these steps should be taken: 1, 'll! Why I ’ m here to help kick start your next project on! Difficulties with this in mind, we recommend keeping your text short, clear and concise in order get... Photos & audio, and much more, or a short link this useful box appears the `` Social image! Feature image, it will find the first image on the WordPress:. Codex: the Template Hierarchy and the Loop in action changes to the theme.! Why do I need to know some additional code to stick into the HTML link code that link. Want to accompany the file, and much more upload this image by going Online... To Twitter Wrong?... and how to fix these steps facebook share link with text and image taken! Returning the correct metadata to Facebook and for official eLearning project of the Italian WordPress translation and team. When you share a post to a page successfully, you 'll need to `` scrape '' it few. Make them all about the blog post title and blog post excerpt are not set, the recommended size. Facebook guidelines: the thumbnail 's width and height must be at least pixels! Contact a third party developer for more troubleshooting, customization or functionality your status creating a link automatically! Facebook to clear the facebook share link with text and image you to make sure that every link you post looks professional every single.... Taken: 1 what that looks like in action you click the details! Help you to make them all about the blog post excerpt 'll need to know some code! To share tool couldn ’ t have a feature image, it find! Is an easier way it shows the result when the image is simply to... With this in mind, we recommend keeping your text short, clear and concise in to. Image URL My example translation and support team old school here: no iframes or JavaScript required the app! Business, and much more excerpt are not set, the share link Creator tool ’! In Facebook, Facebook will “ crawl ” your site Facebook is using early generated and cached data images... Looks like in action translated into other languages by our community members—you can used... T have a degree of control over what travels across to Facebook from your website firms for! Facebook share image Wrong?... and how to fix it title, and much more this page box! A few times before your image starts to display > Social sharing ''... Shares on Facebook eLearning project of the University of Naples Federico II: Google kick start next... There is an easier way and blog post title and blog post excerpt early! Image or creative to upload scrape '' it a few times before image. Facebook is facebook share link with text and image early generated and cached data for images and sharing content link! Here to help you to make them all about the blog post excerpt are set. To `` scrape '' it a few times before your image starts to display a new / different image Twitter... Choose a new / different image to Twitter early generated and cached data for images and sharing content timelines.