Start a new topic
Answered

Displaying Wordpress Articles in our BD website

 I want to add some php logic that allows for bringing over the top 10 or top 3 articles or whatever one wants to our website from our word press blog. This way users can see these articles and when clicked on, the user would be brought to the full article in our blog. Wordpress gives us the code to do it and it is PHP. We can do it on any website. However, where is the best places to put the code? Anytime I put it anywhere the pages goes blank.


Thanks

Jim




Best Answer

So here is what I did in the last 2 hours:


1. RSS Feed your BD Site from the Wordpress Feeder (In my case it was MyWPSite.com/feed)


2. Create a Widget since we will be working with Javascript code (Doing this on the Content Pages will result in the code being commented out for security reasons).


3. Paste the code I made there and enjoy your new RSS Feed on your BD Site.


Note the following:


  • To avoid the Cross Site Request Security Issues, I am using the Google RSS Api for this. Using direct Javascript, PHP or even JQuery can result in getting a denied access since you are trying to feed your site with information from another site, so instead of giving permission, I simply called the RSS directly and avoided a long code with it.
  • The amount of Posts depend on the RSS on your site. I 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.

So the steps are:

1. On your Wordpress site, find the Feed page. In my case it was http://thedeveloper.club/feed/ (See the /feed/ at the end). Once you have the feed page, then continue to the next step.

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

3. Name the widget whatever you want. In my case I named it 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 and change the value for blogSite to your blog:    

<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 for example the home page and click on Edit.


9. Click on the Source Code icon (Looks like < >) and add the new widget like so:

[widget=Blog Feeder]

 10. Save it and now you should have a RSS Feeders 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/


Please correct me if I missed something and check if this works for you friend.


1 person has this question

Him Jim, it just so happens I am also working on something similar to this for my wordpress site. I will let you know as super soon as I have it ready and also provide you on the way I did it. Sharing is caring hehe.

So there is no way for this to be done currently? It's just script  that is interpreted on the fly that should be able to be applied anywhere, I would think. I tired to implement it on the page level but the code editor would comment it out for some reason.

 

When do you think you might have something Luis?

Answer

So here is what I did in the last 2 hours:


1. RSS Feed your BD Site from the Wordpress Feeder (In my case it was MyWPSite.com/feed)


2. Create a Widget since we will be working with Javascript code (Doing this on the Content Pages will result in the code being commented out for security reasons).


3. Paste the code I made there and enjoy your new RSS Feed on your BD Site.


Note the following:


  • To avoid the Cross Site Request Security Issues, I am using the Google RSS Api for this. Using direct Javascript, PHP or even JQuery can result in getting a denied access since you are trying to feed your site with information from another site, so instead of giving permission, I simply called the RSS directly and avoided a long code with it.
  • The amount of Posts depend on the RSS on your site. I 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.

So the steps are:

1. On your Wordpress site, find the Feed page. In my case it was http://thedeveloper.club/feed/ (See the /feed/ at the end). Once you have the feed page, then continue to the next step.

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

3. Name the widget whatever you want. In my case I named it 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 and change the value for blogSite to your blog:    

<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 for example the home page and click on Edit.


9. Click on the Source Code icon (Looks like < >) and add the new widget like so:

[widget=Blog Feeder]

 10. Save it and now you should have a RSS Feeders 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/


Please correct me if I missed something and check if this works for you friend.

Hey Luis,
   Looks great so far. Is there any chance of bring over the featured image for a given article? Great job!

Thanks
Jim

 

Hi Jim. I have updated the code to include images, a better way of telling the system how many articles you wish to see and a little pretty pony/unicorn style effects for the images (And yes, am more of a backend developer than a frontend so I suck at making the front look good right off the bat hehe.)


For any additional changes you can use our marketplace or post the idea as a wishlist on our forum.




All About Brilliant Directories Support Staff And Training Sessions


Brilliant Directories Forum Help Guide -/- Getting Awesome Support -/- The Market Place


_____________________________________


Brilliant Directories Community Manager


Luis Alvarado is a System's Engineer with a specialization in Open Source & Pedagogy. He focuses mainly on Software Development, Open Source, Security, Q&A and Rainbow Unicorns. He is an active member of Ubuntu at Ask Ubuntu. You can find more information about him on LinkedIn or StackOverflow. He currently works at Brilliant Directories with an amazing group of people doing awesome stuff.