How to add Social Icons to page/post

To add social icons to your page simply click “Social Link” shortcode button, that can be found integrated in default editor panel in visual mode. See image below.


Social Link Settings

Social Link shortcode comes with following options:

“Type of Button” option allows you to choose one of the 11 available button types: “RSS”, “Facebook”, “Twitter”, “Dribble”, “Email to”, “Google+”, “Flickr”, “Vimeo”, “LindedIn”, “Youtube”, “Pinterest”. Choose the one you need and it will be possible to preview it in block below.

“URL for Button” – a link for you social button.

“Link target” – you can check this option to open button link in a new window.

After you are done with settings, click “Insert” button.

Shortcode will be placed in content, inside your editor. Exactly where the syntax is placed depends on where your cursor is. So don’t forget to place cursor in correct place in your content, before adding shortcode.



Simple Social Icon Example



[social_link type="facebook_account" url="http://www.facebook.com" target="on" ] 
[social_link type="rss_feed" url="#" target="" ]
[social_link type="twitter" url="#" target="on" ]
[social_link type="dribble_account" url="#" target="on" ] 
[social_link type="email_to" url="#" target="" ] 
[social_link type="google_plus_account" url="#" target="" ] 
[social_link type="flicker_account" url="#" target="" ] 
[social_link type="vimeo_account" url="#" target="" ]
[social_link type="pinterest_account" url="#" target="" ] 
[social_link type="youtube_account" url="#" target="" ]
[social_link type="linkedin_account" url="#" target="" ]	

to Top






How to add Share Buttons to page/post

To add share buttons to your page simply click on Share Button shortcode button, that can be found integrated in default editor panel in visual mode. See image below.



Share Button Settings

Share Button shortcode comes with 4 tabs:“Google+”, “Twitter”, “Facebook”, “Pinterest”. Each of these tabs has its own options.



Google+

Google+ tab comes with following options:

“Size” option allows you to choose one of the provided button sizes: “Small (15px)”, “Standard (24px)”, “Medium (20px)”, “Tall (60px)”.

“Type of Annotation” option allows you to choose type of annotation for your share button or disable the annotation.

In “Advanced options” you can fill your URL to +1 and check “HTML5 valid syntax” checkbox, if you need HTML5 valid html-syntax.

After you are done with settings, click “Insert” button.

to Top



Shortcode will be placed in content, inside your editor. Exactly where the syntax is placed depends on where your cursor is. So don’t forget to place cursor in correct place in your content, before adding shortcode.



Example of Google+ Share Buttons




[social_button button="google" gsize="medium" gannatation="inline" gurl="#"]
[social_button button="google" gsize="tall" gannatation="bubble" gurl="#"]
[social_button button="google" gsize="small" gannatation="none" gurl="#"]
[social_button button="google" gsize="standard" gannatation="bubble" gurl="#"]

to Top



Twitter

Twitter tab comes with following options:

“Count box position” allows you to choose count box position to be horizontal or vertical, or you can disable it.

Check “Button size” checkbox, if you want to your twitter button be double-sized.

“URL of the page to share” option allows you to define a URL of page to share. Leave it blank to use URL of your editing page.

“Recommended accounts” field allows you to define a recommended Twitter accounts.

“Via user” option allows you to choose, via witch Twitter user you want to share your page.

“Default Tweet text” is the text, which will be posted by default.

After you are done with settings, click “Insert” button.



Shortcode will be placed in content, inside your editor. Exactly where the syntax is placed depends on where your cursor is. So don’t forget to place cursor in correct place in your content, before adding shortcode.


to Top



Examples of Twitter Share Buttons





[social_button button="twitter" turl="#" ttext ="twitter share button shortcode" tcount ="none" tsize ="large" tvia ="themoholics" trelated ="themoholics"]
[social_button button="twitter" turl="#" ttext ="Twitter share button shortcode" tcount ="vertical" tvia ="themoholics" trelated ="themoholics"]

to Top



Facebook

Facebook tab comes with following options:

“URL to Like” – you can define, which URL you want to share.

“Send Button” – check this option to add send button.

“Layout Style” option allows you to choose share button layout style. “Standard”, “Button Count” and “Box Count” styles is availeble.

“Width” – define your button width in pixels.

“Show profile picture” – check this option, if you want to show Facebook users profile photo.

“Verb to display” – select a button text to display. “Like” and “Recommend” verbs are availeble.

“Color Scheme” option allow you to choose light or dark color scheme of your button.

After you are done with settings, click “Insert” button.



Shortcode will be placed in content, inside your editor. Exactly where the syntax is placed depends on where your cursor is. So don’t forget to place cursor in correct place in your content, before adding shortcode.


to Top



Example of Facebook Share Buttons


[social_button button="facebook" furl="http://www.facebook.com" fsend="on" flayout="box_count" fshow_faces="on" fwidth="250" faction="like" fcolorsheme="light"]
[social_button button="facebook" furl="http://www.facebook.com" flayout="standard " fwidth="300" faction="recommend" fcolorsheme="light"]
[social_button button="facebook" furl="http://www.facebook.com" flayout="button_count" fwidth="300" faction="like" fcolorsheme="dark"]
[social_button button="facebook" flayout="standard " fshow_faces="on" fwidth="300" faction="like" fcolorsheme="light"]

to Top



Pinterest

Pinterest tab comes with following options:

“Page the pin is on” – specify URL of your page.

“Image to be pinned” – specify URL of your image.

“Pin Count” option allows you to choose horizontal or vertical layout, or to disable Pin Count.

“What they’re pinning” option allows you to specify the description of your pinning.

After you are done with settings, click “Insert” button.

to Top



Shortcode will be placed in content, inside your editor. Exactly where the syntax is placed depends on where your cursor is. So don’t forget to place cursor in correct place in your content, before adding shortcode.



Example of Pinterest Share Button



[social_button button="pinterest" purl="" pmedia="" pcount="horizontal" ptext="Some custom text"]

to Top