Many users have their blog, twitter feed, facebook feed and more in a site separate from their Brilliant Directories site. This can result in a better handling of security, better management of updates, customization and other positive effects that come from separating both system (Separation of Concern). If a site is setup in this way, posts from the external blog can be streamed in a widget by following this steps (Note: This example uses Wordpress, but the RSS Feed still applies to any updated Blog CMS system):


Note the following:


  • To avoid the Cross Site Request Security Issues, we will be using the Google RSS Api for this. Using direct JavaScript, PHP or even JQuery could result in getting a denied access since you are trying to feed your site with information from another site, so instead of asking for multiple permission levels, we simply call the RSS directly and avoid long codes with it.
  • The amount of Posts depend on the RSS on your site. We created a variable to limit the amount of posts you wish to see based on the most recent one.
  • This can be scripted and extended as much as you like. The properties for each RSS item/entry object depend on your site. So this can work with not only Wordpress but also Joomla, Drupal and any other Blog/Site that can create a RSS Feeder.
  • The only step you might need to do on your Blog site is to find your RSS Feed (In this example it is MyWPSite.com/feed)
  • You would need to create a Widget on your BD System since we will be working with JavaScript code. Doing this directly on the Content Pages will result in the code being commented out because of security reasons.
  • On your site, the RSS feeder might take a couple of minutes or even hours to refresh. If you wish to update the RSS feeder faster, you could either access/open your feed page on your Blog site (Simply open the feed page and it will self update) or have a plugin/extension/widget do this for you every time a new post is made.
  • The update time could vary depending on plugins/extensions used, Blog site type, RSS system used, etc.. Normal time is between 5 to 30 minutes for each update to appear.



The steps needed are:


BLOG FEED


1. On your Wordpress site, find the Feed page. In our example it is http://thedeveloper.club/feed/ (See the /feed/ at the end). Once you have the feed page, copy it somewhere and then continue to the next step. We will be using the URL soon enough.


2. On your Backend Dashboard, go to Toolbox -> Widget Manager and create a Widget.


3. Name the widget whatever you want. In this example it is named Blog Feeder.


4. Inside your newly created widget, on the Widget Code Box paste the following: 


<div id="blogFeeder"></div>


 5. On the Widget CSS Box paste the following:  


#blogFeeder span {
  width: 44%;
  margin-bottom: 25px;
  min-height: 100px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-bottom: 1px solid #eee;
  margin-left: 5%;
 
}

#blogFeeder span p {
 margin-top:10px;
}

#blogFeeder span img {
 margin-bottom:10px;
 border-radius:7px;
 border:1px solid black;
 padding:1px;
}


  6. On the JavaScript Code Box paste the following code and be sure to change the value of blogSite to your blog and the value of maxPosts to the maximum amount of articles you wish to see on your BD site:    


<script src="https://www.google.com/jsapi"></script>
<script>google.load("feeds", "1");</script>
<script>
var blogSite = "http://thedeveloper.club/feed/";
var maxPosts = 6;

var feed = new google.feeds.Feed(blogSite);
feed.setNumEntries(maxPosts);
feed.load(function (data) {
for (var post = 0; post < maxPosts; post++) {
    	var postme = data.feed.entries[post];
    	$('#blogFeeder').append(
        '<span><a href="' + postme.link + 
        '" target="_blank"><img src="' + 
        $(postme.content).find('img:first').attr('src') + 
        '" width="240" height="200" alt="No Image"/></a><h2><a href="' + 
        postme.link + '" target="_blank">' + postme.title + 
        '</a></h2><p>' + postme.contentSnippet + '</p></span>');
	}
});
</script>


7. Save your widget and go to your Content Pages (Content Link on the Dashboard).


8. Select the content page you wish to add your Blog articles - in our example we are using the home page. Click the Edit button on the home content page.


9. Click on the Source Code icon (Looks like < >) and add the new widget like in the position you wish to see it like so:


[widget=Blog Feeder]


10. Save it and now you should have an RSS Feeder that grabs your Articles from another page and also points you clients to that Blog. The end result should look similar to this: http://ninja.brilliantdemo.com/ You can always customize the look by changing the CSS code to your liking.



TWITTER FEED


For Twitter feeds, you can skip steps 4,5 and 6 and simply follow this steps:


1. Go to your Twitter Widget Page at https://twitter.com/settings/widgets and click on the Create Widget button.


2. This will by default select the user timeline option which is the one needed for the Twitter Feed to work. Simply click on the Save Settings button.


3. After clicking on the Save Settings button a HTML code will appear at the bottom. Copy this code.


4. Follow the 3 steps mentioned at the beginning of this tutorial, but on Step 4, instead of pasting the code mentioned there, you would past the code form the Twitter Code you just copied. So Inside your newly created widget, on the Widget Code Box you would paste the following (This is for my case):


  

<a class="twitter-timeline" href="https://twitter.com/luisalvaradox" data-widget-id="605466402049409025">Tweets by @luisalvaradox</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 

5. To customize the look of the widget, you could add an additional CSS to the widget's CSS box, for example, to control the Height:


 

.twitter-timeline {
	height: 490px;
}

 


With this you now have an excellent Twitter feed, similar to the image below: