Setup Social Sharing Links

For this example, we’ll use the “Herbert Hoover” skin, but any skin can be used for this if you add social icon elements to the skin. Before continuing, review the documentation’s Item Skin Editor section to familiarize yourself with this part of the plugin’s admin.

 

Select the icon with your mouse in the preview canvas:

social_1

 

Right-click the icon, and choose “Inspect Element” (for this tutorial, I’m using Firefox, but all the major browsers now include this option).

social_2

 

Copy the raw HTML highlighted in the browser’s console.

social_3

 

Next, visit this website: http://www.sharelinkgenerator.com/

Don’t worry about entering a link for now (we’ll add that soon!). For now, just click the “Create the Link” button for whatever social site you want. Then copy the “URL Only” part.

social_4

 

Next, inside the “Layer Settings” section, choose “Text/HTML” for the element’s “Source”:

social_5

 

Next, add the following HTML as shown in the following screenshot:

social_6

 

Next, paste the HTML you copied from the browser’s console inside the hyperlink:

social_7

 

Next, paste the url you copied from the “sharelinkgenerator” site into the “href” part of the hyperlink:

social_8

 

Finally, add %eg-url% at the end of the “href” part like this:

social_9

 

And then save the skin:

social_10

 

Next, add a new Custom Meta:

meta_data_handling

add-new-meta

 

Enter “url” into the “Handle” part, and then the name can be anything.

add-meta-value

 

Finally, visit one of the posts being pulled into the Grid. Assuming you want to share the post associated with the Grid Item, copy the post’s permalink as shown in the screenshot below. Otherwise you can write anything you want into the “My Social URL” field instead.

social_12

 

Next, scroll down the page, and enter the url into the “Essential Grid Settings -> Custom Meta -> My Social URL” part:

social_13

 

Finally, save the post, and view your Grid in the front-end of your site. Then click the icon you setup in for the post’s Grid Item to see it working. Then repeat the process for any other icons you want to setup.

social_12