How to add social media links or plugins to your website (advanced)

If you'd like to learn how to add social media icons to the header of your website, please view our Add Social Media user guide. This article will go over the various ways of adding Social Media Feeds / Share / Like Buttons to your website. Some of these options require uploading HTML as well as JavaScript. For the security of our servers and our client’s websites, we do not allow you to upload JavaScript or JQuery within the portal. For this reason, to have the social media options visible on your website, you’ll need to provide the JavaScript to us in an email to [e-mail]. Please allow up to two business days for this to be implemented. You will however be responsible for uploading the HTML portion. This will require a very basic understanding of how to edit code such as HTML. If you have any questions, please do not hesitate to let your Support Team at VCG know!

Below are different Facebook Plugin Options:

Facebook Like Box

You will retrieve the required code by going here: https://developers.facebook.com/docs/plugins/page-plugin

1. First, we'll need to find your Facebook URL, for example I’ll use VCG's: https://www.facebook.com/VisualCommunicationsGroup
2. Then, navigate to the Developer's Facebook URL above (https://developers.facebook.com/docs/plugins/page-plugin).
3. Depending on the attributes you use, the appearance will differ. For instance, you can have a smaller header, hide your cover photo, or remove the "Friend's Faces". If your profile only has a few likes, you may want to not have the Friends Faces display. However, we do always suggest keeping the "Adapt to plugin container width" checked.
4. Here are two examples of how your Facebook box could look like depending on the attributes you use:
5. Now that we've adjusted the dimensions and display options, let's get the code! To do this, simply click the "Get Code" button.
6. Within this new window, select "IFrame" at the top. Click on the code which will highlight all of the code, then click either "Ctrl + C" or right-click and choose "Copy" to copy this code.
7. Now, we'll need to paste this HTML where we'd like this plugin to display on the website. To paste this code, you’ll want to navigate to where you’d like the box to display. Click the “Source” button to toggle into the HTML view, then paste the code. If you’re unsure of how to do this, feel free to contact VCG for more information. Also, you can view this article for more information - click here (see body content section). Note that within the preview within MyVCG.com will not display the whole box. It will only have the name of the Facebook Page. In this example, you'll see a link for "Visual Communications Group". However, you should be able to see the Facebook box on your website immediately. If you do not see it, please refresh your page. If you're still not seeing it, ensure that your Facebook business page settings are not restricting who can view your page (ie: Needs to be logged in, or age restrictions, etc).

The above Facebook Like Box is a great option if you're Business Page is active on Facebook. However, if you haven't posted anything in a while, or you don't have too many "Likes", you may want to go with a different option.

Facebook Like, Follow or Share Button

You will retrieve the required code by going here: https://developers.facebook.com/docs/plugins/page-plugin

1. First, we'll need to find your Facebook URL, for example I’ll use VCG's: https://www.facebook.com/VisualCommunicationsGroup
2. Then, navigate to the Developer's Facebook URL above (https://developers.facebook.com/docs/plugins/page-plugin).
3. On the left hand side you will see options for a Follow Button, Like Button, Share Buttons, and more. Click on the option you believe you'll want to use to see a preview of what this option looks like. Again, there will be varying settings that you can adjust depending on the plugin you'd like to use.
4. Once you've gone through the attributes and got the button how you'd like it to display, click on the "Get Code" button.
5. Within this new window, select "IFrame" at the top. Click on the code which will highlight all of the code, then click either "Ctrl + C" or right-click and choose "Copy" to copy this code.
6. Now, we'll need to paste this HTML where we'd like this plugin to display on the website. To paste this code, you’ll want to navigate to where you’d like the box to display. Click the “Source” button to toggle into the HTML view, then paste the code. If you’re unsure of how to do this, feel free to contact VCG for more information. Also, you can view this article for more information - click here (see body content section). Note that within the preview within MyVCG.com will not display the whole box. It will only have the name of the Facebook Page. In this example, you'll see a link for "Visual Communications Group". However, you should be able to see the Facebook button on your website immediately. If you do not see it, please refresh your page. If you're still not seeing it, ensure that your Facebook business page settings are not restricting who can view your page (ie: Needs to be logged in, or age restrictions, etc).

Below are different Google+ Plugin Options:

Twitter Feed

You will retrieve the required code by going here: https://dev.twitter.com/web/embedded-timelines/user

1. First, we'll need to find your Twitter URL, for example I’ll use VCG's: https://twitter.com/VCGCorporate
2. Then, navigate to the Developer's Twitter URL above (https://dev.twitter.com/web/embedded-timelines/user).
3. The easiest way to implement a Twitter feed is to navigate to the "HTML Markup" section. This will give you an example of the HTML you'll need to paste into your website. You will need to edit their HTML template slightly by changing the {screen_name} content to reflect your profile. The example provided is:
   <a class="twitter-timeline"
   href="https://twitter.com/{screen_name}">
   Tweets by @{screen_name}
   </a>
   
   Which we will then edit to reflect our profile:
   <a class="twitter-timeline"
   href="https://twitter.com/VCGCorporate">
   Tweets by @VCGCorporate
   </a>
   
4. Now, we'll need to paste this HTML where we'd like this plugin to display on the website. To paste this code, you’ll want to navigate to where you’d like the box to display. Click the “Source” button to toggle into the HTML view, then paste the code. If you’re unsure of how to do this, feel free to contact VCG for more information. Also, you can view this article for more information - click here (see body content section). Note that within the preview within MyVCG.com will not display the whole box. It will only have the name of the Twitter Page. In this example, you'll see a link for "Visual Communications Group". However, you should be able to see the Twitter box on your website immediately.

Twitter Message or Follow Buttons

There are a few options on the left hand side that you can choose from. You can have a Message or Follow button. You'll find these options here: https://dev.twitter.com/web/embedded-timelines/user

1. First, we'll need to find your Twitter URL, for example I’ll use VCG's: https://twitter.com/VCGCorporate
2. Then, navigate to the Developer's Twitter URL above (https://dev.twitter.com/web/embedded-timelines/user) and click on the button option you'd like on the left hand side.
3. Copy the HTML from the first example and update the screen name to yours. In this example, I'll be doing the "Message Button". However, the steps for the "Follow" button are very similar. So, for this example:
   <a href="https://twitter.com/messages/compose?recipient_id=3805104374"
   class="twitter-dm-button" data-screen-name="@furni">
   Message @furni</a>
   
   Which we will then edit to reflect our profile:
   <a href="https://twitter.com/messages/compose?recipient_id=3805104374"
   class="twitter-dm-button" data-screen-name="@VCGCorporate">
   Message @VCGCorporate</a>
4. Now, we'll need to paste this HTML where we'd like this plugin to display on the website. To paste this code, you’ll want to navigate to where you’d like the box to display. Click the “Source” button to toggle into the HTML view, then paste the code. If you’re unsure of how to do this, feel free to contact VCG for more information. Also, you can view this article for more information - click here (see body content section). Note that within the preview within MyVCG.com will not display the whole box. It will only have the name of the Twitter Page. In this example, you'll see a link for "Visual Communications Group". However, you should be able to see the Twitter box on your website immediately.
5. Go back to the Twitter development site and click the "load Twitter's widgets JavaScript using our loading snippit" link in step #3. Provide the JavaScript to your support group at VCG to implement for you. For the security of our websites and servers, we do not allow you to upload JavaScript. You will follow these steps for any type of Twitter buttons (Tweet, Message, and Follow).

Below are different Google+ Plugin Options:

Google+ Badge

You can add a Google+ Badge to your website. You'll find these options here: https://developers.google.com/+/web/badge/

1. You'll need to select the correct Google+ user from the top drop down. You may need to be logged into your Google+ account in order to see this.
2. Adjust the attributes as you see fit, the preview will update on the right per the attributes you've selected.
3. Copy the code from the Snippet frame in the lower right.
4. The code will be formatted similar to:
   <!-- Place this tag in your head or just before your close body tag. -->
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   <!-- Place this tag where you want the widget to render. -->
   <div class="g-page" data-href="//plus.google.com/u/0/108288875379691478592" data-rel="publisher"></div>
   
   You will need to paste the HMTL of this code where you'd like it visible on the website. The HTML from this code is as follows:
   <!-- Place this tag where you want the widget to render. -->
   <div class="g-page" data-href="//plus.google.com/u/0/108288875379691478592" data-rel="publisher"></div>
   
   You will need to provide the JavaScript to your support team at VCG. The JavaScript from this code is as follows:
   <!-- Place this tag in your head or just before your close body tag. -->
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   
   
5. Now, we'll need to paste this HTML where we'd like this plugin to display on the website. To paste this code, you’ll want to navigate to where you’d like the box to display. Click the “Source” button to toggle into the HTML view, then paste the code. If you’re unsure of how to do this, feel free to contact VCG for more information. Also, you can view this article for more information - click here (see body content section). Note that within the preview within MyVCG.com will not display the whole box. It will only have the name of the Google+ Profile. In this example, you'll see a link for "Visual Communications Group". However, you should be able to see the Google+ badge on your website immediately.