Photoshop Guide: How to Create Twitter Card for Adobe Muse Site

In this tutorial you will learn how to add twitter card to any page created in Adobe Muse. Twitter cards are an excellent way to drive traffic to your website.

Why and how to use Twitter cards

With few lines of code, you can attach photos, download to a mobile app or video/audio media. Attachments will appear in tweets when your visitors start tweeting your content. There isn't any special requirement beside few lines of code to add to your page(s). The best of all is that you can add twitter cards just by copying/pasting code with few simple modifications: to change the title, description, and URL for image/media.

Where to get code for Twitter card

You can see examples and to copy code from Twitter Developer Documentation site:

Summary Card is suitable for any kind of content like a blog post, product or image from your shop.

Summary Card with Large Image is very similar to the summary card with a larger image.

App Card is suitable to drive app installs. You can include ratings and price.

Player Card is useful for video and audio clips.

Use links above to open appropriate page then scroll down to Sample Code section, select and copy code.

Copy code for twitter card on twitter deveopers site

On Twitter Developer Documentation page scroll down to Sample Code section. Select code and copy it.

Where to paste code in Muse

After copying and modifying the code you should paste it into each and every page where you want to add twitter card. It does not have much sense to use the same title, description, and image/media for every page on your site.

With code copied to clipboard and tab with the web page in Design mode active in Muse go to Page > Page Properties.

Note: if your site is using alternate layouts and you have versions for Desktop, Tablet and Phone then you must repeat process for each layout of your site. Here is tutorial Migrate existing Adobe Muse websites to responsive layout which may help you. For responsive sites you will paste code only once as explained below.

Click on Metadata to activate that tab and paste code in HTML for <head>: section.

After modifying code from twitter site you should paste it in Muse. Open page in separate tab (double click on page in Plan view) then go to Page > Page Properties > Metadata tab. Paste code in HTML for <head>: section.

Here is code that I have copied on Twitter site:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Here is code with modification which I have pasted in Muse:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@bojansavke">
<meta name="twitter:title" content="Photoshop Plus | Free and paid extensions" />
<meta name="twitter:description" content="Marketplace with highest quality free and premium Photoshop actions, frames, patterns, textures, PSD templates and layer styles." />
<meta name="twitter:image" content="https://lh3.googleusercontent.com/-9nthrmddzx0/U5qgSrR6UWI/AAAAAAAAACo/990UhyiONdkIbJPXxlbdPDB5ylqDsxCjgCL0B/s1000-fcrop64=1,00700000ff8eefff/cover-page-copy.png">

By the way, I am sourcing image from Photoshop Plus brand profile on Google+.

You should publish or to upload changes using ftp client to finish this process. To publish from Muse go to File > Publish to Business Catalyst.