how to: pre-populate social media share buttons

How to include pre-populated social media share buttons in your HTML, blog posts and PDF files  Hand-drawn icons by ~TheG-ForceWhen you include email and social media sharing buttons on your Web pages, blog postings, and within your PDF documents, this reminds readers to share your content via Twitter, Facebook, LinkedIn and email. This is a tremendous way to gain more traffic to your content.


The key: Make it easy for the user to share.

Pre-populate the info about your content in share buttons so the message automatically "writes" to the user's social media accounts so they can pass the word.

How do you do it?

Follow the step-by-step instructions below to create your own share buttons.

You can also share this article with others who might be interested by clicking the share buttons below.

STEP 1: Find the social media icons you want to use and upload the images to your Web server.

RESOURCE: Visit The Best Social Media Icons All In One Place to find social media icon sets that are free to use.

I am using the Facebook, LinkedIn, Twitter and Gmail icons from the Polaroid Icon Set provided by webtoolkit4.me for this tutorial.


Share on Facebook -- How to include pre-populated social media share buttons in your HTML, blog posts and PDF files by Mary Gillen Share on LinkedIn -- How to include pre-populated social media share buttons in your HTML, blog posts and PDF files by Mary Gillen Share on Twitter -- How to include pre-populated social media share buttons in your HTML, blog posts and PDF files by Mary Gillen Share via Email -- How to include pre-populated social media share buttons in your HTML, blog posts and PDF files by Mary Gillen

STEP 2: Using your favorite text or HTML editing application, configure the share button code for popular social media accounts you want readers to use.

FACEBOOK

a. Highlight and copy this code to your editing app to configure your Facebook share button:

<a href="http://www.facebook.com/share.php?u=http://marygillen.com/prepopulate-social-media-share-buttons.cfm"><img src="http://yourdomain.com/images/facebook_icon.png" border="0" /></a>



b. What you have to change (indicated in yellow)

Code for Facebook Share Button -  Mary Gillen

c. What the user sees in Facebook when he/she uses your Facebook Share button:

Share Code Placed in Facebook - Mary Gillen


LINKEDIN

a) Highlight and copy this code to your editing app to configure your LinkedIn share button:

<a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A//marygillen%2ecom/prepopulate-social-media-share-buttons.cfm&title=How%20to%20pre-populate%20social%20media%20share%20buttons&summary=Remind%20readers%20to%20share%20your%20content%20via%20
Twitter,%20Facebook,%20LinkedIn,%20and%20email%20by%20including%20
share%20buttons%20in%20your%20HTML,%20blog%20posts%20and%20PDF
%20files.&source=yourdomain.com"><img src="http://yourdomain.com/images/linkedin_icon.png" border="0" /></a>

b) What you have to change (indicated in yellow)

Code for LinkedIn Share Button -  Mary Gillen

c. What the user sees in LinkedIn when he/she uses your LinkedIn Share button:

Share Code Placed in LinkedIn - Mary Gillen


TWITTER

a) Highlight and copy this code to your editing app to configure your Twitter share button:

<a href="http://twitter.com/?status=How+to+pre-populate+%23social+%23media+%23share+%23buttons+%23tutorial+http://bit.ly/8504xO+from+@marygillen+%23content+%23marketing+%23idea"><img src="http://yourdomain.com/images/twitter_icon.png" border="0" /></a>

b) What you have to change (indicated in yellow)

Code for Twitter Share Button -  Mary Gillen

c. What the user sees in Twitter when he/she uses your Twitter Share button:

Share Code Placed in Twitter - Mary Gillen

NOTE: The character group %23 = hash symbol (#). This allows you to tag certain words in the Tweet message so it stands a better chance of being found in Twitter Search. | The + sign creates one space between words.


EMAIL

a) Highlight and copy this code to your editing app to configure your Email share button:

<a href="mailto:?subject=How%20to%20Pre-Populate%20Social%20Media%20Share%20Buttons&body=I%20thought%20you%20might%20be%20interested%20in%20this%20
info%20on%20how%20to%20code%20social%20media%20share%20buttons.
%20Check%20it%20out.%0A%0Ahttp%3A%2F%2Fmarygillen.com%2Fprepopulate-social-media-share-buttons.cfm"><img src="http://yourdomain.com/images/email_icon.png" border="0" /></a></p>

b) What you have to change (indicated in yellow)

Code for Email Share Button -  Mary Gillen

c. What the user sees when he/she uses your Email Share button:

Share Code Placed in Email Message - Mary Gillen

NOTE: The character group %20 creates one space between words.


STEP 3: Add your newly-configured Share button code to your HTML pages, blog postings and PDF documents. Please note that the user needs to be logged into his/her social media accounts in order to share this pre-populated code.

Share this article via your social media accounts:
Share on Facebook -- How to include pre-populated social media share buttons in your HTML, blog posts and PDF files by Mary Gillen Share on LinkedIn -- How to include pre-populated social media share buttons in your HTML, blog posts and PDF files by Mary Gillen Share on Twitter -- How to include pre-populated social media share buttons in your HTML, blog posts and PDF files by Mary Gillen Share via Email -- How to include pre-populated social media share buttons in your HTML, blog posts and PDF files by Mary Gillen

Visit The Best Social Media Icons All In One Place to find social media icon sets that are free to download and use.



Hand-drawn Icons: ~TheG-Force



You may also like these articles

Use HTML & CSS Rather Than Images for Call-to-Action Buttons

Use Your Niche Keywords to Find Followers Who Are Prospects, Not Competitors

Use Human Face Photos to Improve Contact Call-to-Action Results

Find Out Who is Pinning Content from Your Web Site





Web Code Training for Marketers

Now is the time for marketers, freelancers and consultants to take the initiative to learn to code. In the future, marketing directors will expect marketers to have coding skills. If you are an accountant, lawyer, photographer, or other professional who owns his/her own business, you need to know the coding that makes digital marketing possible via the Web and social media platforms. Spend one day online with Mary for an accelerated learning experience that takes you from zero skills to coding confidence in a single day. Learn more, find schedule and register for Web Code Training for Marketers