Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Social Addon

Share This Post!

The Social Addon for Envira Gallery allows you to display social sharing buttons for each of your Envira Gallery images.  Visitors can then share a specific image to Facebook, Twitter, Pinterest, Google+ or through Email.

  1. Requirements
  2. Installation
  3. Configure the Social Addon’s Settings
  4. Configure Social Options
  5. FAQs
  6. Configuration Options for Developers

Requirements


Installation

Please follow our instructions on how to install and activate addons. In this instance, you’ll be activating the Envira Social Addon.

Configure the Social Addon’s Settings

To use Facebook and/or Twitter share buttons in your galleries and albums you’ll need to configure these two social networks’ Settings.

IMPORTANT: Until this is completed, social sharing will not work on those networks.

Facebook

To use Facebook sharing icons in your galleries and albums, complete our guide to Add Your Facebook Application ID to the Social Addon.

Twitter

To use Twitter sharing icons in your galleries and albums, add your Twitter username to the Twitter Username field and save to apply.

Add your Twitter Username to the provided field and save.


Configure Social Options

When configuring your galleries and albums you’ll find the following options available:

When editing a gallery, select the Social tab to configure the main social settings.

You can configure the Social Addon options within the Social tab in the gallery edit screen.

Within this tab you’ll have the following options:

  • Display Social Sharing Buttons?Enables or disables displaying social sharing buttons on each image in the gallery view.
  • Social ButtonsThe social buttons you want to display. Available options are: Facebook, Twitter, Google, Pinterest, Email.
  • Social Buttons PositionWhere to display the social sharing buttons over the image. Available options are: Top Left, Top Right, Bottom Left, Bottom Right.
  • Social Buttons OrientationDisplays the social sharing buttons horizontally or vertically.

Social Addon Gallery Settings


  • Display Social Sharing Buttons?Enables or disables displaying social sharing buttons on each image in the Lightbox view.
  • Social ButtonsThe social buttons you want to display. Available options are: Facebook, Twitter, Google, Pinterest, Email.
  • Social Buttons PositionWhere to display the social sharing buttons over the image. Available options are: Top Left, Top Right, Bottom Left, Bottom Right.
  • Display Social Buttons Outside of Image?If enabled, displays the social sharing buttons outside of the lightbox/image frame.
  • Social Buttons OrientationDisplays the social sharing buttons horizontally or vertically.

Social Addon Lightbox Settings


Advanced Settings

Facebook Options
  • What To ShareSelect the information that should be shared with each image. Available options are: Optional Text, Tags, Caption, Quote
  • Facebook Optional TextEnter an optional message to append to Facebook shares. The image, image URL, title and caption are automatically shared.
  • Facebook Tag OptionsYou can manually set one tag for all gallery images or automatically use tags assigned with the Tags Addon. Note that you are allowed only one Facebook tag when using the Manual option. Available options are: Manual, Envira Tags (available only with the Tags Addon)
  • Facebook HashtagAdd one tag, starting with the “#” symbol. Example: #Envira
  • Facebook QuoteAdd a short text statement to be included with each image shared from this gallery.

Social Addon Facebook Options


Pinterest Options
  • Pinterest Sharing Type – Pin One includes the image and caption of the image being shared. Pin All displays all available images and allows users to select the specific image they wish to share. Available options are: Pin One, Pin All. IMPORTANT: When using Pin All and sharing images from Lightbox view only the current image will be shared. Pin All functions only when sharing outside of Lightbox view.
  • Pinterest Rich Pins – Enable Pinterest’s Rich Pins on the page where this gallery is displayed. Pinterest must be pre-approve your site for this option to work.

New Pinterest sharing options for your galleries


Twitter Options
  • Twitter Optional TextEnter an optional message to append to Tweets. The image, image URL and caption are automatically shared.
  • Twitter Summary Card – Twitter summary cards share additional details (such as an image, title, and subtitle) than a standard text Tweet. Available options are: No Summary Card, Summary Card + Thumbnail, Summary Card + Large Image
  • Twitter Summary Card UsernameThe Twitter username to attribute the Summary Card to, starting with the “@” sign. Example: @enviragallery
  • Twitter Summary Card DescriptionTwitter requires a description for Summary Cards. Envira will attempt to find and use the image caption, gallery description, or Twitter Optional Text setting (in that order). Optionally, Envira can pass the custom text entered in this field to Twitter instead.

Now you can enable Twitter summary cards with thumbnails or large images


Google+ Options
  • Google+ Default DescriptionEnter the text you would like Google+ to use if no description or caption is found for your gallery or image being shared.

Social Addon Google Options

Email Options
  • Image Size To ShareSelect the image size you would like to be shared through the email.

email sharing options


Mobile Settings

In the Mobile tab you’ll also be able to control how some Social settings function for mobile visitors to your site.

  • Display Social Sharing Buttons On Gallery?If enabled, will display social sharing buttons based on the settings in the Social Addon: Gallery settings. If disabled, no social sharing buttons for galleries will be displayed on mobile.
  • Social NetworksIf the above option is enabled, you can control which specific social networks can be shared to on mobile devices. Available options are: Facebook, Twitter, Google+, Pinterest, Email

Social Addon options in the Mobile Gallery Settings


Mobile Lightbox Settings
  • Display Social Sharing Buttons In Lightboxes?If enabled, will display social sharing buttons based on the settings in the Social Addon: Lightbox settings. If disabled, no social sharing buttons in lightboxes will be displayed on mobile.
  • Social NetworksIf the above option is enabled, you can control which specific social networks can be shared to on mobile devices from lightbox view. Available options are: Facebook, Twitter, Google+, Pinterest, Email

Social Addon options in the Mobile Lightbox Settings


Album Settings

If you’re using the Albums Addon you can also configure the options outlined above for your Albums.


FAQs

Q: Can I enable an Instagram share button with the Social Addon?

A: No, unfortunately Instagram does not currently allow this functionality through their API.


Q: When sharing to Twitter my Summary Cards aren’t loading in the tweet, why not?

A: Check that your site’s robots.txt file isn’t blocking Twitterbot from crawling any directories that contain Envira Galleries and Albums.

If you haven’t done any custom edits to the robots.txt file be sure that the “Search Engine Visibility” setting in your WordPress installation is disabled in the WordPress Admin > Settings > Reading page.

Disable the Search Engine Visibility option to allow search spiders to access your site.

For more information see Twitter’s documentation on crawling.

You can validate your Twitter link by taking the URL to the image being shared (from Twitter pop up share window):

and running that link through https://cards-dev.twitter.com/validator


Q: When sharing to Google+ my gallery image isn’t loading in the share, why not?

A: Google+ requires that images meet specific standards to be included in the share. Per Google’s documentation:

The image being shared must be sized as follows:

  • must be at least 400px wide.
  • must have an aspect ratio no wider than 5:2 (width:height).

An image meeting the above requirements is always rendered with a width of 506, 426, or 346 pixels, depending on the width of the user’s viewport.

For example, an image with dimensions of 600 x 250px (width:height) qualifies because its aspect ratio of 5:2.1 is narrower than 5:2, but Google scales it down to 506 x 211px, 426 x178px, or 346 x 144px. Google scales down an image of 600 x 300px (5:2.5) to 506 x 253px, 426 x 213px, or 346 x 173px.

Google scales and crops images as follows:

  • images with an aspect ratio taller than 5:3 are scaled to 506px width, and then cropped vertically to 303px height. For example, an image of 600 x 1000px is scaled to 506 pixels wide, maintaining its aspect ratio. It is then cropped at the top and bottom to 506 x 303px (5:3), using an algorithm to keep the most interesting part of the image.
  • images with an aspect ratio between 5:2 and 5:3 are not cropped, but are scaled.
  • images wider than 5:2 disqualify the content from this rendering treatment.
  • depending on the user’s browser viewport width, images may finally be scaled to 426px or 346px wide, maintaining the aspect ratio post-crop.

Be sure the images in your gallery meet Google’s image requirements for sharing.


Q: Some options aren’t available for me that are shown above, why not?

A: Some options like choosing to display the social icons outside of the lightbox, or to choose the orientation of icons, are available only with specific lightbox themes. If you’re using either the Base Dark or Base Light lightbox themes neither of these options are available to be configured.


Q: I don’t see any of the Advanced Settings, why not?

A: Be sure you have the latest version of the Social Addon installed on your site. Earlier versions of the Addon did not contain the Advanced Settings.


Q: I’ve enabled selected Pin All as the sharing type for Pinterest, why isn’t it working from Lightbox view?

A: When using Pin All and sharing images from Lightbox view only the current image will be shared. Pin All functions only when sharing outside of Lightbox view.


Configuration Options for Developers

This table describes the available configuration options for your Envira Galleries and Albums when using this Addon.

The Programmatic Name and Programmatic Values columns are used when configuring the Dynamic Addon’s shortcode or template tag, or when overriding the default settings for creating a new Gallery or Album.

Social Tab

You will see the following new options in the Social tab for Galleries.

Config Item Description Options Programmatic Name Programmatic Values
GALLERY SETTINGS
Display Social Sharing Buttons? Whether to display social sharing buttons on gallery images. Enabled/Disabled social 0,1
Social Buttons The social sharing buttons to display. Enabled/Disabled social_facebook
social_twitter
social_google
social_pinterest
0,1
Social Facebook Message The default text used to populate the Facebook share message. social_facebook_message
Social Twitter Message The default text used to populate the Twitter share message. social_twitter_message
Social Buttons Position Where to display the social sharing buttons on each gallery image. Top Left, Top Right, Bottom Left, Bottom Right social_position top-left,top-right,bottom-left,bottom-right
Social Buttons Orientation Whether to display the buttons horizontally or vertically. Horizontal,Vertical social_orientation horizontal,vertical
LIGHTBOX SETTINGS
Display Social Sharing Buttons? Whether to display social sharing buttons on gallery images. Enabled/Disabled social_lightbox 0,1
Social Buttons The social sharing buttons to display. Enabled/Disabled social_lightbox_facebook
social_lightbox_twitter
social_lightbox_google
social_lightbox_pinterest
0,1 for each
Social Buttons Position Where to display the social sharing buttons on each gallery image. Top Left, Top Right, Bottom Left, Bottom Right social_lightbox_position top-left,top-right,bottom-left,bottom-right
Display Social Buttons Outside of Image? If enabled, displays the social sharing buttons outside of the lightbox/image frame. Enabled/Disabled social_lightbox_outside 0,1
Social Buttons Orientation Whether to display the buttons horizontally or vertically. Horizontal,Vertical social_lightbox_orientation horizontal,vertical
ADVANCED SETTINGS
Facebook
What to Share? Choose and configure the options to share with each image. Optional Text, Tags, Caption, Quote Enabled/Disabled social_facebook_show_option_optional_text
social_facebook_show_option_tags
social_facebook_show_option_optional_caption
social_facebook_show_option_optional_quote
0,1
Facebook Optional Text Enter an optional message to append to Facebook shares. The image, image URL, title and caption are automatically shared. social_facebook_text
Facebook Tag Options You can manually set one tag for all gallery images or automatically use tags assigned with the Tags Addon. Note that you are allowed only one Facebook tag when using the Manual option. Manual, Envira Tags social_facebook_tag_options manual, envira-tags
Facebook Hashtag The manually defined tag to add to each image shared. social_facebook_tags_manual
Facebook Quote Short text statement to be included with each image shared from the gallery. social_facebook_quote
Twitter
Twitter Summary Card Whether to share as summary cards or no card. No Summary Card, Summary Card + Thumbnail, Summary Card + Large Image social_twitter_sharing_method card, card-photo
Twitter Summary Card Username Twitter username to attribute summary card to for each share. social_twitter_summary_card_site
Pinterest
Pinterest Sharing Type Pin One includes the image and caption of the image being shared. Pin All displays all available images and allows users to select the specific image they wish to share. Pin One, Pin All social_pinterest_type pin-one, pin-all
Pinterest Rich Pins Enable/disable Pinterest’s Rich Pins on the page where this gallery is displayed. Enabled/Disabled social_pinterest_rich 0,1
Google+
Google+ Default Description Text you would like Google+ to use if no description or caption is found for your gallery or image being shared. social_google_desc

Developers

Filters

FileFilter NameArguments
/includes/global/common.php
 envira_social_networksapply_filters( 'envira_social_networks', $networks )
 envira_social_positionsapply_filters( 'envira_social_positions', $positions )
 envira_social_twitter_sharing_methodsapply_filters( 'envira_social_twitter_sharing_methods', $methods )
 envira_social_facebook_show_optionsapply_filters( 'envira_social_facebook_show_options', $methods )
 envira_social_orientationsapply_filters( 'envira_social_orientations', $orientations )
 envira_social_settingapply_filters( 'envira_social_setting', $settings[ $key ] )
 envira_social_settingsapply_filters( 'envira_social_settings', $settings )
/includes/global/shortcode.php
 envira_social_metadata_imageapply_filters( 'envira_social_metadata_image', $item, $gallery_item_id, $data, $gallery_id )
 envira_social_sharing_titleapply_filters( 'envira_social_sharing_title', $item['title'], $id, $item, $data, $i )
 envira_social_sharing_captionapply_filters( 'envira_social_sharing_caption', $item['caption'], $id, $item, $data, $i )
 envira_social_sharing_facebook_textapply_filters( 'envira_social_sharing_facebook_text', $this->get_config( 'social_facebook_text', $data )
 envira_social_sharing_twitter_textapply_filters( 'envira_social_sharing_twitter_text', $this->get_config( 'social_twitter_text', $data )
 envira_get_email_image_sizes_photoapply_filters( 'envira_get_email_image_sizes_photo', $photo_url[0], $data )
 envira_get_email_image_sizes_emailapply_filters( 'envira_get_email_image_sizes_email', $email_url, $data )

Actions

FileAction NameArguments
/includes/admin/settings.php
 envira_gallery_settings_social_tab_noticedo_action( 'envira_gallery_settings_social_tab_notice' )

Changelog

1.3.2.1 (02-02-2017)

  • Fix: Minor bug fixes

1.3.2 (02-01-2017)

  • Fix: Admin check boxes not displaying
  • Fix: Facebook Tags
  • Added: Image size to share for emails
  • Fix: Minor bug fixes

1.3.1 (01-19-2017)

  • Fix: Facebook Lightbox sharing hashtag.
  • Fix: Google+ Descriptions on lightbox sharing.
  • Fix: Issue with sharing and permalink settings.
  • Fix: Minor bug fixes

1.3.0 (2017-01-10)

  • Update: Total rewrite from top to bottom. Added new general settings for Facebook, Twitter, Google+, and Pinterest sharing.
  • Added: Ability to control social icons for mobile for both galleries and lightboxes.
  • Added: Email sharing now includes link to page when possible.
  • Added: Rich Links for Pinterest added (requires Pinterest to approve site).
  • Added: Added social buttons for gallery view for albums.

1.2.6 (2016-12-08)

  • Fix: Clicking lightbox email opens a new window
  • Fix: Missing dependencies
  • Fix: Social icons displaying over video controls
  • Fix: Compatibility with deep linking

1.2.5 (2016-11-03)

  • Added: Support for deep linking when sharing.
  • Fix: Facebook text from being ignored.

1.2.4 (2016-10-4)

  • Update: Ability to determine which Facebook page to share on.
  • Fix: Conflict causing social buttons outside of lightbox with video addon resolved.

1.2.3 (2016-09-16)

  • Update: Pinterest URL in Lightbox view

1.2.2 (2016-09-01)

  • Fix: Icons appearance in lightbox improved.

1.2.1 (2016-08-25)

  • Updated: Spanish translations

1.2.0 (2016-08-04)

  • Fix: Hover stat changed so icons will not disappear in certain instances.

1.1.9 (2016-07-26)

  • Fix: Sharing links now fully work in Lightbox.

1.1.8 (2016-06-30)

  • Fix: Social icons should no longer be out of view on mobile devices when they are outside the lightbox.

1.1.7 (2016-05-19)

  • Fix: Removed duplicate settings
  • Fix: Conditionally show settings based on options chosen
  • Fix: Force social networks to fetch actual shared image and not cached URLs

1.1.6 (2016-05-12)

  • Fix: Pinterest sharing in Lightbox view

1.1.5 (2016-05-05)

  • Updated: Standardised edit screen titles and descriptions
  • Updated: Spanish translation

1.1.4 (2016-04-28)

  • Updated: Spanish Translations

1.1.3 (2016-04-21)

  • Fix: Undefined function inline_notice() error.

1.1.2 (2016-04-21)

  • Added: Option to define Facebook and Twitter text / description when sharing an image from the gallery and/or lightbox view.
  • Updated: Spanish translation

1.1.1 (2016-04-16)

  • Fix: Prevent success / error notices on Settings screen from jumping

1.1.0 (2016-03-31)

  • Updated: Moved settings into own tab on Galleries and Albums
  • Added: Documentation and Video Help Links

1.0.9 (2016-03-10)

  • Added: Option to enable/disable social sharing buttons on mobile

1.0.8 (2016-02-25)

  • Updated: Spanish Translations

1.0.7.3 (2016-01-28)

  • Added: Filters to title and caption in Gallery view for developers to customise titles and captions when using social sharing buttons

1.0.7.2 (2016-01-21)

  • Added: Option to display social sharing buttons outside of lightbox/image frame in Lightbox view

1.0.7.1 (2015-12-11)

  • Fix: Prevent browser tab from closing when social sharing with Facebook is enabled, and URL is opened through a new window.

1.0.7 (2015-12-10)

  • Added: Spanish Translation
  • Added: Automatically close Facebook sharing window when sharing action is completed

1.0.6 (2015-11-12)

  • Fix: Captions with HTML elements not rendering social buttons correctly.

1.0.5 (2015-11-06)

  • Fix: Output correct metadata when multiple Galleries embedded on a single Page.

1.0.4 (2015-08-13)

  • Added: Show a dismissible notice if the Social Addon hasn’t been fully configured at global level with Facebook + Twitter details.

1.0.3 (2015-07-30)

  • Fix: Social sharing on gallery images displayed in the lightbox when accessed through an album.

1.0.2

  • Fix: Moved default settings into global/common.php, so default settings are available to frontend galleries and albums not saved since Social Addon activation.

1.0.1

  • Fix: Lightbox sharing failing when using Deeplinking Addon.

1.0.0

  • Initial release of the addon.
Share This Post!