The Social Media Preview Widget for Adobe Muse lets you quickly and easily set up the necessary SEO and Open Graph content for your websites.
Add custom images and captions that will appear along with content shared to Facebook, Twitter, Google+ and many other social media sites, ensuring your posts stand out from the crowd.
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
This guide demonstrates using the widget on an individual page as this is the most common way to set up the previews. If you want to apply the preview settings to the entire site, simply place it on your master page; this will replicate across every page that uses it.
Before we start configuring the widget, however, we'll need to define the image we'll be using for the preview. Facebook and Twitter have two main types of preview: a large banner that sits spans the width of the status update with the text beneath, or a smaller inset image with the text on the right. The image is shared between the two platforms, so it's important to decide the size first.
The banner image should be rectangular at around a 1:91 ratio; Facebook recommends the dimensions be at least 1200x630px, which is the size of the image I'm using for the demo. For inset images the recommended size is less than 600x600px. Once you've created your image, you'll need to get Muse to upload it to your hosting: Go to the Select Add Files for Upload from the File Menu. Browse to the location of your preview image. Nothing happens at this point, apart from the image file appearing in the Assets panel. It will be uploaded to the server when you next publish the site.
Now the image has been set up, we can configure the widget. Start by dragging the widget onto the page from the Library. There's no preview or content, so it'll just appear as a code symbol.
Once the widget has been configured, it's necessary to log in to both Facebook and Twitter to make sure the previews from the site are correctly set up.
Type in the site URL, including the page name, if you're working on individual pages. Click the Fetch new scrape information button.
Facebook scans the web page and returns the results. All being well, you will see something similar to this, which means Facebook is happy with what it found. If anything is incorrect, you'll see errors. Sometimes these are warning – image files not found, for example. Other times they will be more severe: an incorrect profile address or Facebook ID. This will halt the scrape but will not affect the resulting preview.
Below the raw data is the information Facebook draws, including a thumbnail of the preview image, a generated update time and the conversion to the author's numeric Facebook ID, if it was specified in the widget.
Finally, you'll see how your preview will appear when the content is shared. You also have the option to create a live post by following the link beneath the preview.
Now let's set up Twitter. This is slightly more involved than the Facebook configuration, as it requires the site to be registered with Twitter first.
Start by entering the site URL, including the page name, if applicable. Make sure you include the http(s):// prefix or it will not be seen as a valid address.
If the metadata has been picked up correctly, you'll see a similar display to the above. Notice the message in the left. Although the details are present, Twitter won't yet show the preview as the site needs to be whitelisted.
Click the Request Approval button. An opt-in form appears. Fill in the details accordingly, making sure all the mandatory fields are correct. Press the Request Approval button to submit the form.
If all goes well, you'll see a message saying the site is whitelisted. Note: although the message shows the whole domain name as being verified, this is only for the card type specified in the widget for the page you submitted (Large Summary Card in the example). If you want to whitelist the site for the standard Summary Card, you'll need to go through the submission process again using another a page with it set in the widget. After that, you can add them to any page without the need to resubmit.