Facebook

a Facebook like button with count, and share button

Facebook like and share buttons allow visitors to interact with your site and their Facebook profile.
(to add interaction with your Facebook business page, see the Facebook Page widget described below)

Difference between like and share

The like button allows visitors to like a page or post on your website. When a visitor likes something, it is mentioned on their personal Facebook activity page, and may be seen by their friends in Facebook news feeds.

The share button allows visitors to create a post in Facebook and send it directly to a friend, send it to a specific group, or post it on their personal timeline. Depending on which of these options is chosen by the visitor, different friends of the visitor will see the message and its link to your site content.

Setup the like and share button

You may display like and share buttons on several different page types on your site, using the Call To Action tool in ProPhoto.

1. Go to “ProPhoto > Customizer > Call to Action > Builder”
2. Click to create a Facebook Like item
   
3. In the popup, choose the Facebook button options (explained below) and click Save Item
4. Go to “ProPhoto > Customizer > Call to Action > Appearance” screen to configure alignment, position, and spacing options for the Call To Action area
5. Go to “ProPhoto > Customizer > Call To Action > Assignments” screen to choose which page types should show your buttons
   

Button options

When you create a Facebook Like item for your Call To Action area, several options are presented in the popup:

Button Layout – you can choose to hide the like count for your page/post, to display it horizontally, or to display it vertically – this shows all three options in one example:

like count display

Button Text – you can choose to show the word like or the word recommend for your button – this shows both options in one example:

like or recommend text

Includes share button? – you can choose to show a separate share button next to your like button – this shows both options in one example:

like and share buttons

Since the Call To Action tools also allow you to create manually a share on Facebook item, you can choose between using the option in this Facebook Like item, or making a separate item. One advantage with the separate share item is that you can control the appearance and spacing of the share button.

Button appearance

Facebook does not allow you to override the appearance of the like button, so you are not able to use your own image or graphic for this button.

While the Like and Share buttons allow visitors to interact with your website and their personal Facebook profile, the Facebook Page widget allows visitors to interact with your business Facebook page. (not your personal profile)

Setup the Facebook Page widget

You may add the widget into any of your ProPhoto Templates so it appears on your site.

1. You must have a Facebook Page that is publicly accessible to visitors, so if you only have a personal Facebook profile, you’ll need to go create one first:
   https://www.facebook.com/pages/create
   Again, make sure it is not a private/restricted page or your widget will have trouble showing it.
2. Go into your “ProPhoto > Customizer > Layout” screen and select up top which template you want to display the Facebook widget.
   If the widget should appear in all or many pages of your site, consider adding it to your base template.
   If it should appear on a few pages of the same type, or one specific page (such as a front page) then select a specific child template.
3. Click to add a widget to your layout.
4. In the popup, select the P6 Facebook Page widget button.
   
5. Give your widget a helpful admin label if you want, and paste in your Facebook business page URL address. We recommend copying this from your address bar to avoid typos.
   See the info below about customizing the widget’s options:

Configure page widget options

Apart from the URL address of your Facebook business page, there are a few other settings you can configure.

Width and height controls can be left empty, and the widget will grow & shrink responsively to fit the area where it appears. Type in a width or height, and you will constrain the widget to the width you type.

Show posts from page will display a timeline of the posts you have published on your Facebook page.

Show friends faces will display profile images for some friends of the visitor who has chosen to like your Facebook page.

Show cover image will display the wide cover photo of your page, if you have provided one in your Facebook page configuration.

Here are some examples of the settings mentioned above:

Of course, if you want, you may combine these settings to get a combination of them.

If you have enabled commenting in WordPress, your visitors can interact with your posts and/or pages by leaving comments. ProPhoto supports the normal WordPress commenting system, but you can choose to replace or add to the WordPress comment system with Facebook comments.

When you have enabled Facebook comments, any visitor to your site who is logged into Facebook in their web browser will be able to post comments through the Facebook comments box.

Anyone who is not logged into Facebook, or who does not have a Facebook account will not be able to leave comments in this tool until they have an account and have logged in.

Setup Facebook comments

Before you can use Facebook comments on your ProPhoto site, you must have your own personal Facebook profile to manage comments. Be sure to have your own account on Facebook before you proceed.

1. If you have not already done so, fill in your personal Facebook ID number in this screen:
   “ProPhoto > Settings > Site Settings > Social Media > Site-wide Facebook Settings”
   Use the ? link if you do not know what your ID number is.
   See the Site-wide Facebook options guide for more info.
2. Enable Facebook comments in this screen:
   “ProPhoto > Settings > Site Settings > Comments > Facebook comments”
3. Choose if you want to use only Facebook comments, or if you also want your site to show any WordPress comments which have been left for your posts & pages.
4. Choose if you want to allow new comments to be only through Facebook, or if you want to allow visitors to leave comments using either Facebook or WordPress commenting.

Depending on the options you choose, visitors might see comments from either system. If you want to remove WordPress comments that have been left on a certain post/page, you will need to delete them from the WordPress “Comments” screen.

Disable new comments for individual posts or pages

You can turn on/off commenting on a per-post and per-page basis. This is done in a Discussion pane in your post/page editor screen.

To see this pane, you might need to click the Screen Options tab at the top-right of your post/page editor screen and check to display the discussion pane. Then you can choose to allow comments or not.

For full details, see our Toggle commenting on/off guide.

Moderate Facebook comments

Since Facebook comments are stored on the Facebook servers, you will need to manage your site’s comments through the Facebook site – please see this page for more info:

https://developers.facebook.com/tools/comments

Posts and pages from your website can be shared on Facebook, and when this happens a preview of the link is shown.

An example of a Facebook link preview

Typically, the image, title, and text is pulled automatically from your post or page being linked on Facebook.

Override the title and description for Facebook link previews

In some cases – like the front page and blog page of your site – Facebook may use title and description text that you want to override in the link preview. To override the title and text, visit this area:

“ProPhoto > Settings > Site Settings > Social Media > Facebook preview options”

Use the text boxes to apply a different title and/or description text for your pages.

1. Upload a specific image for your blog page, so that the most recent post image is overridden
   You can also provide custom page title & description text in the boxes found here.
2. Provide custom page title & description text in the boxes found here.
   (to supply a custom image, use the featured image in your WordPress page editor)
3. Disable the ‘meta tags’ ProPhoto creates for your posts & pages.
   Any WordPress plugin you use to control title & description (such as Yoast or other SEO plugins) will provide text instead.

Remember that your changes may not be seen immediately, since Facebook caches links. Use the Facebook Sharing debugger tool to confirm your changes instead of re-posting a link on Facebook.

Override the image for Facebook link previews

By default, Facebook will try to use the first image in your post/page, or another prominent image if there are no images in your content. But you can override the image used on Facebook by selecting or uploading a Featured Image for any page or post you create.

Even if your post/page does not make use of the image, a featured image will be used for ProPhoto Grid thumbnails, excerpt images, and sharing on Facebook and other social media. Again, remember that your changes may not be seen immediately, since Facebook caches links. Use the Facebook Sharing debugger tool to confirm your changes instead of re-posting a link on Facebook.

Confirm and Troubleshoot Facebook link previews

If you are having problems with the text or the image which Facebook displays when you link your site on Facebook, please see our Wrong preview for a link to my site tutorial for help.