Skip to content

Commit e934a3b

Browse files
author
Omar El Gabry
committed
v1.0
v1.0
1 parent f0ac6ca commit e934a3b

28 files changed

+1132
-1340
lines changed

LICENSE.md

Lines changed: 21 additions & 339 deletions
Large diffs are not rendered by default.

README.md

Lines changed: 84 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,110 @@
1+
![Screenshot](https://raw.githubusercontent.com/OmarElGabry/Hashtegny/master/img/hashtegny.png)
2+
13
# Hashtegny
24

3-
A plugin that aggregates "hashtags" from different social media networks like twitter, instagram, googleplus. It displays the posts in a unique, attractive, and animated layout. You can use it for personal purpose, during any conference or event, for an Organization, or even at a Store. So, you can engage the audiences anywhere and increase your interaction and impact.
5+
jQuery Plugin aggregates hashtags from different social media networks. Posts are displayed in a unique, attractive, and animated layout.
46

5-
How to do that? Simply you can display it on your websites, mobile, TV displays, or using projectors on a wall.
7+
You can use it for personal purpose, during any conference or event, for an organization, or even at a Store. So, you can engage the audiences anywhere and increase your interaction and impact.
68

7-
Unfortunately it doesn't support Facebook since the fact that The public post search was deprecated with Graph API v2.0.
8-
But I will try instead to add Facebook as soon as i find any way.
9+
_How to do that?_ Simply you can use it on your website, mobile, TV displays, or using projectors on a wall.
910

10-
Desktop & Mobile Screenshots
11-
![Screenshot](https://raw.githubusercontent.com/OmarElGabry/Hashtegny/master/_images/Screenshot.jpg)
11+
### Social Networks Supported
12+
+ Twitter
13+
+ Instagram
14+
+ Google+
15+
+ VK
16+
+ ~~Facebook(Deprecated)~~
1217

1318
## Demo
1419

15-
[Click here to watch a Demo](http://omarelgabry.github.io/Hashtegny/). Sorry, There is a problem with Twitter. Since GitHub doesn't deal with PHP. **However** it works well if you take it on your local server or webserver
20+
Check [Demo](http://omarelgabry.github.io/Hashtegny/)
1621

17-
## Features
22+
**NOTE** Twitter won't work in the previous demo link because Twitter API requires PHP, and GitHub Pages doesn't execute PHP. But, it works well on your local server or webserver.
1823

19-
* Aggregates different hashtags from different social media networks.
20-
* Displays the posts in a unique, attractive, and animated layouts.
21-
* It automatically update the Time stamp of each post.
22-
* You can Update the posts without refresh the page, meaning you can get the latest posts and add them to the current posts.
23-
* Posts are sorted according to the time they were created at.
24-
* Posts will be displayed in a loop, one after another in animated effects.
25-
* It Supports Arabic letters.
26-
* You can restart the plugin without need to refresh the page.
27-
* You can use it anywhere; conference, event, at a Store.
28-
* You can use it on your websites, mobile, TV, Using projectors on wall.
29-
* Build based on latest version of jQuery(CDN)
30-
* Easy to be maintained and customized.
31-
32-
## Getting started
24+
## Features
25+
+ Aggregates hashtags from different social media networks.
26+
+ Displays the posts in a unique, attractive, and animated layouts.
27+
+ Works on different screen sizes.
28+
+ It automatically updates the time stamp of each post.
29+
+ Posts are sorted according to the time they were created at.
30+
+ Posts are clickable.
31+
+ Ready to be used anywhere; conference, event, at a Store.
32+
+ You can use it on your websites, mobile, TV, Using projectors on wall.
33+
+ Build based on latest version of jQuery(CDN)
34+
+ Easy to be maintained and customized.
35+
36+
## Getting Started
3337

3438
Add CSS Files:
3539
```html
36-
<!-- Loading(spinners) Animation -->
37-
<link rel="stylesheet" href="http://css-spinners.com/css/spinner/three-quarters.css" type="text/css">
38-
<!-- Animation for Posts -->
39-
<link rel="stylesheet" href="_css/animations.min.css" type="text/css" />
40-
<!-- Main CSS File -->
41-
<link rel="stylesheet" href="_css/main.css" type="text/css" />
40+
<link rel="stylesheet" href="css/animations.min.css" type="text/css" />
41+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
42+
<link rel="stylesheet" href="css/main.css" type="text/css" />
4243
```
4344

4445
Add JS Files:
4546
```html
46-
<!-- jQuery -->
47-
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
48-
<!-- Animation for Posts -->
49-
<script type="text/javascript" src="_scripts/animations.min.js"></script>
50-
<script type="text/javascript" src="_scripts/appear.min.js"></script>
51-
<!-- Main JS -->
52-
<script type="text/javascript" src="_scripts/main.js"></script>
47+
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
48+
<script type="text/javascript" src="js/animations.min.js"></script>
49+
<script type="text/javascript" src="js/appear.min.js"></script>
50+
<script type="text/javascript" src="js/hashtegny.js"></script>
5351
```
5452

55-
Add UI to get the hashtag you want to search for:
53+
Finally, Run the plugin:
5654
```html
57-
<div id="userInput" class="userInput">
58-
<div class='wrongInput'>Please make sure to use valid characters, don't use '#' and use at least one alphabet letter</div>
59-
<form autocomplete="on" method="post" >
60-
<label for="instagram" class="instagramLabel">Instagram:#</label>
61-
<input type="text" name="instagram" id="instagram" value="aiesec" maxlength="15" />
62-
<br />
63-
<label for="googleplus" class="googleplusLabel">GooglePlus:#</label>
64-
<input type="text" name="googleplus" id="googleplus" value="gsamena" maxlength="15"/>
65-
<br />
66-
<label for="twitter" class="twitterLabel">Twitter:#</label>
67-
<input type="text" name="twitter" id="twitter" value="تويتر" maxlength="15"/>
68-
<br />
69-
<input type="submit" name="submit" id="submit" value="#Hashtegny" title="Press Me!" />
70-
</form>
71-
</div>
55+
<!-- Inside your <body> tag -->
56+
<div id="myPlugin"></div>
7257
```
73-
74-
Finally, Add this line to initialize the Plugin:
75-
```html
76-
<div id="Hashtegny" class="Hashtegny"></div>
58+
```js
59+
<script>
60+
$(document).ready(function(){
61+
62+
// start the plugin & pass your options
63+
$('#myPlugin').hashtegny({
64+
twitter:{
65+
enable: true,
66+
hashtag: "twitter",
67+
count: 5 // number of posts to be displayed
68+
},
69+
google:{
70+
enable: true,
71+
hashtag: "google",
72+
count: 5
73+
},
74+
instagram:{
75+
enable: true,
76+
hashtag: "insta",
77+
count: 5
78+
},
79+
vk:{
80+
enable: true,
81+
hashtag: "зима",
82+
count: 5
83+
},
84+
textLength: 300, // max length of post content
85+
animate: 8, // time of animation for each post in seconds
86+
updateTime: 60, // update post time every 60 second(1 min)
87+
background: "background.jpg", // background image
88+
showError: false // show error alert box if any error encountered
89+
});
90+
});
91+
</script>
7792
```
78-
**IMPORTANT:** When you use the Plugin, make sure that you are on a local host Or on your webserver.
93+
#### Want to change the image background?
94+
Add your image in _img_ directory, then assign ```background``` to ```imagefilename.extension```.
7995

80-
## Dependencies
96+
Default is set to ```background.jpg```.
8197

82-
* Spinners for loading animation: http://css-spinners.com/#/spinners/
83-
* Posts Animation: https://github.com/joemottershaw/animations
84-
* Twitter API: https://github.com/J7mbo/twitter-api-php
98+
## Support
99+
I've written this script in my free time during my studies. This is for free, unpaid. If you find it useful, please support the project by spreading the word.
85100

86-
## License
87-
The Plugin built under MIT license.
101+
## Contribute <a name="contribute"></a>
102+
103+
Contribute by creating new issues, sending pull requests on Github or you can send an email at: [email protected]
88104

89-
## Issues
90-
If you found any bug or you want to add any feature, Please report it here: https://github.com/omarelgabry/Hashtegny/issues. Or you can email me at: [email protected]. Your feedback will be really appreciated.
105+
## Dependencies
106+
+ [Animations](https://github.com/joemottershaw/animations)
107+
+ [Twitter API](https://github.com/J7mbo/twitter-api-php )
108+
109+
## License
110+
Built under [MIT](http://www.opensource.org/licenses/mit-license.php) license.

_css/three-quarters.css

Lines changed: 0 additions & 96 deletions
This file was deleted.

_images/Screenshot.jpg

-227 KB
Binary file not shown.

_images/vol1.jpg

-45.3 KB
Binary file not shown.

_images/vol2.jpg

-46.8 KB
Binary file not shown.

_images/vol3.jpg

-42.2 KB
Binary file not shown.

_images/vol4.jpg

-45.7 KB
Binary file not shown.

_images/vol5.jpg

-46.1 KB
Binary file not shown.

_scripts/animations.min.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)