Social Media

Printer-friendly versionPrinter-friendly version

By adding social networking to your site, you are providing your customers with a means to share what they love about your business to their friends, who will hopefully become your future customers.

Their are several ways in which you may incorporate social media into your website.

SOCIAL NETWORK: ICON LINKS | FEED/SHARE BUTTONS

ADDING SOCIAL NETWORK ICON LINKS

Utilize the built in social media icons some themes comes with by inputting your social media page url for the corresponding icon. If the theme you have chosen does not come with built-in social media icons, you can create your own block to display them.

PREPARE TO CREATE YOUR BLOCK

OBTAIN YOUR ICONS
Most social media services provide default logo icons for your use:

Facebook   Twitter   Pinterest   Instagram

Each has its own set of guidelines and rules for using its logo, please read those carefully before placing the icon on your site.In most cases, you should use icons that are the same size.

MAKE NOTE OF YOUR SOCIAL MEDIA PAGE URLS
Navigate to the social media page you will be linking to and make note of the url for the page.

Example: https://www.facebook.com/americanbooksellers

NOTE: Make sure the link you’re using includes https

CREATE YOUR BLOCK

Navigate to: Structure > Blocks > Add Blocks

  1. Title: This text will be the header on your block. If you do not wish for a title to be displayed you may leave it blank.
  2. Block Description: Example: Social Media Icons
  3. Body: Use the built in WYSIWYG editor to add your icons

    1. Select the ‘Image’ icon in the editing toolbar
    2. Select ‘Browse Server’
    3. Select ‘Upload’ in the ‘File Browser’ window
    4. Select ‘Browse’ or ‘Choose File’
    5. Locate the file on your local drive, select it, click ‘Open’
    6. Select ‘Upload’
    7. Double click the ‘File’
    8. Enter your ‘Image Properties’ as desired: We highly recommend removing any set width/height.
    9. Select the ‘Link’ tab
    10. Enter the URL to your Social Media Page
    11. Set the target to ‘New Window’
    12. Select ‘OK’

Repeat steps ‘a’ through ‘l’ until all images have been added

  1. Region Settings: Select the region you would like your block to be displayed
  2. Visibility Settings: Adjust your visibility settings to your preference.         
  3. Save

Your social media block is now created and placed in the region of your choice. You should be able to view it on your site as an anonymous user.

ADDING SOCIAL NETWORK WIDGETS, FEEDS & SHARE BUTTONS

FACEBOOK  | TWITTER | INSTAGRAM | PINTEREST

Adding social networking widgets, feeds and share buttons will require you to obtain code from that particular social network (Facebook, Twitter, Instagram etc). You will need your login information for those sites to continue.

FACEBOOK

OBTAIN THE CODE FROM FACEBOOK

Visit the Facebook Developers Documentation for Plugins

Select the instructions for the type of social plugin you want to add, the most common are:

Enter any customizations to the design you would like that Facebook allows and select ‘Get Code’. Facebook is going to give you two sets of code JavaScript SDK and HTML. We highly recommend you save both of these as a txt (Notepad) file locally.

PLACE THE JAVASCRIPT CODE ON YOUR SITE

Navigate to: Structure > Blocks > Add Blocks

  1. Enter ‘Block description’ - Example: Facebook Javascript Code
  2. Select the ‘Source’ button in the editor for the ‘Block Body’ and make sure the ‘Text Format’ is set to ‘Full HTML’ then paste the JAVASCRIPT code into the body area
  3. Under the ‘Region Settings’ for the theme you’re currently using select ‘header’ (or one of the regions located towards the top of your page).
  4. Confirm ‘All pages except those listed’ is chosen under ‘Show block on specific pages’ - your javascript code needs to be on every page your wish to display the widget.
  5. Save block

You will now have placed the javascript code on your site. As long as you did not include a title on the block and only pasted the javascript code into the body the block will remain hidden from view on your site as it should.

PLACE THE HTML CODE ON YOUR SITE

Navigate to: Structure > Blocks > Add Blocks

  1. Enter ‘Block description’ - Example: Facebook HTML Code
  2. Select the ‘Source’ button in the editor for the ‘Block Body’ and make sure the ‘Text Format’ is set to ‘Full HTML’ then paste the HTML code into the body area
  3. Under the ‘Region Settings’ for the theme you’re currently using select the region you would like to place the block in - this is where your Facebook widget will appear to visitors
  4. Confirm ‘All pages except those listed’ is chosen under ‘Show block on specific pages’ - and that the correct list of pages is entered.
  5. Save block

You will now have placed the html code on your site and the widget should appear in the region chosen.

TWITTER

OBTAIN THE CODE FROM TWITTER

Visit the Twitter Developer Plugin Overview

Select the instructions for the type of social plugin you want to add, the most common are:

Follow the instructions for the social plugin you have selected and once completed Twitter will provide you with HTML code. We highly recommend you save this code as a txt (Notepad) file locally.

PLACE THE HTML CODE ON YOUR SITE

Navigate to: Structure > Blocks > Add Blocks

  1. Enter ‘Block description’ - Example: Twitter HTML Code
  2. Select the ‘Source’ button in the editor for the ‘Block Body’ and make sure the ‘Text Format’ is set to ‘Full HTML’ then paste the HTML code into the body area
  3. Under the ‘Region Settings’ for the theme you’re currently using select the region you would like to place the block in - this is where your Twitter widget will appear to visitors
  4. Confirm ‘All pages except those listed’ is chosen under ‘Show block on specific pages’ - and that the correct list of pages is entered.
  5. Save block

You will now have placed the html code on your site and the widget should appear in the region chosen.

INSTAGRAM

OBTAIN THE CODE FROM INSTAGRAM
 
The code provided by Instagram to embed a post only allows a single post to be embedded. Below we've provided the instructions for the default option from Instagram and instructions for using a third-party servicer called LightWidget, which provides a multi-post responsive feed.

Visit the Instragram Developers Instructions for Embedding

Follow the instructions for obtaining the ‘embed’ code for one of your posts.  We highly recommend you save this code as a txt (Notepad) file locally. Please be aware Instagram only provides ‘embed’ codes for posts by users with public profiles. If your profile is set to private you will not be able to embed any posts into your website.

PLACE THE HTML CODE ON YOUR SITE

Navigate to: Structure > Blocks > Add Blocks

  1. Enter ‘Block description’ - Example: Instagram HTML Code
  2. Select the ‘Source’ button in the editor for the ‘Block Body’ and make sure the ‘Text Format’ is set to ‘Full HTML’ then paste the HTML code into the body area
  3. Under the ‘Region Settings’ for the theme you’re currently using select the region you would like to place the block in - this is where your Instagram widget will appear to visitors
  4. Confirm ‘All pages except those listed’ is chosen under ‘Show block on specific pages’ - and that the correct list of pages is entered.
  5. Save block

You will now have placed the html code on your site and the widget should appear in the region chosen.

LIGHTWIDGET

OBTAIN THE CODE FROM LIGHTWIDGET

  1. Visit lightwidget.com and follow the instructions to create your widget
  2. You will need to upgrade to the paid version of this widget in order to place this code on your site as it needs to support the HTTPS protocol.
  3. Save this code they provided as a txt (Notepad) file locally. Please be aware your Instagram account must be set to ‘public’.

PLACE THE HTML CODE ON YOUR SITE
Navigate to: Structure > Blocks > Add Blocks

  1. Enter ‘Block description’ - Example: Instagram HTML Code
  2. Select the ‘Source’ button in the editor for the ‘Block Body’ and make sure the ‘Text Format’ is set to ‘Full HTML’ then paste the HTML code into the body area
  3. Under the ‘Region Settings’ for the theme you’re currently using select the region you would like to place the block in - this is where your Instagram widget will appear to visitors
  4. Confirm ‘All pages except those listed’ is chosen under ‘Show block on specific pages’ - and that the correct list of pages is entered.
  5. Save block

You will now have placed the HTML code on your site and the widget should appear in the region chosen.

PINTEREST

OBTAIN THE CODE FROM PINTEREST

Visit the Pinterest Developers Documents for Widgets

Select the instructions for the type of social plugin you want to add. The most common are:

Pin It Button
Board Widget
Profile Widget

Enter any customization that Pinterest allows, to the design. Pinterest will provide you with two sets of code - JavaScript and HTML. We highly recommend you save both of these locally as a .txt (Notepad) files, since both have to be added to your site.

PLACE THE JAVASCRIPT CODE ON YOUR SITE

Navigate to: Structure > Blocks > Add Blocks

  1. Enter ‘Block description’ - Example: Pinterest Javascript Code
  2. Select the ‘Source’ button in the editor for the ‘Block Body’ and make sure the ‘Text Format’ is set to ‘Full HTML’. Then paste the JAVASCRIPT code into the body area.
  3. Under the ‘Region Settings’ for the theme, select ‘header’ or one of the regions located towards the top of your page.
  4. Confirm ‘All pages except those listed’ is chosen under ‘Show block on specific pages’ - your javascript code needs to be on every page your wish to display the widget.
  5. Save block

The Pinterest javascript code has now been placed on your site. As long as you did not include a title on the block and only pasted the javascript code into the body, the block will remain hidden from view on your site as it should.

PLACE THE HTML CODE ON YOUR SITE

Navigate to: Structure > Blocks > Add Blocks

  1. Enter ‘Block description’ - Example: Pinterest HTML Code
  2. Select the ‘Source’ button in the editor for the ‘Block Body’ and make sure the ‘Text Format’ is set to ‘Full HTML’. Then paste the HTML code into the body area
  3. Under the ‘Region Settings’ for the theme you’re currently using, select the region you would like to place the block in - this is where your Pinterest widget will appear to visitors
  4. Confirm ‘All pages except those listed’ is chosen under ‘Show block on specific pages’ - and that the correct list of pages is entered.
  5. Save block

The Pinterest html code has now been placed on your site and the widget will appear in the region chosen.

SOCIAL MEDIA MARKETING

Social media marketing refers to the process of gaining traffic or attention through social media sites such as Facebook, Twitter, Instagram, etc.. Social media popularity continues to grow and has become a popular way for customers to stay connected with their preferred businesses and accounts for a large percent of time spent online. The proper social media marketing campaign can make a world of difference to a small business.

During Wi12 Kelly Justice of Fountain Bookstore provided a strategy guide for book stores, review the guide here: Building A Social Media Event to Drive Sales That Get Results: Fountain Bookstore Strategy Guide.

IndieCommerce Help Documents

 

About ABA

The American Booksellers Association, a national not-for-profit trade organization, works with booksellers and industry partners to ensure the success and profitability of independently owned book retailers, and to assist in expanding the community of the book.

Independent bookstores act as community anchors; they serve a unique role in promoting the open exchange of ideas, enriching the cultural life of communities, and creating economically vibrant neighborhoods.

Contact

PRESS INQUIRIES: [email protected]

INDIECOMMERCE: [email protected]

ALL OTHER INQUIRIES: [email protected]

 

 

Copyright 2024 American Booksellers Association. BookWeb is a registered trademark of ABA.
Privacy Policy, Cookie Policy, Accessibility Statement