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}}}},{"node":{"fields":{"slug":"/engineering/social-media-colors-hex/"},"html":"Are you tired of eye dropping (or worse… guessing) the colors of every social network you like? Fear not my friend, I have searched the webs to find our beloved social media colors and listed it out in hex form.
\nFacebook #3b5998
\nGoogle Plus #F90101
\nLinkedin #007bb6
\nTwitter #55acee
\nYahoo #400090
\nAmazon #FF9900
\nAol #066cb1
\nDelicious #67b6e3
\nDigg #486ca3
\nDisqus #35a8ff
\nFoursquare #1cafec
\nGithub #181616
\nGoogle #0266C8
\nHyves #f9a539
\nInstagram #406e94
\nKaixin #bb0e0f
\nLive #004C9A
\nLivejournal #3770a3
\nMixi #d1ad5a
\nMyspace #313131
\nOdnoklassnikki #f69324
\nOrange #ff6600
\nPaypal #13487b
\nPersona #e0742f
\nPinterest #cb2128
\nQQ #009BD9
\nReddit #ff5700
\nRenren #005baa
\nSalesforce #219CDF
\nStackexchange #4ba1d8
\nSteam Community #666666
\nTumblr #32506d
\nVerisign #0261a2
\nVirgilio #eb6b21
\nVkontakte #45668e
\nSinaweibo #bb3e3e
\nWordPress #21759c
\nMailru #1897e6
\nXing #007072
\nOpenid #f7921c
\nDid I miss anything? Add it in the comments and help build this awesome list.
\n","frontmatter":{"date":"February 06, 2015","updated_date":null,"title":"Social Media Colors in Hex","tags":["SocialMedia","Facebook","Google","Color"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/d2cb1d5026eb68986f33462424c006a3/6d161/darrylblog1-150x150.png","srcSet":"/static/d2cb1d5026eb68986f33462424c006a3/6d161/darrylblog1-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]}},"pageContext":{"tag":"Google"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}