Build Your Own News Aggregator with Twitter Bootstrap and SimplePie

Wouldn’t it be cool to use two great technologies to create your very own news aggregating website? Well surely it would, and that is exactly what we’re going to do. Let’s grab ourselves a copy of the latest version of Twitter Bootstrap and SimplePie and get cookin!

The tools you will need

http://simplepie.org/

SimplePie is a PHP Library that is fast and easy to use for parsing syndication rss feeds. We’ll use this as the engine that will grab data for our news aggregator. SimplePie will handle the heavy lifting for us on the backend.

http://getbootstrap.com/

Up front we’ll use Twitter Bootstrap 3 to give us a quick and easy way to apply a nice and professional looking front end to our site.

http://bootswatch.com/

This step is optional, but if you would prefer a different style to your design, while still using the same markup and syntax, you could choose one of the many beautiful designs from Bootswatch.

We’re going to keep this as simple as we possibly can. In fact, this site will only have one index.php page consisting of 328 lines of mixed HTML and PHP, and a handful of supporting files to be included via PHP for SimplePie and Twitter Bootstrap. This is just a quick and fun example of using these two very cool tools to build something fun.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

<!doctype html>

<html>

<head>

</head>

<?php

// turn off errors

error_reporting(0);

// feeds for our example, choose your favorites

$one = 'http://techcrunch.com/feed/';

$two = 'http://www.theverge.com/rss/index.xml';

$three = 'http://allthingsd.com/feed/';

$four = 'http://thenextweb.com/feed/';

// Include SimplePie

include_once('autoloader.php');

include_once('idn/idna_convert.class.php');

// Create a new instance of the SimplePie object

$feed = new SimplePie();

// Set feed url

$feed->set_feed_url($one);

// Trigger force-feed

$feed->force_feed(true);

// Initialize the whole SimplePie object. Read the feed, process it, parse it, cache it, and

// all that other good stuff. The feed's information will not be available to SimplePie before

// this is called.

$success = $feed->init();

// We'll make sure that the right content type and character encoding gets set automatically.

// This function will grab the proper character encoding, as well as set the content type to text/html.

$feed->handle_content_type();

<body>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

<p class="navbar-brand">SimpleBoot News</p>

</div>

</div>

<?php $item = $feed->get_item(0); ?>

<h1>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</h1>

<p><?php echo '<img src="'.$feed->get_favicon().'">'; ?> <?php $d = strip_tags($item->get_description()); echo substr($d, 0, 300);?></p>

<p><a <?php echo 'href="' . $item->get_permalink() . '"'; ?> class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-link"></span> <span class="badge">Learn more »</span></a></p>

</div>

<?php $item = $feed->get_item(1); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small></h4>

</div>

<div class="panel-body"> <?php echo '<img src="'.$feed->get_favicon().'">'; ?> <?php $d = strip_tags($item->get_description()); echo substr($d, 0, 300);?>  <a <?php echo 'href="' . $item->get_permalink() . '"'; ?>><span class="glyphicon glyphicon-link"></span></a></div>

</div>

<?php $item = $feed->get_item(2); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php $item = $feed->get_item(3); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php

// Create a new instance of the SimplePie object

$feed = new SimplePie();

// Set feed url

$feed->set_feed_url($two);

// Trigger force-feed

$feed->force_feed(true);

// Initialize the whole SimplePie object. Read the feed, process it, parse it, cache it, and

// all that other good stuff. The feed's information will not be available to SimplePie before

// this is called.

$success = $feed->init();

// We'll make sure that the right content type and character encoding gets set automatically.

// This function will grab the proper character encoding, as well as set the content type to text/html.

$feed->handle_content_type();

<?php $item = $feed->get_item(0); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong></h3>

</div>

<div class="panel-body"><?php echo '<img src="'.$feed->get_favicon().'">'; ?> <?php $d = strip_tags($item->get_description()); echo substr($d, 0, 300);?>

<p><a <?php echo 'href="' . $item->get_permalink() . '"'; ?> class="btn btn-default pull-right" href="#" role="button"><span class="glyphicon glyphicon-link"></span> Read More »</a></p>

</div>

<?php $item = $feed->get_item(1); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php $item = $feed->get_item(2); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php $item = $feed->get_item(3); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php

// Create a new instance of the SimplePie object

$feed = new SimplePie();

// Set feed url

$feed->set_feed_url($three);

// Trigger force-feed

$feed->force_feed(true);

// Initialize the whole SimplePie object. Read the feed, process it, parse it, cache it, and

// all that other good stuff. The feed's information will not be available to SimplePie before

// this is called.

$success = $feed->init();

// We'll make sure that the right content type and character encoding gets set automatically.

// This function will grab the proper character encoding, as well as set the content type to text/html.

$feed->handle_content_type();

<?php $item = $feed->get_item(0); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong></h3>

</div>

<div class="panel-body"><?php echo '<img src="'.$feed->get_favicon().'">'; ?> <?php $d = strip_tags($item->get_description()); echo substr($d, 0, 300);?>

<p><a <?php echo 'href="' . $item->get_permalink() . '"'; ?> class="btn btn-default pull-right" href="#" role="button"><span class="glyphicon glyphicon-link"></span> Read More »</a></p>

</div>

<?php $item = $feed->get_item(1); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php $item = $feed->get_item(2); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php $item = $feed->get_item(3); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php

// Create a new instance of the SimplePie object

$feed = new SimplePie();

// Set feed url

$feed->set_feed_url($four);

// Trigger force-feed

$feed->force_feed(true);

// Initialize the whole SimplePie object. Read the feed, process it, parse it, cache it, and

// all that other good stuff. The feed's information will not be available to SimplePie before

// this is called.

$success = $feed->init();

// We'll make sure that the right content type and character encoding gets set automatically.

// This function will grab the proper character encoding, as well as set the content type to text/html.

$feed->handle_content_type();

<?php $item = $feed->get_item(0); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong></h3>

</div>

<div class="panel-body"><?php echo '<img src="'.$feed->get_favicon().'">'; ?> <?php $d = strip_tags($item->get_description()); echo substr($d, 0, 300);?>

<p><a <?php echo 'href="' . $item->get_permalink() . '"'; ?> class="btn btn-default pull-right" href="#" role="button"><span class="glyphicon glyphicon-link"></span> Read More »</a></p>

</div>

<?php $item = $feed->get_item(1); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php $item = $feed->get_item(2); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

<?php $item = $feed->get_item(3); ?>

<?php if ($item->get_permalink()) echo $item->get_title(); ?>

</strong> </a><small><?php echo $item->get_date('j M Y, g:i a'); ?></small> </h4>

</div>

</div>

</footer>

</div>

</body>

</html>

Supporting Files and Folders

The above index.php file is meant to go in your root directory. The supporting files you need in the root directory are autoloader.php, bootstrap.min.css, and bootstrap.min.js. I told you this would be simple 🙂

There are two supporting folders; cache, and library. The cache folder contains the cached entries of the data you collect with SimplePie and the library folder contains the SimplePie.php class and the remaining SimplePie class files in a subfolder called SimplePie. Once all of this is in place, you are ready to launch your site! The picture at the beginning of this post gives an idea of what it will look like.

The PHP that makes it work

Lastly we’ll provide the actual methods used in the SimplePie object to get the data of each post you display. This will help to make sense of what is going on in the provided index.php file above.

// Create a new instance of the SimplePie object

$feed = new SimplePie();

// Set feed url

$feed->set_feed_url($one);

// Trigger force-feed

$feed->force_feed(true);

// Initialize the whole SimplePie object. Read the feed, process it, parse it, cache it, and

// all that other good stuff. The feed's information will not be available to SimplePie before

// this is called.

$success = $feed->init();

// We'll make sure that the right content type and character encoding gets set automatically.

// This function will grab the proper character encoding, as well as set the content type to text/html.

$feed->handle_content_type();

// grab the first item in the feed, use 1 or 2, etc for the other posts

$item = $feed->get_item(0);

// the link back to the source

$item->get_permalink();

// the title of the article

$item->get_title();

// the date formatted nicely

$item->get_date('j M Y, g:i a');

// the favicon of the source

$feed->get_favicon();

// sanitize the post content and put it in a variable

$d = strip_tags($item->get_description());

// echo out the first 300 characters as a sumamary

echo substr($d, 0, 300);

Thank you for reading Build Your Own News Aggregator with Twitter Bootstrap and SimplePie – If you found this post helpful, Please do share using the buttons below!