Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Social Addon

Share This Post!

Would you like to allow your images to be shared to various social networks? Envira’s Social Addon can display social sharing buttons on all of your Envira images. Your visitors can easily share any of your Envira images to different social networks with the click of a button.

  • FAQs
  • 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

    Before we start, we need to set up Twitter and Facebook.

    This first step must be completed before you can share any images to Facebook or Twitter.
    Facebook

    Your first step to set up Facebook sharing is to complete our guide to add your Facebook Application ID to the Social Addon.

    Twitter

    Your first and only step to set up Twitter sharing is to add your Twitter username to the Twitter Username field and save to apply.

    You will need to include the @ symbol for your username.

    Add your Twitter Username to the provided field and save.


    Configure Social Options

    Envira’s Social Addon comes with many options to choose from. Let’s take a closer look below.


    First, choose a gallery to edit and select the Social tab to being the setup for your gallery.

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

    Next, you’ll need to set up the social networks you want to share to and a few other options.

    • Display Social Sharing Buttons? – Enables or disables displaying social sharing buttons on each image in the gallery view.
    • Social Buttons – The social buttons you want to display. Available options are: Facebook, Twitter, Google, Pinterest, Email.
    • Social Buttons Position – Where to display the social sharing buttons over the image. Available options are: Top Left, Top Right, Bottom Left, Bottom Right.
    • Social Buttons Orientation – Displays 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 Buttons – The social buttons you want to display. Available options are: Facebook, Twitter, Google, Pinterest, Email.
    • Social Buttons Position – Where to display the social sharing buttons over the image. Available options are: Top Left, Top Right, Bottom Left, Bottom Right. This option is not available when using either of the Base lightbox themes.
    • Display Social Buttons Outside of Image? – If enabled, displays the social sharing buttons outside of the lightbox/image frame. This option is not available when using either of the Base lightbox themes.
    • Social Buttons Orientation – Displays the social sharing buttons horizontally or vertically. This option is not available when using either of the Base lightbox themes.

    Social Addon Lightbox Settings


    Advanced Settings

    Facebook Options
    • What To Share – Select the information that should be shared with each image. Available options are: Optional Text, Tags, Caption, Quote.
    • Facebook Optional Text – Enter an optional message to append to Facebook shares. The image, image URL, title and caption are automatically shared.
    • 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. Available options are: Manual, Envira Tags (available only with the Tags Addon).
    • Facebook Hashtag – Add one tag, starting with the “#” symbol. Example: #Envira.
    • Facebook Quote – Add 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.
      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 Text – Enter 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 Username – The Twitter username to attribute the Summary Card to, starting with the “@” sign. Example: @enviragallery
    • Twitter Summary Card Description – Twitter 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 Description – Enter 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 Share – Select the image size you would like to be shared through the email.

    email sharing options


    Mobile Settings

    Your last step is to set up your gallery for the mobile experience. Click on the Mobile tab. You’ll need to decide if you want to show your social icons for the gallery and lightbox.

    • 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 Networks – If 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 Networks – If 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.


    And that’s it, you can now share your gallery and album images to the social networks you’ve selected above using Envira’s Social Addon.

    If you’d like to see a gallery built with Envira’s Social Addon, just take a look at our Social Sharing Gallery Demo.


    FAQs

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

    A: No, unfortunately Instagram does not currently allow this functionality publicly for Envira to use. This is a feature we’re currently watching for!


    Q: Why aren’t my Summary Cards loading in the Tweet when I try to share on Twitter?

    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.

    To validate your Twitter link, first copy the share URL of the image from the Twitter share popup window as shown below:

    Once you’ve copied the share URL, go to https://cards-dev.twitter.com/validator and paste it into the Card URL field. Select the Preview Card button to validate the URL and check for any errors.

    Even if you are not planning on using Twitter, this tool is a good tool to use for all testing. If your site times out in this test for any reason, this can affect the other social network sharing and this tool will help you find the timeout error more quickly than Facebook debugging can.

    Q: Why are my images not showing in the share window when I’m sharing on Google+?

    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: Why don’t I see all the options that the screenshots above are showing?

    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.


    Q: Why is Facebook is sharing the wrong image?

    A: Please check with your hosting company that they are not blocking any meta tags in your sites header.php. If Facebook can’t find the correct tags for the image to share it will share the first image it comes to on the page after it loads.


    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

    Changelog

    1.3.9 (08-22-2017)

    • Fix: Minor bug fixes

    1.3.8 (08-08-2017)

    • Fixed: Priority for metadata
    • Fixed: Social icons on albums not displaying

    1.3.7 (06-27-2017)

    • Fix: Minor bugs with Facebook sharing.

    1.3.6 (05-16-2017)

    • Fix: Facebook Optional Text

    1.3.5 (04-04-2017)

    • Fix: Minor bug fixes

    1.3.4 (03-30-2017)

    • Fix: Minor bug fixes

    1.3.3 (03-08-2017)

    • Fix: Minor bug fixes

    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!