Twitter

The simplest way to integrate your Twitter profile on your website is to simply link to your profile from your website. There are several ways to do this in ProPhoto, but you’ll basically just paste the address of your profile into one of these tools:

A link in a menu

You can use a Custom URL link item in your navigation menu.

a simple menu item setup to link to a Twitter profile in a new window/tab

A graphic/button anywhere in your layout:

You can place a Graphic module into any layout, and within one module you can place many images or tiles which can link anywhere you like, as in this example:

a single graphics module which contains multiple icon images

Appearing in a grid layout within a page or a layout:

When you insert a grid into a page or into part of your layout, you can use different to link to various things. External websites like your social media pages can be easily linked in a custom grid type, as in this example:

a custom ‘text below’ grid featuring social icons

There are lots of great sources of icons online if you don’t want to make them yourself. In the examples above, icons were obtained from https://www.iconfinder.com

The Twitter website provides lots of tools you can use to integrate Twitter content on your website. ProPhoto provides a Twitter module you can drag into your layout:

This module can be added to any part of a ProPhoto layout.

Configure the Twitter module

1. Visit the Twitter “publish” website:
   https://publish.twitter.com/
2. You can embed your Twitter profile of recent tweets, but you can also embed collections, specific tweets, lists, and lots more.
   Enter some information on the Twitter website to create your embed code and click to Copy Code seen in this example:
   
3. Edit your ProPhoto layout using the Visual Builder screen.
4. Go to the Elements > Modules sidebar area and drag a Twitter module into any part of your layout. (pictured above)
5. After dragging in a Twitter module, use the Twitter Settings tab in the popup to paste the embed code you copied in the step above, as seen here:
   

After pasting the code from Twitter, you should find that your module appears in your layout. Here is a short video demonstration:

Changing the size, color scheme, and other options

Before copying your code in the steps above, you can click the option to set customization options on the Twitter page before your embed code is generated.

Using these options allows you to set a maximum width, maximum height, color scheme, link color, and other options:

Make adjustments to these settings and click Update so the code you copy includes your tweaks. Paste the code you’ve copied into the Twitter module as explained above.

To use Twitter recent tweets menu item built into ProPhoto, you will need to 1) enter your Twitter account username and 2) setup “API Credentials” so your site can retrieve and send data with the Twitter.com site. It’s not as hard as it might sound – just follow our instructions below.

Set up your Twitter “API credentials”

This is a special process you need to do so that Twitter can trust your site to send and receive info from your Twitter account. This is how the built-in ProPhoto Twitter tools grab the latest Tweets and such from your account. Follow these steps to create four special keys that you paste into the Twitter API credentials area seen here:

1. Login to the Twitter Developers site.
   We recommend opening two windows/tabs of your browser – one for your ProPhoto Settings > Site Settings > Social Media screen, and the other with the Twitter Developers site where you will use your Twitter username and password to sign in:
   https://dev.twitter.com/apps
   

   Twitter Developers sign in screen – use your Twitter username & password here

    

2. Create an Application.
   After signing in, you will be taken to a screen showing your Applications, which will be empty for nearly everyone, unless you’re a developer. Just click the button to Create a new application after you sign in.
3. The next screen will ask you for some details about the “Application” you are setting up.
   Here is what you will fill in:Name – You must fill in a unique name here and it’s not important what you use, but something descriptive like “Mary Samsonite’s Luggage Site” should be fine.
   Description – Again, fill in anything you like here, but perhaps something like “Used for website Twitter menus” makes sense.
   Website – Fill in your website address here – e.g.,  http://www.marysamsonite.com  or whatever you are using.
   Callback URL – is not required, so leave it blank.Scroll down the page and review the Twitter agreement, click to agree, fill in a ‘captcha’ challenge before you click the Create your Twitter application button to proceed.
   You will be taken to a page containing all kinds of fascinating details about this new “Application” you’re going to be working with. It’s okay if none of this makes sense – we just need four special numbers for ProPhoto, let’s continue.
4. Create your Access Token
   Click the Keys and Access Tokens tab at the top, and scroll to the bottom of the screen and click the Create my Access Token button seen at the bottom.
   You should see a confirmation message along the top of your screen confirming that your token is being created.
5. Check and see if your token is created
   Scroll to the top of the screen to click “Keys and Access Tokens” or click refresh in your browser.
   Scroll to the bottom once more to check if your token numbers are there – repeat if they aren’t showing yet.
   Do you see your Access token and Access token secret numbers now? Great, let’s move on.
6. Copy and Paste Credentials
   Once your Access Token numbers are showing up, all you need to do is copy four big numbers from the page and paste them into ProPhoto.
   The Keys and Access Tokens > Application settings section has the first two numbers you need: the “Consumer Key (API key)” and “Consumer Secret (API Secret)” numbers. Copy these numbers and paste into the two top boxes in ProPhoto.
   The Keys and Access Tokens > Your access token area has the last two numbers you need: the “Access token” and “Access token secret” numbers. Copy these numbers and paste into the two bottom boxes in ProPhoto.
7. When you’ve pasted all four numbers, click to Save Changes in ProPhoto.

Check Twitter Features are Working

You’ve done the hard part, now you just need to make sure that Twitter recent tweet menus are working. View any page of your site that uses a Recent tweets menu item.

If you don’t see your content right away, wait a couple minutes and refresh the page and you should now see your Tweets being loaded from your account.

Twitter notice