How to: pre-populate social media share buttons
When 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.
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.
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)
c. What the user sees in Facebook when he/she uses your Facebook Share button:
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)
c. What the user sees in LinkedIn when he/she uses your LinkedIn Share button:
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)
c. What the user sees in Twitter when he/she uses your Twitter Share button:
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.
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)
c. What the user sees when he/she uses your Email Share button:
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:
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