Cornerstone Social Wall is an element created for Cornerstone WordPress Page Builder and is the best choice for those who are looking for an easy way to share their social networking updates on their website.
This element gives you a combined social media stream for all of your social network updates, and can display them as a wall. It supports 15 and growing social networks and includes about 30 feed options.
Your visitors will be able to share your posts on Facebook, Twitter, Google or Linkedin from your wall. They will also get the links to reply, retweet or favorite the Twitter posts from your wall. They can even filter your social wall by social network.
You can also change the style of your wall using the display options and/or custom CSS stylesheets, and make it unique to your website.
Cornerstone Social Wall
Created By: Axent Media
Created On: 09 February 2019
If you have any questions or suggestions concerning to Cornerstone Social Wall Element, please contact us via our page on CodeCanyon http://codecanyon.net/user/axentmedia or via our website at http://axentmedia.com/support/
Note: We provide free installation and configuration for clients. After purchase, simply contact our support desk and provide us your website information to get this service for free.
This is by far the easiest way of installing a WordPress plugin.
1. First of all, unzip the main "cornerstone-social-wall.zip" file that you have downloaded from CodeCanyon into your hard drive, there is another file named "cornerstone-social-wall-x.x.zip" inside that you can use it for installation.
2. Go to your WordPress admin panel.
Click on Plugins » Add New.
3. Then click on the
Upload Plugin button.
You will see a screen like the above one.
4. Click on the
Browse button and select the plugin file "cornerstone-social-wall-x.x.zip" from your hard drive and upload it.
You will be taken to “activate a plugin” page just like the following screenshot:
5. Click on
Activate Plugin link to complete the plugin installation.
Now you have installed the Cornerstone Social Wall element. You would have to read the quick start guide, setup your Social Feeds, change the display settings, configure the wall settings and configure the API settings to fit your needs.
If you currently have Social Wall plugin installed on your website and you want to upgrade the plugin to a new version, follow these steps:
WP Admin » Plugins, Deactivate and Delete your last "Cornerstone Social Wall" installation.
Note: You will not lose any data or configurations during the upgrading process.
After installation, you would have to create your Social Wall. Here we will explain you that how to create a Social Wall using your Facebook and Twitter feed on your website.
WordPress admin panel, select the page/post you would like to add the social wall on it with Cornerstone.
Add Sectionto create a section or select a previously created section.
Elementstab and search for the "social wall" in the search box.
SOCIAL WALLelement into the section area and you will have the Social Wall options panel at the left hand.
SOCIAL FEEDSsection, select the Facebook icon. You will get the Facebook feed options blow it.
SOCIAL FEEDSsection, select the Twitter icon. You will get the Twitter feed options blow it.
Click here for more information about other existing Social Feeds options.
Here we will explain various parts of Social Feeds Settings section and all the relevant social networks options. This section allow you to set up the networks that you want to include in your Social Wall.
To add a specific social network feed to your Social Wall, you need to declare it by going to its tab (selecting it's icon) and setup its related configuration options using an option (ID, username, search term, etc) depending on type of the network. Some social networks have multiple type of feeds available. You are required to use at least one of the options available for the social network feed to make it available in your Social Wall output.
Below is a summary of the options available for each network:
Facebook requires authentication to provide the feed's data. Click here for more details.
Facebook provides 4 different feed options:1. Facebook Page Feed
The feed of posts (including status updates), photos and links on this page.
Enter the page ID - e.g. 624290390999239 - Multiple IDs are accepted, separate IDs by a | pipe character.
You can set here to get sets of posts published by this page, or by others, or by both on this page.To Get Your Facebook Page/Group ID:
You can find it in your Facebook page/group setting.
Type in the following URL in your web browser: https://graph.facebook.com/username
Replace “username” with the name of your Facebook page profile. It should churn out a result including your page ID.
Shows all photos this page is tagged in. Enter the album ID or the page ID.To find a Facebook album ID:
Browse to your Facebook photos page and click on Albums - e.g. https://www.facebook.com/envatomarket/photos_stream?tab=photos_albums
Select an album - e.g. https://www.facebook.com/media/set/?set=a.676459932448951.1073741828.624290390999239&type=3
The album ID is the first set of numbers - in the example above, the album ID would be -
Shows all videos this page is tagged in. Enter the page ID.Image width
Select the image width for Facebook gallery album posts. If the selected size was not available, a smaller size will be selected.Date/Time range (since-until)
Get posts that are published within a certain date/time from Facebook feed.
Twitter requires authentication to provide the feed's data. Click here for more details.
Twitter provides 3 different feed options:1. Twitter Username
Twitter user latest Tweets - Twitter account should not be set as “Protect my Tweets”!
Enter a Twitter username without “@” - e.g. envato - Multiple usernames are accepted, separate usernames by a | pipe character.
To find your Twitter username, browse to your Twitter page - e.g. https://twitter.com/axentmedia
The Twitter username is the last word in the URL - in the example above, that would be -
To use a Twitter list use one of the following methods:
Enter the list ID - e.g.
Browse to the Twitter list - e.g. https://twitter.com/mashable/lists/social-media
Enter the owner screen name, then “/” followed by the list slug - using the example above, that would be - e.g.
To search enter the search terms/hashtag - e.g.
Select the image width for Twitter images.Extra Feed Data
Select the types of extra data you would like to be included in your Twitter wall output.Tweet ID range (since-max)
Get posts in a certain ID range from Twitter feed.
Instagram requires your API Access Token to provide the feed's data. Click here for more details.
Instagram provides 4 different feed options:1. Instagram User Feed
Get the most recent media published by the owner of the Access Token.
self => To get the feed from owner of the Access Token that is set in Board Settings and/or
Access Token string => extra Access Token from another Instagram account you want to get its feed.
To search by tag enter the tag name - e.g.
To show the latest posts by a location, enter the location ID.4. Instagram geographical location
To search by geographical location start with the latitude, longitude and distance in meters (up to a maximum of 5000) all separated by a "," - e.g.
Google+ requires an API Key to display feed data. Click here for more details.
Google+ provides 1 feed option:Google Profile ID
Enter your Google+ profile ID.To find your Google+ profile ID:
Browse to your Google+ page - e.g. https://plus.google.com/112592709425670873637
Your Google+ profile ID is the last set of numbers in the URL - in the example above, that would be -
RSS Feeds have 1 feed option:RSS feed URL
RSS feed URL latest entries.
Enter the RSS feed URL - e.g.
Select Snippet for displaying a summary of the post or select Full Text to include any links or images in the feed.
Pinterest provides 2 different feed options:1. Pinterest username
To get a Pinterest username, browse to your Pinterest page - e.g. https://www.pinterest.com/2013TopPins/
The Pinterest Username is the last word in the URL - in the example above, that would be -
To show a Pinterest board enter the username, then "/" followed by the board name.
Browse to a Pinterest board - e.g. http://www.pinterest.com/2013TopPins/techology-trends/
In the example above, you would select -
Youtube requires an API Key to display feed data. If you have previously generated and added an API Key for Google+ you wil not need to do it again for YouTube as they are both using the same key. Click here for more details.
Youtube provides 4 different feed options:1. Youtube username
YouTube user latest uploads.
Enter a YouTube username - e.g. username - Multiple usernames are accepted, separate usernames by a | pipe character.
To get a Youtube username, browse to the desired Youtube profile page - e.g: https://www.youtube.com/user/envatopsd
The Youtube username is the last word in the URL - in the example above, that would be -
To get a Youtube playlist ID, on the desired Youtube profile page click on the Playlists tab, select and browse to a playlist - e.g: https://www.youtube.com/watch?v=z4icxr8B7ik&list=PLsBcifUwsKVXunQPoySupBM6QCcWliTKi
The playlist ID is the last set of characters in the URL - in the example above, that would be -
To search enter the search terms - e.g.
Returns a list of videos uploaded by this channel - Enter a YouTube channel ID - e.g. UC1yP5nx6JNEBQI3ps2XFMpzThumbnail Size
Select YouTube image size.
Vimeo requires your API Access Token to provide the feed's data. Click here for more details.
Vimeo provides 1 feed option:Vimeo username
To get a Vimeo username, browse to the Vimeo profile - e.g: http://vimeo.com/bvanpeski
Your Vimeo username is the last name in the Vimeo profile URL - in the example above, that would be -
Size of thumbnail image.
Vine provides 1 feed option:Vine User Timeline
Returns a list of user timeline updates.
Enter the Vine username or ID - e.g.
Tumblr requires an API Key to display feed data. Click here for more details.
Tumblr provides 1 feed option:Tumblr Username
To get a Tumblr username, browse to your Tumblr blog page - e.g. http://ghostphotographs.tumblr.com/
The Tumblr Username is the first word in the URL - in the example above, that would be -
Select the width of the thumbnail image.Video Width
Width of inline video player.
Flickr requires an API Key to display feed data. Click here for more details.
Flickr provides 2 different feed options:1. Flickr User ID
To get your Flickr User ID:
To get a Flickr group ID:
Size of thumbnail image.
VK provides 2 different feed options:1. VK Wall Domain
Returns a list of posts on a user wall or community wall.
Enter the user or community short address - e.g.
wphelpme or, ID of the user or community that owns the wall - e.g.
id999999999. Multiple IDs are accepted, separate IDs by a | pipe character.
Returns a list of posts on a user wall or community wall.
Enter the ID of the user or community that owns the wall. By default, current user ID - e.g.
99999999. Use a negative value - to designate a community ID - e.g.
Apply filter and get specific sets of posts from VK wall feed.Image width
Select the image width for VK gallery album posts. If the selected size was not available, a smaller size will be selected.
SoundCloud requires an API Client ID to provide the feed's data. Click here for more details.
SoundCloud provides 1 feed option:SoundCloud User Tracks
The list of tracks of the user. Enter the SoundCloud Username - e.g.
Browse to your SoundCloud page - e.g. https://soundcloud.com/axentmedia
Your SoundCloud Username is the last set of characters in the URL - in the example above, that would be -
LinkedIn requires an API Key to display feed data. Click here for more details.
LinkedIn provides 1 feed option:LinkedIn Company Page ID
Returns a list of the company updates.
Enter the LinkedIn Company Page ID - e.g.
Deviantart provides 1 feed option:Deviantart username
Enter a Deviantart username - e.g.
Some networks require authentication to provide feed data.
In this quick guide we are going to show you how to create an App in Facebook and get the App Token. This is required for all Facebook feeds.
Attention: If you want to use this method, your app must be reviewed and approved by Facebook for the 'Page Public Content Access' permission.
Required For All Twitter Feeds.
Attention: If you want to use this method, your app must be reviewed and approved by Twitter.
After creating the Application, the Application Details page opens.
Copy the API Key, API Secret, Access Token and Access Token Secret values and paste into there relevant inputs in Cornerstone config panel and the extension should now have access to your Twitter feed data.
To create an Instagram API Access Token, use one of the following methods:
If you want to use this method with any other endpoint rather than "Instagram User Feed" (users/self/media/recent), it requires your app to be approved by Instagram.
To access the Wall Settings options, after selecting your created Social Wall element on the page, from Cornerstone panel click on the Wall Settings section/tab.Results Limit
Limiting the maximum number of results to display on the wall.Words Limit
Limiting the description words count to display for each item on the wall - Leave empty for no limit.Comment Words Limit
Limiting the comment words count to display for each item - Leave empty for no limit.Title Limit
Limit of the title words count to display for each item on the wall - Leave empty for no limit.Read more
If checked, the (…) character at the bottom of each feed item will be linked to the rest of the content.Ordering
Select whether to order the results depending on date of each item or randomly.Filter networks
If checked, a navigation bar of all active network icons will appear at the bottom of the rotating feed or above the social network wall. These icons will allow the user to filter the social wall items.Load more
Load more social items (Next page). If checked, a load more bar will appear at the bottom of the social network wall and loads more social items if clicked.Links
If checked, all links will open in a new window else they will be open in the parent window.Nofollow links
Add nofollow attribute on links. If checked, all links will have the status of nofollow.Use https
If checked, all links and images will be getting over https.Cache Time
The time delay for caching of Social Walls (in minutes) - reduces up download time. 0 Zero value means no caching.NOTE: Make sure the `cache` folder inside the plugin folder is writable by the server (depending on your web hosting server, permissions set to 755, 775, or 777). Crawl per request
Number of feed crawls per each request. 0 Zero value means to crawl all at once. (depending on your web hosting server resources, some servers can not read a lot of feeds at the same time).API connection timeout
Social API request connection timeout (in seconds). Depending on your web hosting server resources, some servers can not wait to process very long time.Stream Auto Update
If enabled, the social wall will get updated automatically without the need to refresh the page - If enabled, the `Cache Time` value will be ignored and considered as 0.Auto update interval
The time delay for updating the Social Wall (in minutes). Considering that there are some limits on social networks about the number of requests sent to their API, the minimum allowed value is 1.Item Output
Select the content blocks that you want to be included in each item on the Social Wall. Each social network may have different type of content blocks available.Comments Count
Enter the number of comments to display - You can disable comments from Item Output section - Set to 0 will not disable comments count.Likes
Number of likes to display - You can disable likes from Item Output section - Set to 0 will not disable likes.Lightbox content
This will define, how to display the Social Wall item information in lightbox window.Animated
This will enable/disable moving items with animation.Rotate Delay
The time delay for showing items. It will increase by each block item.Filter Direction
Let layout to start render from left to right or, right to left.Gutter X
The horizon spacing between the column - Leave empty for auto value.Gutter Y
The vertical spacing between the row - Leave empty for auto value.Item Width
Width of feed item (px) - Do not leave empty!Fix Size
Adjust and resize blocks to fill the gap in the wall - If enabled, the Item Width value will be ignored.Debug Log
If checked, all plugin errors will be logged in a file named "sb.log" in plugin folder. You can find all the problems that may occurs during the feed crawling process.
NOTE: Make sure the `sb.log` file inside the plugin folder is existed and writable by the server (depending on your web hosting server, permissions set to 644, 655, or 666).
The wall layout is the main displaying structure of output feed items. We have created 4 different layouts for this element. You can create your own layout and put in the /layout/ folder to use here.
To create your own custom layout:
<your-wordpress-site.com>/wp-content/plugins/cornerstone-social-wall/assets/css/styles.cssin your WordPress directory using an FTP client and add your own css at the end of the file.
wp-content/plugins/cornerstone-social-wall/layoutand create a new .php file with your own layout name - e.g. mylayout.php
You can also use the Cornerstone Custom CSS editor for styling your Social Wall. Any CSS rules included in Custom CSS editor section will automatically be inserted into the page.Item image style
This will define, how to display the image for each item on the Social Wall.User info position
This will define, how to display the user info for each item on the Social Wall. Picture will be only displayed if exists!Font Size
In order to set a font size
(in px) for the Social Wall. This is the base font size for all type of walls.
This color applies to your Social Wall background. Select the new background color of the and click elsewhere on the screen to close the colorpicker widget.Body Border Color
Select the new border color of the Social Wall and then click elsewhere on the screen to close the colorpicker widget.Body Border Size
In order to set a border size (in px) for the Social Wall.Body Border Radius
In order to set a border radius (in px) for the Social Wall.Body Background Image
In order to set a background image for the Social Wall.Font Color
Select the new font color for the feed item and then click elsewhere on the screen to close the colorpicker widget.Link Color
Select the new color for the feed item\' links and then click elsewhere on the screen to close the colorpicker widget.Item Background Color
Select the new background color for the feed item and then click elsewhere on the screen to close the colorpicker widget.Item Border Color
Select the new border color for the feed item and then click elsewhere on the screen to close the colorpicker widget.Item Border Size
In order to set a border size (in px) for the feed item.Filter networks ordering
Order of the filtering navigation bar that appear at the bottom of the rotating feed or above the social network wall.
Sometimes you may wanted to pin/stick an item on top of your created Social Wall or remove an item from the Social Wall. To do this:
If you want to remove an item from the Social Wall, enter the links of social items that you are going to remove from the Social Wall - Each link in a new line.
Custom CSS for styling the Social Wall can be entered into this text field. Any CSS rules included in this text area will automatically be inserted into the page.
Look at the following example screenshot:
Each item on the wall has a date/time in its footer area that is linked to the original post. You can copy this link to use in `Remove Items` and `Pinned Items` sections.
To translate Social Wall to your local language:
csw.potthat is located in the
Assetsfolder in your downloaded CodeCanyon zip package file, in Poedit.
csw-nl_NL.po, and save the file somwhere into your computer.
<your-wordpress-site.com>/wp-content/plugins/cornerstone-social-wall/language/(Social Wall language folder in your WordPress plugin directory) on your website using an FTP client.
Find more info at Translate WordPress.
This message is usually caused for one of the following reasons:
Social Feeds Settingssection. Read about Social Wall configuration.
API Credentialssection or is not valid. Read this topic for more details about API Credentials configuration.
After fixing the problem, try cleaning the cache from
Wall Settings section.
If you see the shortcode text appears on your website instead of the Social Wall, it is caused for one of the following reasons:
There could be one the following reasons that your Facebook feed may not work:
Cornerstone Social Wall Element - Created By Axent Media - CodeCanyon license.
jQuery - Released under the terms of the MIT license.
Freewall - Created by Minh Nguyen - Released under the MIT license.
Font Awesome - by @davegandy - Licensed under MIT
Colorbox - by Jack Moore - Licensed under MIT
jQuery Expander - by Karl Swedberg - Licensed MIT