Daydream Theme

Contents

1. Instagram Feed Setup

2. Google Analytics Setup

3. Twitter Feed Setup

4. How to receive notifications for Facebook Comments

5. Google Font Setup

1. Instagram Feed Setup

If you’d like a Instragram feed on your home page as seen in the Candice demo, you will need two pieces of basic info which is your Instragram ID and Access token. This can be done quite easily by following the instructions below.

Instagram ID and Access Token - Luckily this information is quite easy to retrieve even for non-developers. 



2. Google Analytics Setup

If you’d like to monitor your sites analytical data and have registered for Google Analytics, you can easily add your tracking code into your blog. If you do not yet have a Google Analytics account, visit http://www.google.com/analytics/, register an account for your blog website. 

Now, assuming you've ticked off the prerequisites required for setting Google Analytics up on your blog, simply visit this link below for step-by-step instructions made out in infographic style to help guide you through the setup process in as simple of a way as possible:

http://artistic-influence.tumblr.com/candice-documentation#ga

If you still have any issues, don't hesitate to drop us a support ticket and we'll get back to you as soon as we can.


3. Twitter Feed Setup

Most our themes are compatible with the embed widget provided by Twitter, it's a simple copy/paste process, however, assuming it's your first time, this support article will help make it as easy of a process as can be. As long as you follow this tutorial you should be able to have it up in less than 5 minutes in a few simple steps which we’ll outline below !! :D

1. Head over to twitter.com and sign into your account.

2. Click your profile picture on the top right to toggle the dropdown and click “Settings” as shown in the image below.


3. On the next page, click “Widgets” on the left hand sidebar as shown in the image below.


4. Click the “Create new” button located near the top right hand of the page.


5. Click “Create widget”.


6. On the next page, there will be a small box with code contained within, copy the code inside.


7. Open a new tab or window in your browser and head over the your Tumblr account > Edit Theme section. Once there, scroll down the left hand sidebar till you see the “Twitter Feed Embed Code” section and paste your Twitter embed code in the text field.


8. Now all you need to do is hit “Save” and you are done !! :D 

NOTE: You may not see the Twitter widget in the live preview, if it is not showing in your live preview, save the changes anyway and go directly to your blog in a new window/tab to see if the widget has been properly installed, which it should be. If it hasn’t installed properly, read over the steps to double check you have done everything correctly. If you are still having issues, don't hesitate to drop a ticket and we'll get to you as soon as we can.

4. How to receive notifications for Facebook Comments

Hey! :)

Since we've implemented Facebook Commenting system into our themes, we've had support questions regarding notifications not appearing after a visitor has commented on your blog post. This article has been created to directly help any users having the same issue.

There is a solution to this and our senior developer Marion has illustrated this solution in easy to follow step-by-step instructions.


FB App Setup:
1. First step is to have yourself registered to a developer account for Facebook @ https://developers.facebook.com if you don’t have an account yet. 





2. Second step is to create a Facebook App.


3. Next step is to make your Facebook App public. To do this, go to the App Review panel, and toggle the option under “Make [app name] public?”.


4. Then from there, you can now get your App ID and take note of this since this will be used in later steps.



5. Last step in setting up the Facebook app is to set your moderators. To do this, you will need to go to this link: https://developers.facebook.com/tools/comments/[app_id]. Just replace [app_id] with your FB App ID you copied in step 4 (i.e. https://developers.facebook.com/tools/comments/945759668887273). 


Then go to settings via the settings link. Inside the settings window, make sure that the Enable Notifications options is turned on. You can also set the default options and rules for your comment app from here. But the important step is to set your moderators via the Moderators tab. Here you can set any Facebook account as moderators of your comment app, but most importantly, you have to set you own Facebook account as a moderator in order for you to receive notifications every time someone makes a comment.





Theme modification:

For the theme modification, there is a very minor change you will need to make which will be outlined below:

1.First step is to add an option for the Facebook app ID. So, somewhere along the header where the text options are found, you will need to add the option:

<meta name="text:FB App ID" content="">

2. Second is to change the line that says:

{block:IfNotHideFacebookComments}<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1&appId=372884536131543"></script>{/block:IfNotHideFacebookComments}

And change that to:

{block:IfNotHideFacebookComments}
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId={text:FB App ID}";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{/block:IfNotHideFacebookComments}    




3. Lastly, go to any instance of

<div id="fb-root"></div>

and see if the appId in the script below it is replaced with the

{text:FB App ID}

placeholder. So for instance if the code is:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=133284720335915";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

This will now be:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId={text:FB App ID}";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>    



P.S. Don’t forget to input your Facebook App ID into your option in the backend. And lastly, do note that the individual moderators can receive notifications from comments by other users, but not comments the moderator made himself. And to view all the comments made in your blog via the FB comment plugin, you can view them here: https://developers.facebook.com/tools/comments/[fb_app_id]/. (i.e. https://developers.facebook.com/tools/comments/945759668887273/)


Hope this helps, and of course if you are still having troubles please do not hesitate to open a support ticket where we'll be able to help troubleshoot your issue :)





5. Google Font Setup

Although Tumblr offers some awesome fonts for all users to incorporate into themes for free, you may or may not find exactly what you are looking for which is why we've integrated Google Fonts into every theme we make. Google Fonts has over 500+ free fonts available to anyone. Depending on your experience with using Google Fonts, you may run into some difficulties in figuring out how to use your chosen font which is why we've created this infographic below to help you set up your font through textual and visual instructions.

Step 1. Visit https://www.google.com/fonts to find an awesome font for your blog!