The growth and popularity of social media as a key marketing tool for companies large and small has made the ability to share rich media posts directly from client websites a frequent request here at FFW. At the top of the social media hierarchy are the heavyweights Facebook and Twitter and each provides a well defined mechanism for pulling rich media from websites.
Example 1: A Facebook post including image from linked page.
Example 2: A tweet formatted using Twitter’s “Summary Card with Large Image”.
To enable Facebook/Twitter to pull rich media from your site, the general idea is that you add HTML <meta> tags to your site's pages which will define the tweet/post content and media. Each service will then crawl the linked page and pull the rich media into the shared tweet/post. Twitter's mechanism - called “Twitter Cards” - is a little more complex to configure than the Facebook mechanism which is based on the Opengraph standard for web page metadata. Twitter make use of Opengraph meta tags in some cases as a fallback when their own custom Twitter Card tags are missing, but until Twitter supports Opengraph as it’s preferred protocol, it is best to implement Twitter Cards using Twitter’s meta data definitions directly.
To get started, add the metadata module to your project and enable the following three submodules:
NOTE: Confusingly, in the case of Facebook there is another submodule called metatag_facebook. However, it is used only to configure integration with Facebook API's like Facebook widgets and the Facebook Connect single-signon system and is not necessary for rich-media posts to Facebook.
Navigate to /admin/config/search/metatags to configure the Twitter/Facebook rich-media metatags and click the 'Edit' link for Node related metatags
Scroll to the bottom of the Node config page to find the sections related to Facebook/Twitter metatags:
Click on the OPEN GRAPH tab (shown in the screenshot above) to configure all OG tags. You will see various tags configured with default values. For Facebook all that is needed to pull a specific image into a post is the 'Image URL' tag. Setting Content type to 'Article' is probably a good idea generally - if you view the 'Content type' dropdown you can see the various content categories defined by the OG standard.
Viewing the markup for a node you should see the various "og:" tags as configured.
6: Chrome dev tools display showing meta tags for both Facebook and Twitter.
Preview & Validation/Debugging
Facebook has a nice OpenGraph preview and debugging tool at the following link. You simply paste the URL of a page to test and Facebook will crawl your markup and display a preview of the post along with helpful debug info on the found metadata.
Full documentation on the various OG tags used by Facebook can be found here: https://developers.facebook.com/docs/opengraph
Starting on the Metadata Node configuration page, click on the TWITTER CARD tab to view all configurable tags for Twitter. The topmost item specifies the Twitter Card type and is required to let Twitter know the card format which in turn determines which specific twitter meta tags must be configured. Here we are choosing a basic summary post that includes an image.
Details on the various card types and associated tag configuration requirements can be found here: https://dev.twitter.com/cards/types
For our example of a “Summary Card with Large Image” (documentation details here: https://dev.twitter.com/cards/types/summary-large-image), the only additional tag we need to configure is 'Image URL' as shown below. Setting the 'Creator's Twitter account is optional and is only used to associate the posted article with a given Twitter account - e.g. @johndoe. Below we simply have a hardcoded value, but this might be a Drupal token if, for instance, your site is configured with a user profile field for a Twitter account.
Viewing the markup for a node (see the screenshot “Example 6” above) you can see the various "twitter:" tags as configured.
Preview and Validation/Debugging
Twitter provides a card validation service (https://cards-dev.twitter.com/validator) which is helpful since the Twitter Card tag requirements are less forgiving than Facebook's use of OG tags. Paste a node link into the validator and click 'Preview card'. The Twitterbot will crawl the linked page, pull in the metadata and build a preview of the card as shown below. NOTE: if there are problems with the metadata as configured for the Twitter Card type you have specified, you can look to the validator log for debug info.
Unlike Facebook, Twitter requires production site domains to be whitelisted before it will crawl linked pages for metadata (NOTE: the validator doesn't require your site to be whitelisted). You will need to submit a whitelist application to Twitter for your domain which can be done directly from the validator page. Clicking the 'Request Approval' button will display the following form with details on the application requirements:
General information on Twitter Cards can be found here: https://dev.twitter.com/cards/overview
To pull in your Twitter Card metadata, Twitter crawls your site page using their bot - Twitterbot - which respects your robots.txt config, as expected. In production this won't generally be a problem, but with test environments it can be. In the case of sites hosted on the Acquia Cloud, I learned that for both DEV and TEST (i.e. STAGE) sites, Acquia will always serves a "deny-all" robots.txt, reasonably assuming that DEV/STAGE data should never be indexed. But because Twitter Cards uses Twitterbot to grab your configured metadata, you cannot test your Twitter Card config on the Acquia Cloud DEV/STAGE environments. One possible way around this (which I have not tested) might be to create an appropriate subdomain for the production domain (e.g. dev.clientdomain.com) and configure DNS to point to the DEV site at acquia-sites.com.
For development on localhost - and this applies to both Facebook and Twitter - your local site must be made publicly accessible so the services can crawl the metadata. There are a few tunneling solutions to this general problem, including ngrok and localtunnel at the links below. I have tested both Twitter and Facebook using ngrok and it worked well.