Sharing articles

Social Sharing is the practice of sharing content from your website on a social media site or application like Facebook or Twitter. It is intended to allow your audience to share your website content within their networks.

Social sharing of articles is not natively supported by Joomla. TEXTman adds support for Twitter Cards and Facebook Open Graph to your Joomla articles by adding additional markup to your webpage making your articles more easily crawlable by popular social media networks like Twitter, Facebook, Google+, and Pinterest.

When you share your article's link the article's title, featured image and description would be visible to your followers. This helps to drive more traffic to your website as the image and description become clickable, and will redirect your followers to your Joomla site when they click on them.

Facebook

Facebook allows for social sharing using the  Open Graph protocol. This protocol enables any web page to become a rich object in a social graph. 

Metadata shared with Facebook has the property prefix og: for example:
<meta property="og:title" content="The article title" />

Supported metatags:

  1. The shared page's URL
    <meta property="og:url" content="https://www.example.com/the-article-title/" />
  2. Language encoding for the shared page
    <meta property="og:locale" content="en_GB" />
  3. Your website name as set in Joomla's global configuration
    <meta property="og:site_name" content="Your site name" />
  4. The title of your article:
    <meta property="og:title" content="The article title" />
  5. Your article's summary:
    <meta property="og:description" content="Article summary - up to 150 characters" />
  6. The page type
    <meta property="og:type" content="article" />
  7. The article's featured image:
    <meta property="og:image" content="https://www.example.com/images/article-image.jpg" />
  8. The article's section
    <meta property="og:article:section" content="Example Pages" />
  9. The date and time that the article was last modified
    <meta property="og:article:modified_time" content="2017-06-05 15:14:19" />
  10. The date and time that the aricle was published
    <meta property="og:article:published_time" content="2016-10-03 11:24:26" />

The first time one of your site's links is shared Facebook will crawl and scrape your article to gather it's metadata, Facebook then caches and displays information about the content like the title, description, and thumbnail image.

If you edit a page's metadata and want to reflect this change in Facebook then you must do so manually via Facebook's  Sharing Debugger

Twitter

Twitter uses a solution called Twitter Cards. They allow you to attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website.  Users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.

Meta data shared via a Twitter Card has the name prefix twitter: for example:
<meta name="twitter:card" content="summary" />

Supported metatags:

  1. The article's featured image:
    <meta name="twitter:image" content="https://www.example.com/images/article-image.jpg" />
  2. The Twitter Card type
    <meta name="twitter:card" content="summary" />
  3. The title of your article:
    <meta name="twitter:title" content="The article title" />
  4. Your article's summary:
    <meta name="twitter:description" content="Article summary - up to 150 characters" />
  5. The alt tag for the featured image - the article's title is used to auto-generate the Twitter image alt tag.
    <meta name="twitter:image:alt" content="Vestibulum Risus Pellentesque" />

Debugging

Facebook Sharing Debugger

When one of your site's URLs is shared for the first time Facebook saves the metadata details for the page, as explained above, if you later decide to update any of the page content or metadata details and then re-share your site's URL, those changes will not be reflected on Facebook, you must request a re-scrape of your page's metadata from Facebook.

  1. Go to the Sharing Debugger tab at https://developers.facebook.com/tools/debug/
  2. Enter your page's URL.
  3. Click the Debug button.
  4. If your page has not previously been scraped click the Fetch new information button.
  5. If your page has previously been scraped click the Scrape Again button.
  6. Check that your site's metadata has been updated.

Twitter Card Validator

To preview and validate your article's Twitter Card use Twitter's Card validator

  1. Go to Twitter's Card validator
  2. Enter your page's URL in the input box for Enter the URL of the page with the meta tags to validate
  3. Click the Preview card button.
  4. You can see a preview of your page's Twitter Card
  5. You can read the Twitter Card log

Tip: Another useful tool worth checking out for validating and previewing Twitter Cards and the Open Graph protocol is Iframely's debugger.