How to add social buttons to DJ-Classifieds

How to add social buttons to DJ-Classifieds

DJ-Classifieds allows you to display social buttons from various sharing platforms. Take a look at a few simple steps on how to put them to the DJ-Classifieds single ads.

Step1: Get the social buttons’ code

Many sharing tools allow you to generate a code that you can later use in the DJ-Classifieds pages. Let’s take a look at some popular ones.

Each popular social network provides a tool for generating social buttons. Let’s take the Facebook Share button as an example:

  1. Visit the page: https://developers.facebook.com/docs/plugins/share-button.
  2. Customise the share button. We suggest removing the default URL to share.                                                                                                                  

    Click on “Get Code” to generate the code.
  3. Copy the code (1) and place it right after the opening <body> tag in your template. Copy the code (2) - it will be needed for the next step.                                                                                                                                                  

img2

The above steps look very similar to other popular social networks like Twitter, Google+, LinkedIn, etc.

AddToAny

Popular and totally free sharing platform. You do not need to register or have a user account to generate and display social share buttons. It also supports mobile & responsive layouts and is highly customizable.

  1. Visit the page: https://www.addtoany.com/.
  2. Click on “Get the Share Buttons” and choose “Website”.                                                                                                                                                 
  3. Choose services (1) for your site and click on “Get Button code” (2). Copy the code (3) - it will be needed for the next step.                                                                                                                                                

AddThis

It is probably the most popular sharing platform. It provides many options for configuring the position and appearance of the share buttons. It is also mobile-friendly and gives a lot of statistics.

  1. Visit the page: https://www.addthis.com
  2. Log in or sign up if you do not have an account.
  3. In your dashboard, go to “Tools” and “Add New Tool”.                                                                                                                                                    
  4. Select the “Share Buttons” tool.                                                                                                                                                                                   
  5. Select the Inline (1) type and click on “Continue” (2).                                                                                                                                                    
  6. Here you can change some options and design of the buttons (1). Once you are done, click on “Save & Continue” (2).                                                                                                                                                       
  7. Copy the code (1) and place it right after the closing </body> tag in your template. Copy the code (2) - it will be needed for the next step.                                                                                                                                                

img9 

Share this

It is also one of the most popular services offering share buttons. It comes with a user-friendly builder that will help you to configure the look of the buttons. You also have access to social analytics.

  1. Visit the page: https://www.sharethis.com
  2. Log in or sign up if you do not have an account.
  3. In your dashboard go to "Share Buttons" (1) and select "Inline Share Buttons" (2)


  4. On this screen, you can choose channels and change the design of the buttons. Once you complete, make sure the buttons are enabled (1) and click the "Update" button (2).


  5. Click on the "Get the code" button and a popup window will appear. Copy the code which you need to place in the head section of your template.



    Check how to place the code into the head section of a Joomla-Monster template.
    Go to Extensions -> Templates -> Styles -> [template name] -> Advanced Features -> Developer Tools. In the Code Injection field you need to paste the previously copied code:


  6. Copy the code - it will be needed for the next step.


    7. AMPZ Joomla plugin

    There are also some ready Joomla plugins that you may use for the same purpose. One of them is AMPZ from roosterz.nl. It is a commercial plugin with many interesting features like display anywhere, responsive layout, sharing statistics, customization and more. Everything is managed from the Joomla dashboard.

    1. Visit the page: https://www.roosterz.nl/
    2. Log in or sign up if you do not have an account.
    3. Get AMPZ: https://www.roosterz.nl/joomla-extensions/ampz/pricing
    4. Download and install the AMPZ package on your Joomla.
    5. Go to Components -> AMPZ Social Sharing (1). Click on “Shortcodes” (2) and “New” (3).                                                                                                                                                                    
    6. Add a name (1) for the shortcode and enable the social networks (2). Once you are done, click on “Save”.                                                                                                                                                                            
    7. The shortcode you will need for the next step is {ampz:shortcode-name}, in our example, it is {ampz:DJ-Classifieds}.

    Step2: Paste the code into DJ-Classifieds

    Now, you are ready to paste the code into the DJ-Classifieds component. In your Joomla dashboard, go to Components -> DJ-Classifieds -> Options.

    On the “Views” tab (1) you will find the “Social buttons code” field where you need to paste the code from the previous step (2):

    img12

    You can also choose the position (3) where the social buttons are displayed on the DJ-Classifieds Single Ad view. Remember to “Save” (4) parameters when you finish.

    Final Result

    Now, it is time to visit the page and see how the social share buttons are present.

    Facebook Share Button

    img13

    AddToAny

    img14

    AddThis

    img15

    Share this

    img7

    AMPZ

    img16


      • Related Articles

      • User profiles in DJ-Classifieds

        We want to show you how to manage the user profile in DJ-Classifieds. In our short article, you can learn how to make a profile, see how the registration process goes and check how the user's profile looks on the front page. The administrator can ...

      • Auctions in DJ-Classifieds

        DJ-Classifieds component allows hosting auctions on your Joomla powered website! Users can run their own auctions and sell items to your site visitors! To make it everything more comfortable, we will show you how to manage the auctions, place a bid ...

      • EasySocial integration for DJ-Classifieds

        In this tutorial, I’ll show you how to install both Joomla plugin and EasySocial application. I will also show a basic configuration that can help you display ads on your community stream and social profile. This plugin comes free with the ...

      • How to configure DJ-Classifieds

        DJ-Classifieds installation  It would help if you were logged-in as Joomla administrator. Open the " Extension Manager ". To Upload & Install DJ-Classifieds component, click " Choose file " and choose the extension package from your disk. When the ...

      • Extra/Custom fields in DJ-Classifieds

        The DJ-Classifieds component allows assigning additional fields to the advert details from a certain category. Settings To create a custom field, click on the Extra Fields button from the Control Panel, then click New from the top right toolbar, and ...