Social sharing button offers an easy way to distribute your content to a wider audience. The major social providers allow options to configure the content that will be shared programmatically. In this guide we explore the options that you can use in order to configure the shared content of your social shares including: Message, URL, Image, and Image Caption/Description.
\nFacebook utilizes Open Graph Tags which are meta tags that can be included on your page and are scrapped by Facebook when determining the content that should be shared with a specific button. These tags can be included in the head section of your page. All meta tags should be formatted with a property value of \"og:
Example of og meta tags that can be included in your html head tag:
\n<!--\n\n\n\n\n\n-->If you are modifying these tags it can take some time for the changes to translate over to Facebook. You can refer to this blog on troubleshooting, testing, and force updating your configured sharing systems.
\nGoogle offers multiple ways that you can set the shared content which it intelligently determines the most relevant details to be displayed in the share. This works to varying degrees with the following options available and taking precedence respectively:
\nBelow is an example of basic structured data markup:
\n<!--\n Your Site Title \n\n\n A description of your site.\n\n-->Below is an example of using basic meta tags to define the shared content:
\n<!--\n\n-->The best way to customize your Twitter shares is to modify the URL query string parameters that gets triggered when the share icon is clicked. Another way is to customize the <a> tag by including data-attribute tags as detailed on Twitters Tweet button creation instructions . If you do not have control over the links or triggers that are being used to activate the Tweet popup you can also set Twitter Card meta tags which handle the Twitter customizations.
<!--\n\n\n\n\n-->Various providers will utilize some of the above methods with open graph tags being one of the most common methods for controlling the shared content. Other systems will customize this content based off of parameters that are passed into the script or URL that is used to trigger the share interface. Getting these to be correctly configured can be a bit of a trial and error process, you can use the resources detailed in this blog post to help test and verify that you have correctly configured your social sharing content.
\n","frontmatter":{"date":"June 09, 2015","updated_date":null,"title":"Configuring Your Social Sharing Buttons","tags":["SocialSharing"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/238b1852ad4d0bf59dc00d0079239993/630fb/configuring-social-share-buttons-300x300.png","srcSet":"/static/238b1852ad4d0bf59dc00d0079239993/69585/configuring-social-share-buttons-300x300.png 200w,\n/static/238b1852ad4d0bf59dc00d0079239993/630fb/configuring-social-share-buttons-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/social-provider-social-sharing-troubleshooting-resources/"},"html":"Social Sharing is an extremely powerful tool to expand your user base and product recognition, customizing and implementing this to be efficient on your site can be quiet difficult. Most of the most relevant Social Providers have setup testing and troubleshooting tools that can help to identify where you have gone astray. Below is a brief overview of some useful tools that have been setup to assist with implementing custom Social Sharing options.
\nFacebook Open Graph Object Debugger
\nSetting up custom sharing with Facebook uses Facebook Open Graph meta tags, which are cached on Facebooks end and can lead to some confusion when making updates to your customizations. In order to identify the cached details that are being used for your implementation Facebook provides the Open Graph Debugger tool. All you need to do is input your sites URL and click on Debug.
\nThis will then crawl your page and display some useful information on the currently scraped details and warnings and error messages. It also give you the option at this point to refresh this scrapped data with any changes that you have made to our existing cached details.
\nGoogle Structured Data Testing Tool
\nGoogle uses a combination of a few different methods in order to define the customized sharing options:
\nThe structured data testing tool allows you to view what Google has interpreted from your webpage. Start by entering the URL of the page that you are sharing and click on preview.
\nInsert the URL in the \"URL to be shared field\" and click on Get Code. This will generate a sample share icon in the preview section.
\nTo test the share functionality click on the generated icon to display the share interface as determined by the provided URL.
\nTwitter Button Generator Tool
\nTwitter also uses multiple systems to determine the content that will be tweeted by the tweet buttons. The most commonly used meta tags, which allow you to set any of the available customizable fields in your tweet.
\nTo test the tweet you can use Twitters button generator. Select the \"Share a link\" option under \"Choose a button\".
\nInput your site URL in the \"share URL\" field, This will cause the Tweet button under \"Preview and code\" to be updated.
\nClick on the generated button to see a sample of the Tweet that has be defined by your URL.
\n","frontmatter":{"date":"February 09, 2015","updated_date":null,"title":"Social Provider Social Sharing Troubleshooting Resources","tags":["Engineering","SocialSharing","Facebook","Google","LinkedIn"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/ee604/social.png","srcSet":"/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/69585/social.png 200w,\n/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/497c6/social.png 400w,\n/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/ee604/social.png 800w,\n/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/f3583/social.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}}]}},"pageContext":{"tag":"SocialSharing"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}