How to Install the widget on WordPress
This document covers the installation steps required to integrate Social9 with your WordPress website
Outline
- Get The Code Snippet From Social9 Console
- Add Script In Your Wordpress Theme
- Additional Setup For Inline(Horizontal) Widgets
Get The Code Snippet From Social9 Console
Copy the one-time installation code snippet under the wordpress installation guide section of the Social9 Console. This should look similar to,
<script
id="s9-sdk"
async
defer
content="<REPLACE WITH YOUR USER ID>"
src="//cdn.social9.com/js/socialshare.min.js"
></script>
Add Script In Your WordPress Theme
Open the header.php
under your theme directory which should be on the following path wp-content/themes/<REPLACE WITH YOUR ACTIVATED THEME DIR>
and paste the copied code in step 1 before the closing head tag(i.e. </head>
).
Additional Setup For Inline(Horizontal) Widgets
Add To The Top
Of Your Content
function social_share_top_of_page($content){
$before = <div id="<YOUR CREATED INTERFACE ID>"></div>;
$content = $before . $content;
return $content;
}
add_filter ("the_content","social_share_top_of_page");
Add To The Bottom
Of Your Content
function social_share_bottom_of_page($content){
$after = <div id="<YOUR CREATED INTERFACE ID>"></div>;
$content = $content . $after;
return $content;
}
add_filter ("the_content","social_share_bottom_of_page");
Inline Widget For Developers
You can create or configure inline widgets under the social9 configurations section and it will automatically be reflected on your website.
For inline widgets, you need to specify the location on your site where the widget should be rendered.
By default, the social9 inline widgets are rendered under the element with class name s9-widget-wrapper
although you can change the name in the console. This can be done by changing the Parent Container Selector
field under the Rules
section of the widget editor.
Paste the following snippet in your site where the inline widget should render.
For id
selectors
<div id="s9-widget-wrapper-id"></div>
For class
selectors
<div class="s9-widget-wrapper-class"></div>